Components Reference

Components Reference

Complete reference for all UI components available in the application.

Layout Components

<BaseLayout>

The base layout wrapper for all pages.

---
import BaseLayout from '@/layouts/BaseLayout.astro'
---

<BaseLayout title="Page Title" description="Page description">
  <!-- Page content -->
</BaseLayout>

Props

Prop	Type	Required	Description
title	string	Yes	Page title
description	string	No	Page meta description
ogImage	string	No	Open Graph image URL

Auth Components

<User>

Displays the current user status and auth controls.

---
import User from '@/components/Auth/User.astro'
---

<User />

No props required - automatically detects session state.

<ProtectedRoute>

Wraps content that requires authentication.

---
import ProtectedRoute from '@/components/Auth/ProtectedRoute.astro'
---

<ProtectedRoute requiredGroups={['members']}>
  <!-- Protected content -->
</ProtectedRoute>

Props

Prop	Type	Required	Description
requiredGroups	string[]	No	Required user groups
redirectTo	string	No	Redirect URL if unauthorized

UI Components

<Button>

Standard button component with variants.

---
import Button from '@/components/UI/Button.astro'
---

<Button variant="primary" size="lg">
  Click me
</Button>

Props

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'danger'	'primary'	Button style variant
size	'sm' | 'md' | 'lg'	'md'	Button size
disabled	boolean	false	Disabled state
type	'button' | 'submit' | 'reset'	'button'	Button type

<Card>

Container component with optional header and footer.

---
import Card from '@/components/UI/Card.astro'
---

<Card title="Card Title">
  <div slot="header">Optional header content</div>
  Main card content
  <div slot="footer">Optional footer content</div>
</Card>

Props

Prop	Type	Required	Description
title	string	No	Card title
variant	'default' | 'bordered'	No	Card style variant

Slots

• header - Optional header content
• default - Main card content
• footer - Optional footer content

Form Components

<Input>

Text input component with validation support.

---
import Input from '@/components/Forms/Input.astro'
---

<Input
  name="email"
  type="email"
  label="Email Address"
  required
  placeholder="user@example.com"
/>

Props

Prop	Type	Required	Description
name	string	Yes	Input name attribute
type	string	No	Input type
label	string	No	Input label
placeholder	string	No	Placeholder text
required	boolean	No	Required field
error	string	No	Error message

Utility Components

<ThemeToggle>

Theme switcher component.

---
import ThemeToggle from '@/components/Shared/ThemeToggle.astro'
---

<ThemeToggle />

No props required - automatically manages theme state.