### Basic Description List Example

Source: https://catalyst.tailwindui.com/docs/description-list

This example shows how to use the Description List components to create a basic list of terms and details.

```javascript
import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@/components/description-list'

function Example() {
  return (
    <DescriptionList>
      <DescriptionTerm>Customer</DescriptionTerm>
      <DescriptionDetails>Leslie Alexander</DescriptionDetails>

      <DescriptionTerm>Email</DescriptionTerm>
      <DescriptionDetails>leslie.alexander@example.com</DescriptionDetails>

      <DescriptionTerm>Access</DescriptionTerm>
      <DescriptionDetails>Admin</DescriptionDetails>
    </DescriptionList>
  )
}
```

--------------------------------

### Install Heroicons React Package

Source: https://catalyst.tailwindui.com/docs

Install the Heroicons React package using npm. This is the first step to using Heroicons in your project.

```bash
npm install @heroicons/react

```

```bash
npm install @heroicons/react

```

--------------------------------

### Complete Sidebar Example

Source: https://catalyst.tailwindui.com/docs/sidebar

A full example demonstrating the integration of Sidebar, SidebarFooter, Dropdown, DropdownMenu, DropdownItem, and DropdownDivider components. This structure is useful for creating navigation panels with nested options.

```jsx
function SidebarNavigation() {
  return (
    <Sidebar>
      <SidebarHeader>
        <Logo />
      </SidebarHeader>
      <SidebarBody>
        <SidebarSection title="Overview">
          <SidebarItem href="#">
            <HomeIcon />
            Dashboard
          </SidebarItem>
          <SidebarItem href="#">
            <ChartBarIcon />
            Analytics
          </SidebarItem>
        </SidebarSection>
        <SidebarSection title="Projects">
          <SidebarItem href="#">
            <FolderIcon />
            Projects
          </SidebarItem>
          <SidebarItem href="#">
            <DocumentIcon />
            Documents
          </SidebarItem>
          <SidebarItem href="#">
            <UsersIcon />
            Teams
          </SidebarItem>
        </SidebarSection>
      </SidebarBody>
      <SidebarFooter>
        <Dropdown>
          <DropdownButton as={Fragment}>
            <SidebarItem>
              <Avatar src="https://via.placeholder.com/40" />
              <div className="flex-1">
                <div className="text-sm/6 font-medium text-zinc-950">Denise Smith</div>
                <div className="text-xs/5 text-zinc-500">denise.smith@example.com</div>
              </div>
              <ChevronDownIcon />
            </SidebarItem>
          </DropdownButton>
          <DropdownMenu className="w-56" anchor="bottom end">
            <DropdownItem href="/account-settings">
              <Cog6ToothIcon />
              <DropdownLabel>Account settings</DropdownLabel>
            </DropdownItem>
            <DropdownItem href="/privacy-policy">
              <ShieldCheckIcon />
              <DropdownLabel>Privacy policy</DropdownLabel>
            </DropdownItem>
            <DropdownItem href="/share-feedback">
              <LightBulbIcon />
              <DropdownLabel>Share feedback</DropdownLabel>
            </DropdownItem>
            <DropdownDivider />
            <DropdownItem href="/logout">
              <ArrowRightStartOnRectangleIcon />
              <DropdownLabel>Sign out</DropdownLabel>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </SidebarFooter>
    </Sidebar>
  )
}
```

--------------------------------

### Basic Dropdown Example

Source: https://catalyst.tailwindui.com/docs/dropdown

This example demonstrates a basic dropdown with options for viewing, editing, and deleting a user. It uses href for navigation and onClick for actions. Ensure the necessary components are imported.

```javascript
import { Dropdown, DropdownButton, DropdownItem, DropdownMenu } from '@/components/dropdown'
import { ChevronDownIcon } from '@heroicons/react/16/solid'

function Example() {
  function deleteUser() {
    if (confirm('Are you sure you want to delete this user?')) {
      // ...
    }
  }

  return (
    <Dropdown>
      <DropdownButton outline>
        Options
        <ChevronDownIcon />
      </DropdownButton>
      <DropdownMenu>
        <DropdownItem href="/users/1">View</DropdownItem>
        <DropdownItem href="/users/1/edit">Edit</DropdownItem>
        <DropdownItem onClick={() => deleteUser()}>Delete</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  )
}

```

--------------------------------

### Install Catalyst Dependencies

Source: https://catalyst.tailwindui.com/docs

Install the necessary npm packages for Catalyst components. These include Headless UI, motion, and clsx.

```bash
npm install @headlessui/react motion clsx

```

```bash
npm install @headlessui/react motion clsx

```

--------------------------------

### Description List Example

Source: https://catalyst.tailwindui.com/docs/description-list

This snippet demonstrates the basic usage of the Description List component to display various details.

```javascript
import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@/components/description-list'

function Example() {
  return (
    <DescriptionList>
      <DescriptionTerm>Customer</DescriptionTerm>
      <DescriptionDetails>Michael Foster</DescriptionDetails>

      <DescriptionTerm>Event</DescriptionTerm>
      <DescriptionDetails>Bear Hug: Live in Concert</DescriptionDetails>

      <DescriptionTerm>Amount</DescriptionTerm>
      <DescriptionDetails>$150.00 USD</DescriptionDetails>

      <DescriptionTerm>Amount after exchange rate</DescriptionTerm>
      <DescriptionDetails>US$150.00 &rarr; CA$199.79</DescriptionDetails>

      <DescriptionTerm>Fee</DescriptionTerm>
      <DescriptionDetails>$4.79 USD</DescriptionDetails>

      <DescriptionTerm>Net</DescriptionTerm>
      <DescriptionDetails>$1,955.00</DescriptionDetails>
    </DescriptionList>
  )
}
```

--------------------------------

### Basic Navbar Example

Source: https://catalyst.tailwindui.com/docs/navbar

Build a basic navbar with navigation links using Navbar, NavbarSection, and NavbarItem components. Ensure necessary components are imported.

```jsx
import { Navbar, NavbarItem, NavbarSection } from '@/components/navbar'

function Example() {
  return (
    <Navbar>
      <NavbarSection>
        <NavbarItem href="/">Home</NavbarItem>
        <NavbarItem href="/events">Events</NavbarItem>
        <NavbarItem href="/orders">Orders</NavbarItem>
      </NavbarSection>
    </Navbar>
  )
}

```

```jsx
import { Navbar, NavbarItem, NavbarSection } from '@/components/navbar'

function Example() {
  return (
    <Navbar>
      <NavbarSection>
        <NavbarItem href="/">Home</NavbarItem>
        <NavbarItem href="/events">Events</NavbarItem>
        <NavbarItem href="/orders">Orders</NavbarItem>
      </NavbarSection>
    </Navbar>
  )
}

```

--------------------------------

### Stacked Layout with Navbar and Sidebar

Source: https://catalyst.tailwindui.com/docs/stacked-layout

This example demonstrates how to use the StackedLayout component, integrating a Navbar with dropdowns and navigation items, and a Sidebar with similar navigation elements. It includes examples of avatars, dropdowns, and icons for a complete UI.

```jsx
import { Avatar } from '@/components/avatar'
import {
  Dropdown,
  DropdownButton,
  DropdownDivider,
  DropdownItem,
  DropdownLabel,
  DropdownMenu,
} from '@/components/dropdown'
import { Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer } from '@/components/navbar'
import { Sidebar, SidebarBody, SidebarHeader, SidebarItem, SidebarLabel, SidebarSection } from '@/components/sidebar'
import { StackedLayout } from '@/components/stacked-layout'
import {
  ArrowRightStartOnRectangleIcon,
  ChevronDownIcon,
  Cog8ToothIcon,
  LightBulbIcon,
  PlusIcon,
  ShieldCheckIcon,
  UserIcon,
} from '@heroicons/react/16/solid'
import { InboxIcon, MagnifyingGlassIcon } from '@heroicons/react/20/solid'

const navItems = [
  { label: 'Home', url: '/' },
  { label: 'Events', url: '/events' },
  { label: 'Orders', url: '/orders' },
  { label: 'Broadcasts', url: '/broadcasts' },
  { label: 'Settings', url: '/settings' },
]

function TeamDropdownMenu() {
  return (
    <DropdownMenu className="min-w-80 lg:min-w-64" anchor="bottom start">
      <DropdownItem href="/teams/1/settings">
        <Cog8ToothIcon />
        <DropdownLabel>Settings</DropdownLabel>
      </DropdownItem>
      <DropdownDivider />
      <DropdownItem href="/teams/1">
        <Avatar slot="icon" src="/tailwind-logo.svg" />
        <DropdownLabel>Tailwind Labs</DropdownLabel>
      </DropdownItem>
      <DropdownItem href="/teams/2">
        <Avatar slot="icon" initials="WC" className="bg-purple-500 text-white" />
        <DropdownLabel>Workcation</DropdownLabel>
      </DropdownItem>
      <DropdownDivider />
      <DropdownItem href="/teams/create">
        <PlusIcon />
        <DropdownLabel>New team&hellip;</DropdownLabel>
      </DropdownItem>
    </DropdownMenu>
  )
}

function Example() {
  return (
    <StackedLayout
      navbar={
        <Navbar>
          <Dropdown>
            <DropdownButton as={NavbarItem} className="max-lg:hidden">
              <Avatar src="/tailwind-logo.svg" />
              <NavbarLabel>Tailwind Labs</NavbarLabel>
              <ChevronDownIcon />
            </DropdownButton>
            <TeamDropdownMenu />
          </Dropdown>
          <NavbarDivider className="max-lg:hidden" />
          <NavbarSection className="max-lg:hidden">
            {navItems.map(({ label, url }) => (
              <NavbarItem key={label} href={url}>
                {label}
              </NavbarItem>
            ))}
          </NavbarSection>
          <NavbarSpacer />
          <NavbarSection>
            <NavbarItem href="/search" aria-label="Search">
              <MagnifyingGlassIcon />
            </NavbarItem>
            <NavbarItem href="/inbox" aria-label="Inbox">
              <InboxIcon />
            </NavbarItem>
            <Dropdown>
              <DropdownButton as={NavbarItem}>
                <Avatar src="/profile-photo.jpg" square />
              </DropdownButton>
              <DropdownMenu className="min-w-64" anchor="bottom end">
                <DropdownItem href="/my-profile">
                  <UserIcon />
                  <DropdownLabel>My profile</DropdownLabel>
                </DropdownItem>
                <DropdownItem href="/settings">
                  <Cog8ToothIcon />
                  <DropdownLabel>Settings</DropdownLabel>
                </DropdownItem>
                <DropdownDivider />
                <DropdownItem href="/privacy-policy">
                  <ShieldCheckIcon />
                  <DropdownLabel>Privacy policy</DropdownLabel>
                </DropdownItem>
                <DropdownItem href="/share-feedback">
                  <LightBulbIcon />
                  <DropdownLabel>Share feedback</DropdownLabel>
                </DropdownItem>
                <DropdownDivider />
                <DropdownItem href="/logout">
                  <ArrowRightStartOnRectangleIcon />
                  <DropdownLabel>Sign out</DropdownLabel>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </NavbarSection>
        </Navbar>
      }
      sidebar={
        <Sidebar>
          <SidebarHeader>
            <Dropdown>
              <DropdownButton as={SidebarItem} className="lg:mb-2.5">
                <Avatar src="/tailwind-logo.svg" />
                <SidebarLabel>Tailwind Labs</SidebarLabel>
                <ChevronDownIcon />
              </DropdownButton>
              <TeamDropdownMenu />
            </Dropdown>
          </SidebarHeader>
          <SidebarBody>
            <SidebarSection>
              {navItems.map(({ label, url }) => (
                <SidebarItem key={label} href={url}>
                  {label}
                </SidebarItem>
              ))}
            </SidebarSection>
          </SidebarBody>
        </Sidebar>
      }
    >
      {children}
    </StackedLayout>
  )
}

```

--------------------------------

### Basic Listbox Example

Source: https://catalyst.tailwindui.com/docs/listbox

This is a basic example of the Listbox component. Ensure you provide an aria-label for accessibility or connect the Listbox to a label using an id.

```javascript
import { Listbox, ListboxLabel, ListboxOption } from '@/components/listbox'

function Example() {
  return (
    <Listbox name="status" defaultValue="active" aria-label="Project status">
      <ListboxOption value="active">
        <ListboxLabel>Active</ListboxLabel>
      </ListboxOption>
      <ListboxOption value="paused">
        <ListboxLabel>Paused</ListboxLabel>
      </ListboxOption>
      <ListboxOption value="delayed">
        <ListboxLabel>Delayed</ListboxLabel>
      </ListboxOption>
      <ListboxOption value="canceled">
        <ListboxLabel>Canceled</ListboxLabel>
      </ListboxOption>
    </Listbox>
  )
}

```

--------------------------------

### Sidebar with Sticky Footer Example

Source: https://catalyst.tailwindui.com/docs/sidebar

Use the `SidebarFooter` component after the `SidebarBody` component to add a sticky footer to the sidebar. This example shows a typical sidebar navigation with a user profile in the footer.

```jsx
import { Avatar } from '@/components/avatar'
import { Sidebar, SidebarBody, SidebarFooter, SidebarItem, SidebarLabel, SidebarSection } from '@/components/sidebar'
import { ChevronRightIcon } from '@heroicons/react/16/solid'
import { Cog6ToothIcon, HomeIcon, MegaphoneIcon, Square2StackIcon, TicketIcon } from '@heroicons/react/20/solid'

function Example() {
  return (
    <Sidebar>
      <SidebarBody>
        <SidebarSection>
          <SidebarItem href="/">
            <HomeIcon />
            <SidebarLabel>Home</SidebarLabel>
          </SidebarItem>
          <SidebarItem href="/events">
            <Square2StackIcon />
            <SidebarLabel>Events</SidebarLabel>
          </SidebarItem>
          <SidebarItem href="/orders">
            <TicketIcon />
            <SidebarLabel>Orders</SidebarLabel>
          </SidebarItem>
          <SidebarItem href="/broadcasts">
            <MegaphoneIcon />
            <SidebarLabel>Broadcasts</SidebarLabel>
          </SidebarItem>
          <SidebarItem href="/settings">
            <Cog6ToothIcon />
            <SidebarLabel>Settings</SidebarLabel>
          </SidebarItem>
        </SidebarSection>
      </SidebarBody>
      <SidebarFooter>
        <SidebarSection>
          <SidebarItem>
            <Avatar src="/profile-photo.jpg" />
            <SidebarLabel>Erica</SidebarLabel>
            <ChevronRightIcon />
          </SidebarItem>
        </SidebarSection>
      </SidebarFooter>
    </Sidebar>
  )
}

```

--------------------------------

### Badge Colors Example

Source: https://catalyst.tailwindui.com/docs/badge

Demonstrates how to use the `color` prop to set different colors for badges. This is useful for categorizing or highlighting information.

```javascript
import { Badge } from '@/components/badge'

function Example() {
  return (
    <div className="flex gap-3">
      <Badge color="lime">documentation</Badge>
      <Badge color="purple">help wanted</Badge>
      <Badge color="rose">bug</Badge>
    </div>
  )
}
```

--------------------------------

### Basic Alert Example

Source: https://catalyst.tailwindui.com/docs/alert

Demonstrates how to use the Alert component with a title, description, and action buttons. Use this to prompt user confirmation for critical actions.

```javascript
import { Alert, AlertActions, AlertDescription, AlertTitle } from '@/components/alert'
import { Button } from '@/components/button'
import { useState } from 'react'

function Example() {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button type="button" onClick={() => setIsOpen(true)}>
        Refund payment
      </Button>
      <Alert open={isOpen} onClose={setIsOpen}>
        <AlertTitle>Are you sure you want to refund this payment?</AlertTitle>
        <AlertDescription>
          The refund will be reflected in the customer’s bank account 2 to 3 business days after processing.
        </AlertDescription>
        <AlertActions>
          <Button plain onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>Refund</Button>
        </AlertActions>
      </Alert>
    </>
  )
}

```

--------------------------------

### Basic Combobox Example

Source: https://catalyst.tailwindui.com/docs/combobox

A fundamental example of the Combobox component, showcasing its core functionality for selecting an item. Ensure an aria-label or a connected label is provided for accessibility.

```jsx
import { Combobox, ComboboxLabel, ComboboxOption } from '@/components/combobox'

function Example({ currentUser, users }) {
  return (
    <Combobox
      name="user"
      options={users}
      displayValue={(user) => user?.name}
      defaultValue={currentUser}
      aria-label="Assigned to"
    >
      {(user) => (
        <ComboboxOption value={user}>
          <ComboboxLabel>{user.name}</ComboboxLabel>
        </ComboboxOption>
      )}
    </Combobox>
  )
}

```

```jsx
import { Combobox, ComboboxLabel, ComboboxOption } from '@/components/combobox'

function Example({ currentUser, users }) {
  return (
    <Combobox
      name="user"
      options={users}
      displayValue={(user) => user?.name}
      defaultValue={currentUser}
      aria-label="Assigned to"
    >
      {(user) => (
        <ComboboxOption value={user}>
          <ComboboxLabel>{user.name}</ComboboxLabel>
        </ComboboxOption>
      )}
    </Combobox>
  )
}

```

--------------------------------

### Badge Button Example

Source: https://catalyst.tailwindui.com/docs/badge

Shows how to render a badge as a clickable button using the `BadgeButton` component. This is suitable for interactive elements.

```javascript
import { BadgeButton } from '@/components/badge'

function Example() {
  return <BadgeButton>documentation</BadgeButton>
}
```

--------------------------------

### Basic Table Example

Source: https://catalyst.tailwindui.com/docs/table

This snippet demonstrates how to use the Table component with its sub-components to render a list of users. Ensure the necessary components are imported from '@/components/table'.

```jsx
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/table'

function Example({ users }) {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>Name</TableHeader>
          <TableHeader>Email</TableHeader>
          <TableHeader>Role</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.handle}>
            <TableCell className="font-medium">{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell className="text-zinc-500">{user.access}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
```

--------------------------------

### Basic Fieldset Example

Source: https://catalyst.tailwindui.com/docs/fieldset

This example demonstrates a basic fieldset for shipping details, including street address, country selection, and delivery notes. It utilizes various form control components within the fieldset structure.

```jsx
import { Description, Field, FieldGroup, Fieldset, Label, Legend } from '@/components/fieldset'
import { Input } from '@/components/input'
import { Select } from '@/components/select'
import { Text } from '@/components/text'
import { Textarea } from '@/components/textarea'

function Example() {
  return (
    <form action="/orders" method="POST">
      {/* ... */}
      <Fieldset>
        <Legend>Shipping details</Legend>
        <Text>Without this your odds of getting your order are low.</Text>
        <FieldGroup>
          <Field>
            <Label>Street address</Label>
            <Input name="street_address" />
          </Field>
          <Field>
            <Label>Country</Label>
            <Select name="country">
              <option>Canada</option>
              <option>Mexico</option>
              <option>United States</option>
            </Select>
            <Description>We currently only ship to North America.</Description>
          </Field>
          <Field>
            <Label>Delivery notes</Label>
            <Textarea name="notes" />
            <Description>If you have a tiger, we'd like to know about it.</Description>
          </Field>
        </FieldGroup>
      </Fieldset>
      {/* ... */}
    </form>
  )
}
```

--------------------------------

### Badge Link Example

Source: https://catalyst.tailwindui.com/docs/badge

Illustrates how to use the `BadgeButton` component with the `href` prop to create a badge that functions as a hyperlink. Use this for navigation.

```javascript
import { BadgeButton } from '@/components/badge'

function Example() {
  return <BadgeButton href="#">documentation</BadgeButton>
}
```

--------------------------------

### Sidebar with Dropdown Example

Source: https://catalyst.tailwindui.com/docs/sidebar

Illustrates a basic sidebar structure with navigation items. Refer to Dropdown documentation for dropdown menu specifics.

```javascript
function Sidebar() {
  return (
    <Sidebar>
      <SidebarBody>
        <SidebarSection title="Overview">
          <SidebarItem href="/">
            <HomeIcon />
            <SidebarLabel>Dashboard</SidebarLabel>
          </SidebarItem>
          <SidebarItem href="/broadcasts">
            <MegaphoneIcon />
            <SidebarLabel>Broadcasts</SidebarLabel>
          </SidebarItem>
          <SidebarItem href="/settings">
            <Cog6ToothIcon />
            <SidebarLabel>Settings</SidebarLabel>
          </SidebarItem>
        </SidebarSection>
      </SidebarBody>
    </Sidebar>
  )
}
```

--------------------------------

### Dropdown Menu Items

Source: https://catalyst.tailwindui.com/docs/sidebar-layout

Example of various dropdown items including icons, labels, dividers, and links for navigation.

```html
<DropdownItem href="/settings">
  <Cog8ToothIcon />
  <DropdownLabel>Settings</DropdownLabel>
</DropdownItem>
<DropdownDivider />
<DropdownItem href="/privacy-policy">
  <ShieldCheckIcon />
  <DropdownLabel>Privacy policy</DropdownLabel>
</DropdownItem>
<DropdownItem href="/share-feedback">
  <LightBulbIcon />
  <DropdownLabel>Share feedback</DropdownLabel>
</DropdownItem>
<DropdownDivider />
<DropdownItem href="/logout">
  <ArrowRightStartOnRectangleIcon />
  <DropdownLabel>Sign out</DropdownLabel>
</DropdownItem>
```

--------------------------------

### Basic Fieldset Example

Source: https://catalyst.tailwindui.com/docs/fieldset

Use Fieldset, Legend, Text, FieldGroup, Field, Label, Description, Input, Select, and Textarea to group form controls for shipping details. This example demonstrates a common pattern for organizing form elements.

```jsx
import { Description, Field, FieldGroup, Fieldset, Label, Legend } from '@/components/fieldset'
import { Input } from '@/components/input'
import { Select } from '@/components/select'
import { Text } from '@/components/text'
import { Textarea } from '@/components/textarea'

function Example() {
  return (
    <form action="/orders" method="POST">
      {/* ... */}
      <Fieldset>
        <Legend>Shipping details</Legend>
        <Text>Without this your odds of getting your order are low.</Text>
        <FieldGroup>
          <Field>
            <Label>Street address</Label>
            <Input name="street_address" />
          </Field>
          <Field>
            <Label>Country</Label>
            <Select name="country">
              <option>Canada</option>
              <option>Mexico</option>
              <option>United States</option>
            </Select>
            <Description>We currently only ship to North America.</Description>
          </Field>
          <Field>
            <Label>Delivery notes</Label>
            <Textarea name="notes" />
            <Description>If you have a tiger, we'd like to know about it.</Description>
          </Field>
        </FieldGroup>
      </Fieldset>
      {/* ... */}
    </form>
  )
}

```

--------------------------------

### Navbar with Logo Example

Source: https://catalyst.tailwindui.com/docs/navbar

Integrate a logo at the beginning of the navbar. The logo can be an image or a component. Ensure the Link and Logo components are imported.

```jsx
import { Link } from '@/components/link'
import { Navbar, NavbarItem, NavbarSection } from '@/components/navbar'
import { Logo } from './logo'

function Example() {
  return (
    <Navbar>
      <Link href="/" aria-label="Home">
        <Logo className="size-10 sm:size-8" />
      </Link>
      <NavbarSection>
        <NavbarItem href="/" current>
          Home
        </NavbarItem>
        <NavbarItem href="/events">Events</NavbarItem>
        <NavbarItem href="/orders">Orders</NavbarItem>
      </NavbarSection>
    </Navbar>
  )
}

```

```jsx
import { Link } from '@/components/link'
import { Navbar, NavbarItem, NavbarSection } from '@/components/navbar'
import { Logo } from './logo'

function Example() {
  return (
    <Navbar>
      <Link href="/" aria-label="Home">
        <Logo className="size-10 sm:size-8" />
      </Link>
      <NavbarSection>
        <NavbarItem href="/" current>
          Home
        </NavbarItem>
        <NavbarItem href="/events">Events</NavbarItem>
        <NavbarItem href="/orders">Orders</NavbarItem>
      </NavbarSection>
    </Navbar>
  )
}

```

--------------------------------

### Sidebar Layout Component

Source: https://catalyst.tailwindui.com/docs/sidebar-layout

Example of a complete SidebarLayout component, including a sidebar with a dropdown menu in the footer.

```jsx
function SidebarLayout({ children }) {
  return (
    <SidebarLayout
      sidebar={
        <Sidebar
          header={<Header />}
          footer={<SidebarFooter />}
        >
          <SidebarSection>
            <SidebarItem href="#" icon={<HomeIcon />}>
              Home
            </SidebarItem>
            <SidebarItem href="#" icon={<UsersIcon />}>
              Team
            </SidebarItem>
            <SidebarItem href="#" icon={<Cog6ToothIcon />}>
              Settings
            </SidebarItem>
          </SidebarSection>
        </Sidebar>
      }
    >
      {/* The page content */}
      {children}
    </SidebarLayout>
  )
}

function SidebarFooter() {
  return (
    <SidebarFooter className="-mx-4 mt-4 border-t">
      <Dropdown>
        <DropdownButton className="w-full">
          <span className="flex items-center gap-x-3">
            <Avatar src="https://images.unsplash.com/photo-1550525811-d54bb2a05988?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" />
            <span className="sr-only">Your profile</span>
            <span className="block truncate text-xs/5 font-normal text-zinc-500 dark:text-zinc-400">
              erica@example.com
            </span>
          </span>
          <ChevronUpIcon />
        </DropdownButton>
        <DropdownMenu className="min-w-64" anchor="top start">
          <DropdownItem href="/my-profile">
            <UserIcon />
            <DropdownLabel>My profile</DropdownLabel>
          </DropdownItem>
          <DropdownItem href="/settings">
            <Cog8ToothIcon />
            <DropdownLabel>Settings</DropdownLabel>
          </DropdownItem>
          <DropdownDivider />
          <DropdownItem href="/privacy-policy">
            <ShieldCheckIcon />
            <DropdownLabel>Privacy policy</DropdownLabel>
          </DropdownItem>
          <DropdownItem href="/share-feedback">
            <LightBulbIcon />
            <DropdownLabel>Share feedback</DropdownLabel>
          </DropdownItem>
          <DropdownDivider />
          <DropdownItem href="/logout">
            <ArrowRightStartOnRectangleIcon />
            <DropdownLabel>Sign out</DropdownLabel>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </SidebarFooter>
  )
}

function Header() {
  return (
    <div className="flex items-center gap-x-4 px-6 py-4">
      <Logo />
      <div className="flex-auto">
        <h3 className="text-base/7 font-semibold text-zinc-900 dark:text-white">
          Acme Inc.
        </h3>
        <p className="text-xs/5 text-zinc-500 dark:text-zinc-400">
          Fiscal year 2023
        </p>
      </div>
    </div>
  )
}

function Logo() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 413 82"
      className="h-8 w-auto fill-zinc-900 dark:fill-white"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M0 0h121v82H0V0zm292 0h121v82H292V0zM121 0h171v82H121V0z"
      />
    </svg>
  )
}

function SidebarSection({ children }) {
  return <nav className="p-4 [&>*]:mb-8">{children}</nav>
}

function SidebarItem({ href, icon, children }) {
  return (
    <a
      href={href}
      className="flex items-center gap-x-3 rounded-md px-3 py-2 text-sm/6 font-medium text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900 dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white"
    >
      {icon}
      {children}
    </a>
  )
}

function Sidebar({ header, footer, children }) {
  return (
    <div className="flex w-full flex-col">
      {header}
      <div className="flex-auto overflow-y-auto px-4 py-6">{children}</div>
      {footer}
    </div>
  )
}

function SidebarLayout({ sidebar, children }) {
  return (
    <div className="relative isolate flex h-screen overflow-hidden">
      <aside className="w-80 flex-none border-r border-white/10 p-6 backdrop-blur-sm lg:block">
        {sidebar}
      </aside>
      <main className="flex-auto p-6">{children}</main>
    </div>
  )
}

// Dummy components for demonstration purposes
function ChevronUpIcon() { return <svg>ChevronUpIcon</svg> }
function UserIcon() { return <svg>UserIcon</svg> }
function Cog8ToothIcon() { return <svg>Cog8ToothIcon</svg> }
function ShieldCheckIcon() { return <svg>ShieldCheckIcon</svg> }
function LightBulbIcon() { return <svg>LightBulbIcon</svg> }
function ArrowRightStartOnRectangleIcon() { return <svg>ArrowRightStartOnRectangleIcon</svg> }
function HomeIcon() { return <svg>HomeIcon</svg> }
function UsersIcon() { return <svg>UsersIcon</svg> }
function Cog6ToothIcon() { return <svg>Cog6ToothIcon</svg> }
function Avatar(props) { return <img {...props} alt="Avatar" /> }
function DropdownButton(props) { return <button {...props} /> }
function DropdownMenu(props) { return <div {...props} /> }
function DropdownItem(props) { return <a {...props} /> }
function DropdownLabel(props) { return <span {...props} /> }
function DropdownDivider() { return <hr /> }
function Dropdown(props) { return <div {...props} /> }
function SidebarFooter(props) { return <div {...props} /> }
function SidebarSection(props) { return <div {...props} /> }
function SidebarItem(props) { return <div {...props} /> }
function Sidebar(props) { return <div {...props} /> }
function SidebarLayout(props) { return <div {...props} /> }

```

--------------------------------

### Textarea with Description

Source: https://catalyst.tailwindui.com/docs/textarea

Integrates a Textarea with a Label and an additional Description component for more context. This setup is useful for providing supplementary information.

```javascript
import { Description, Field, Label } from '@/components/fieldset'
import { Textarea } from '@/components/textarea'

function Example() {
  return (
    <Field>
      <Label>Description</Label>
      <Description>This will be shown under the product title.</Description>
      <Textarea name="name" />
    </Field>
  )
}
```

```javascript
import { Description, Field, Label } from '@/components/fieldset'
import { Textarea } from '@/components/textarea'

function Example() {
  return (
    <Field>
      <Label>Description</Label>
      <Description>This will be shown under the product title.</Description>
      <Textarea name="name" />
    </Field>
  )
}
```

--------------------------------

### Basic Sidebar Structure

Source: https://catalyst.tailwindui.com/docs/sidebar-layout

Demonstrates the fundamental structure of a sidebar with sections, items, and a footer. Includes example navigation links and user profile dropdown.

```jsx
<SidebarLayout
  navbar={
    <Navbar>
      <NavbarSpacer />
      <NavbarSection>
        <NavbarItem href="/search" aria-label="Search">
          <MagnifyingGlassIcon />
        </NavbarItem>
        <NavbarItem href="/inbox" aria-label="Inbox">
          <InboxIcon />
        </NavbarItem>
        <Dropdown>
          <DropdownButton as={NavbarItem}>
            <Avatar src="/profile-photo.jpg" square />
          </DropdownButton>
          <DropdownMenu className="min-w-64" anchor="bottom end">
            <DropdownItem href="/my-profile">
              <UserIcon />
              <DropdownLabel>My profile</DropdownLabel>
            </DropdownItem>
            <DropdownItem href="/settings">
              <Cog8ToothIcon />
              <DropdownLabel>Settings</DropdownLabel>
            </DropdownItem>
            <DropdownDivider />
            <DropdownItem href="/privacy-policy">
              <ShieldCheckIcon />
              <DropdownLabel>Privacy policy</DropdownLabel>
            </DropdownItem>
            <DropdownItem href="/share-feedback">
              <LightBulbIcon />
              <DropdownLabel>Share feedback</DropdownLabel>
            </DropdownItem>
            <DropdownDivider />
            <DropdownItem href="/logout">
              <ArrowRightStartOnRectangleIcon />
              <DropdownLabel>Sign out</DropdownLabel>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </NavbarSection>
    </Navbar>
  }
>
  {/* The page content */}
</SidebarLayout>
```

--------------------------------

### Checkbox Group Example

Source: https://catalyst.tailwindui.com/docs/checkbox

Demonstrates a group of checkboxes with labels and descriptions within a fieldset. Use this for multiple related options where users can select one or more.

```javascript
import { Checkbox, CheckboxField, CheckboxGroup } from '@/components/checkbox'
import { Description, Fieldset, Label, Legend } from '@/components/fieldset'
import { Text } from '@/components/text'

function Example() {
  return (
    <Fieldset>
      <Legend>Discoverability</Legend>
      <Text>Decide where your events can be found across the web.</Text>
      <CheckboxGroup>
        <CheckboxField>
          <Checkbox name="discoverability" value="show_on_events_page" defaultChecked />
          <Label>Show on events page</Label>
          <Description>Make this event visible on your profile.</Description>
        </CheckboxField>
        <CheckboxField>
          <Checkbox name="discoverability" value="allow_embedding" />
          <Label>Allow embedding</Label>
          <Description>Allow others to embed your event details on their own site.</Description>
        </CheckboxField>
      </CheckboxGroup>
    </Fieldset>
  )
}

```

--------------------------------

### Listbox with Flags

Source: https://catalyst.tailwindui.com/docs/listbox

Shows how to include flag icons within Listbox options. This example uses a 'Flag' component and maps over a list of countries to populate the options.

```javascript
import { Field, Label } from '@/components/fieldset'
import { Listbox, ListboxLabel, ListboxOption } from '@/components/listbox'
import { Flag } from '@/flags'

function Example({ currentCountry, countries }) {
  return (
    <Field>
      <Label>Assigned to</Label>
      <Listbox name="user" defaultValue={currentCountry}>
        {countries.map((country) => (
          <ListboxOption value={country.code} key={country.code}>
            <Flag className="w-5 sm:w-4" code={country.code} />
            <ListboxLabel>{country.name}</ListboxLabel>
          </ListboxOption>
        ))}
      </Listbox>
    </Field>
  )
}

```

--------------------------------

### Textarea with Validation Errors

Source: https://catalyst.tailwindui.com/docs/textarea

Use the `invalid` prop on the `Field` component and render `ErrorMessage` to show validation errors. This example assumes an `errors` object with `has` and `get` methods.

```javascript
import { ErrorMessage, Field, Label } from '@/components/fieldset'
import { Textarea } from '@/components/textarea'

function Example({ errors }) {
  return (
    <Field>
      <Label>Description</Label>
      <Textarea name="description" invalid={errors.has('description')} />
      {errors.has('description') && <ErrorMessage>{errors.get('description')}</ErrorMessage>}
    </Field>
  )
}

```

--------------------------------

### Complete Navbar Example

Source: https://catalyst.tailwindui.com/docs/navbar

This snippet shows a full implementation of a responsive Navbar. It includes team selection dropdown, navigation links, search, inbox, and user profile dropdown. Ensure all necessary components and icons are imported.

```jsx
import { Avatar } from '@/components/avatar'
import {
  Dropdown,
  DropdownButton,
  DropdownDivider,
  DropdownItem,
  DropdownLabel,
  DropdownMenu,
} from '@/components/dropdown'
import { Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer } from '@/components/navbar'
import {
  ArrowRightStartOnRectangleIcon,
  ChevronDownIcon,
  Cog8ToothIcon,
  LightBulbIcon,
  PlusIcon,
  ShieldCheckIcon,
  UserIcon,
} from '@heroicons/react/16/solid'
import { InboxIcon, MagnifyingGlassIcon } from '@heroicons/react/20/solid'

function Example() {
  return (
    <Navbar>
      <Dropdown>
        <DropdownButton as={NavbarItem}>
          <Avatar src="/tailwind-logo.svg" />
          <NavbarLabel>Tailwind Labs</NavbarLabel>
          <ChevronDownIcon />
        </DropdownButton>
        <DropdownMenu className="min-w-64" anchor="bottom start">
          <DropdownItem href="/teams/1/settings">
            <Cog8ToothIcon />
            <DropdownLabel>Settings</DropdownLabel>
          </DropdownItem>
          <DropdownDivider />
          <DropdownItem href="/teams/1">
            <Avatar slot="icon" src="/tailwind-logo.svg" />
            <DropdownLabel>Tailwind Labs</DropdownLabel>
          </DropdownItem>
          <DropdownItem href="/teams/2">
            <Avatar slot="icon" initials="WC" className="bg-purple-500 text-white" />
            <DropdownLabel>Workcation</DropdownLabel>
          </DropdownItem>
          <DropdownDivider />
          <DropdownItem href="/teams/create">
            <PlusIcon />
            <DropdownLabel>New team&hellip;</DropdownLabel>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <NavbarDivider className="max-lg:hidden" />
      <NavbarSection className="max-lg:hidden">
        <NavbarItem href="/" current>
          Home
        </NavbarItem>
        <NavbarItem href="/events">Events</NavbarItem>
        <NavbarItem href="/orders">Orders</NavbarItem>
      </NavbarSection>
      <NavbarSpacer />
      <NavbarSection>
        <NavbarItem href="/search" aria-label="Search">
          <MagnifyingGlassIcon />
        </NavbarItem>
        <NavbarItem href="/inbox" aria-label="Inbox">
          <InboxIcon />
        </NavbarItem>
        <Dropdown>
          <DropdownButton as={NavbarItem}>
            <Avatar src="/profile-photo.jpg" square />
          </DropdownButton>
          <DropdownMenu className="min-w-64" anchor="bottom end">
            <DropdownItem href="/my-profile">
              <UserIcon />
              <DropdownLabel>My profile</DropdownLabel>
            </DropdownItem>
            <DropdownItem href="/settings">
              <Cog8ToothIcon />
              <DropdownLabel>Settings</DropdownLabel>
            </DropdownItem>
            <DropdownDivider />
            <DropdownItem href="/privacy-policy">
              <ShieldCheckIcon />
              <DropdownLabel>Privacy policy</DropdownLabel>
            </DropdownItem>
            <DropdownItem href="/share-feedback">
              <LightBulbIcon />
              <DropdownLabel>Share feedback</DropdownLabel>
            </DropdownItem>
            <DropdownDivider />
            <DropdownItem href="/logout">
              <ArrowRightStartOnRectangleIcon />
              <DropdownLabel>Sign out</DropdownLabel>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </NavbarSection>
    </Navbar>
  )
}

```

--------------------------------

### Basic Pagination Example

Source: https://catalyst.tailwindui.com/docs/pagination

Demonstrates the basic structure of the Pagination component with previous and next links, numbered pages, and a gap for larger page ranges. Ensure all necessary components are imported from '@/components/pagination'.

```javascript
import {
  Pagination,
  PaginationGap,
  PaginationList,
  PaginationNext,
  PaginationPage,
  PaginationPrevious,
} from '@/components/pagination'

function Example() {
  return (
    <Pagination>
      <PaginationPrevious href="?page=2" />
      <PaginationList>
        <PaginationPage href="?page=1">1</PaginationPage>
        <PaginationPage href="?page=2">2</PaginationPage>
        <PaginationPage href="?page=3" current>
          3
        </PaginationPage>
        <PaginationPage href="?page=4">4</PaginationPage>
        <PaginationGap />
        <PaginationPage href="?page=65">65</PaginationPage>
        <PaginationPage href="?page=66">66</PaginationPage>
      </PaginationList>
      <PaginationNext href="?page=4" />
    </Pagination>
  )
}

```

--------------------------------

### Controlled Listbox Example

Source: https://catalyst.tailwindui.com/docs/listbox

Use the `value` and `onChange` props to manage the Listbox state as a controlled component. This example demonstrates setting the project status.

```javascript
import { Field, Label } from '@/components/fieldset'
import { Listbox, ListboxLabel, ListboxOption } from '@/components/listbox'
import { useState } from 'react'

function Example() {
  let [status, setStatus] = useState('active')

  return (
    <Field>
      <Label>Project status</Label>
      <Listbox name="status" value={status} onChange={setStatus}>
        <ListboxOption value="active">
          <ListboxLabel>Active</ListboxLabel>
        </ListboxOption>
        <ListboxOption value="paused">
          <ListboxLabel>Paused</ListboxLabel>
        </ListboxOption>
        <ListboxOption value="delayed">
          <ListboxLabel>Delayed</ListboxLabel>
        </ListboxOption>
        <ListboxOption value="canceled">
          <ListboxLabel>Canceled</ListboxLabel>
        </ListboxOption>
      </Listbox>
    </Field>
  )
}

```