### Toast Component Installation and Import (Bash/TSX)

Source: https://context7_llms

Provides instructions for installing the @lglab/compose-ui library using npm and demonstrates the basic import statement for the Toast component.

```bash
npm install @lglab/compose-ui
```

```tsx
import { Toast } from '@lglab/compose-ui'
```

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

### Compose UI Compact Table Example (React/TypeScript)

Source: https://context7_llms

Illustrates how to render a compact version of the Compose UI Table component. This example uses sample data and applies the 'compact' size prop to the TableRoot. Assumes the '@lglab/compose-ui/table' package is installed.

```tsx
import {
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRoot,
  TableRow,
} from '@lglab/compose-ui/table'

const data = [
  {
    name: 'Alice Johnson',
    email: 'alice@example.com',
    role: 'Admin',
    department: 'Engineering',
  },
  { name: 'Bob Smith', email: 'bob@example.com', role: 'User', department: 'Marketing' },
  {
    name: 'Charlie Brown',
    email: 'charlie@example.com',
    role: 'User',
    department: 'Sales',
  },
  {
    name: 'Diana Prince',
    email: 'diana@example.com',
    role: 'Editor',
    department: 'Design',
  },
]

export default function SizesExample() {
  return (
    <TableRoot size='compact'>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
          <TableHead>Department</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((row) => (
          <TableRow key={row.email}>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.email}</TableCell>
            <TableCell>{row.role}</TableCell>
            <TableCell>{row.department}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </TableRoot>
  )
}
```

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

### Skeleton Component: Installation and Import (Bash/TypeScript)

Source: https://context7_llms

Provides instructions for installing and importing the Skeleton component from the @lglab/compose-ui library. The installation is done via npm, and the import statement is shown for TypeScript usage.

```bash
npm install @lglab/compose-ui
```

```tsx
import { Skeleton } from '@lglab/compose-ui'
```

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

### Basic Compose UI Menu Example

Source: https://context7_llms

Demonstrates a basic implementation of the Compose UI Menu component. This example shows how to set up a trigger button and a popup menu with several options and a separator.

```tsx
import { Button } from '@lglab/compose-ui/button'
import {
  MenuArrow,
  MenuItem,
  MenuPopup,
  MenuPortal,
  MenuPositioner,
  MenuRoot,
  MenuSeparator,
  MenuTrigger,
} from '@lglab/compose-ui/menu'
import { MoreVertical } from 'lucide-react'

export default function DefaultExample() {
  const handleLogout = () => false

  return (
    <MenuRoot>
      <MenuTrigger
        render={(props) => (
          <Button {...props} variant='outline' size='icon'>
            <MoreVertical className='size-4' />
          </Button>
        )}
      />
      <MenuPortal>
        <MenuPositioner side='bottom'>
          <MenuPopup>
            <MenuArrow />
            <MenuItem>Profile</MenuItem>
            <MenuItem>Settings</MenuItem>
            <MenuSeparator />
            <MenuItem onClick={handleLogout}>Logout</MenuItem>
          </MenuPopup>
        </MenuPositioner>
      </MenuPortal>
    </MenuRoot>
  )
}
```

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

### Default Combobox Example in React

Source: https://context7_llms

Demonstrates a default implementation of the Combobox component using React and TypeScript. It includes basic setup, item rendering, and selection logic. Dependencies include 'lucide-react' for icons.

```tsx
import {
  ComboboxClear,
  ComboboxControl,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxItemText,
  ComboboxList,
  ComboboxPopup,
  ComboboxPortal,
  ComboboxPositioner,
  ComboboxRoot,
  ComboboxTrigger,
} from '@lglab/compose-ui/combobox'
import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
import { Check, ChevronDown, X } from 'lucide-react'

interface Fruit {
  label: string
  value: string
}

const fruits: Fruit[] = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
  { label: 'Pineapple', value: 'pineapple' },
  { label: 'Grape', value: 'grape' },
  { label: 'Mango', value: 'mango' },
  { label: 'Strawberry', value: 'strawberry' },
  { label: 'Blueberry', value: 'blueberry' },
  { label: 'Raspberry', value: 'raspberry' },
  { label: 'Blackberry', value: 'blackberry' },
  { label: 'Cherry', value: 'cherry' },
  { label: 'Peach', value: 'peach' },
  { label: 'Pear', value: 'pear' },
  { label: 'Plum', value: 'plum' },
  { label: 'Kiwi', value: 'kiwi' },
  { label: 'Watermelon', value: 'watermelon' },
  { label: 'Cantaloupe', value: 'cantaloupe' },
  { label: 'Honeydew', value: 'honeydew' },
  { label: 'Papaya', value: 'papaya' },
  { label: 'Guava', value: 'guava' },
  { label: 'Lychee', value: 'lychee' },
  { label: 'Pomegranate', value: 'pomegranate' },
  { label: 'Apricot', value: 'apricot' },
  { label: 'Grapefruit', value: 'grapefruit' },
  { label: 'Passionfruit', value: 'passionfruit' },
]

export default function DefaultExample() {
  return (
    <FieldRoot>
      <FieldLabel>Choose a fruit</FieldLabel>
      <ComboboxRoot items={fruits}>
        <ComboboxControl>
          <ComboboxInput placeholder='e.g. Apple' />
          <ComboboxClear aria-label='Clear selection'>
            <X className='size-4' />
          </ComboboxClear>
          <ComboboxTrigger aria-label='Open popup'>
            <ChevronDown className='size-4' />
          </ComboboxTrigger>
        </ComboboxControl>
        <ComboboxPortal>
          <ComboboxPositioner>
            <ComboboxPopup>
              <ComboboxEmpty>No fruits found.</ComboboxEmpty>
              <ComboboxList>
                {(item: Fruit) => (
                  <ComboboxItem key={item.value} value={item}>
                    <ComboboxItemText>{item.label}</ComboboxItemText>
                    <ComboboxItemIndicator>
                      <Check className='size-3.5' />
                    </ComboboxItemIndicator>
                  </ComboboxItem>
                )}
              </ComboboxList>
            </ComboboxPopup>
          </ComboboxPositioner>
        </ComboboxPortal>
      </ComboboxRoot>
    </FieldRoot>
  )
}
```

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

### Install Compose UI Package

Source: https://context7_llms

This command installs the Compose UI package using npm. It's a prerequisite for using any of the Compose UI components in your React project.

```bash
npm install @lglab/compose-ui
```

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

### Radio Group Installation and Import (Bash/TypeScript)

Source: https://context7_llms

Provides instructions for installing the Compose UI Radio Group component using npm and demonstrates the basic import statement. The installation requires the '@lglab/compose-ui' package.

```bash
npm install @lglab/compose-ui
```

```tsx
import { RadioGroupRoot } from '@lglab/compose-ui'

```

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

### Basic Popover Example (React)

Source: https://context7_llms

A fundamental example of implementing a Popover component using '@lglab/compose-ui/popover'. It includes a trigger button (Bell icon) and displays a title and description within the popover.

```tsx
import { Button } from '@lglab/compose-ui/button'
import {
  PopoverArrow,
  PopoverDescription,
  PopoverPopup,
  PopoverPortal,
  PopoverPositioner,
  PopoverRoot,
  PopoverTitle,
  PopoverTrigger,
} from '@lglab/compose-ui/popover'
import { Bell } from 'lucide-react'

export default function DefaultExample() {
  return (
    <PopoverRoot>
      <PopoverTrigger
        render={(props) => (
          <Button {...props} variant='outline' size='icon'>
            <Bell className='size-4' aria-label='Notifications' />
          </Button>
        )}
      />
      <PopoverPortal>
        <PopoverPositioner>
          <PopoverPopup className='space-y-0.5'>
            <PopoverArrow />
            <PopoverTitle>Notifications</PopoverTitle>
            <PopoverDescription>You are all caught up. Good job!</PopoverDescription>
          </PopoverPopup>
        </PopoverPositioner>
      </PopoverPortal>
    </PopoverRoot>
  )
}
```

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

### Basic Vertical Card Example using Compose UI

Source: https://context7_llms

Demonstrates a basic vertical card layout with an image, title, description, and action buttons. It uses various Card components from @lglab/compose-ui/card and a Button component from @lglab/compose-ui/button. Requires installation of @lglab/compose-ui.

```tsx
import { Button } from '@lglab/compose-ui/button'
import {
  CardDescription,
  CardFooter,
  CardHeader,
  CardMedia,
  CardRoot,
  CardTitle,
} from '@lglab/compose-ui/card'

export default function VerticalMediaCard() {
  return (
    <CardRoot className='w-80 max-w-full'>
      <CardMedia className='aspect-video rounded-t-lg'>
        <img
          src='https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80'
          alt='Product displayed on a desk with notebook and fruit'
        />
      </CardMedia>
      <CardHeader>
        <CardTitle>Product Name</CardTitle>
        <CardDescription>This is a description of the product.</CardDescription>
      </CardHeader>
      <CardFooter className='justify-end gap-2'>
        <Button size='sm' variant='outline'>
          Details
        </Button>
        <Button size='sm'>Add to Cart</Button>
      </CardFooter>
    </CardRoot>
  )
}
```

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

### Compose Button Group Examples using React

Source: https://context7_llms

Demonstrates how to group multiple Button components using the GroupRoot from @lglab/compose-ui/group. Examples include buttons with icons and text, and buttons with only icons.

```tsx
import { Button } from '@lglab/compose-ui/button'
import { GroupRoot } from '@lglab/compose-ui/group'
import { Bookmark, Copy, Share } from 'lucide-react'

export default function ButtonGroupExample() {
  return (
    <div className='flex flex-col items-center gap-4'>
      <GroupRoot>
        <Button variant='outline'>
          <Copy />
          Copy
        </Button>
        <Button variant='outline'>
          <Share />
          Share
        </Button>
        <Button variant='outline'>
          <Bookmark />
          Bookmark
        </Button>
      </GroupRoot>
      <GroupRoot>
        <Button variant='outline'>Copy</Button>
        <Button variant='outline'>Share</Button>
        <Button variant='outline'>Bookmark</Button>
      </GroupRoot>
      <GroupRoot>
        <Button variant='outline' size='icon'>
          <Copy />
        </Button>
        <Button variant='outline' size='icon'>
          <Share />
        </Button>
        <Button variant='outline' size='icon'>
          <Bookmark />
        </Button>
      </GroupRoot>
    </div>
  )
}
```

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

### Compose Dialog: Basic Example

Source: https://context7_llms

Provides a basic implementation of the Dialog component from '@lglab/compose-ui/dialog'. This example shows a simple dialog with a title, description, and a close button, suitable for simple confirmations or alerts.

```tsx
import {
  DialogBackdrop,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@lglab/compose-ui/dialog'

export default function BasicExample() {
  return (
    <DialogRoot>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogPortal>
        <DialogBackdrop />
        <DialogPopup>
          <DialogHeader>
            <DialogTitle>Notifications</DialogTitle>
            <DialogDescription>You are all caught up. Good job!</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose>Close</DialogClose>
          </DialogFooter>
        </DialogPopup>
      </DialogPortal>
    </DialogRoot>
  )
}
```

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

### Collapsible Component Basic Example in React

Source: https://context7_llms

This example demonstrates the basic usage of the Collapsible component, allowing content to be expanded or collapsed. It utilizes CollapsibleRoot, CollapsibleTrigger, and CollapsiblePanel components. Dependencies include @lglab/compose-ui/collapsible, @lglab/compose-ui/button, and lucide-react for icons.

```tsx
import { Button } from '@lglab/compose-ui/button'
import {
  CollapsiblePanel,
  CollapsibleRoot,
  CollapsibleTrigger,
} from '@lglab/compose-ui/collapsible'
import {ChevronDown} from 'lucide-react'

export default function DefaultExample() {
  return (
    <CollapsibleRoot className='group w-full max-w-md'>
      <CollapsibleTrigger
        render={(props) => (
          <Button {...props} variant='outline' className='w-full justify-between'>
            <span>What is Compose UI?</span>
            <ChevronDown className='size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-open:rotate-180' />
          </Button>
        )} />
      <CollapsiblePanel>
        <div className='p-2 text-sm'>
          <p>
            Compose UI is a collection of accessible React components built with Base UI
            and Tailwind CSS, ready to use in your design systems and web apps.
          </p>
        </div>
      </CollapsiblePanel>
    </CollapsibleRoot>
  )
}
```

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

### Compose UI Bar Chart Example

Source: https://context7_llms

Provides a complete example of a Bar Chart using Compose UI's chart components and Recharts. It includes data, configuration for tooltips and legends, and the BarChart structure.

```tsx
import {
  type ChartConfig,
  ChartLegendContent,
  ChartRoot,
  ChartTooltipContent,
} from '@lglab/compose-ui/chart'
import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis } from 'recharts'

const data = [
  { month: 'Jan', desktop: 186, mobile: 80 },
  { month: 'Feb', desktop: 305, mobile: 200 },
  { month: 'Mar', desktop: 237, mobile: 120 },
  { month: 'Apr', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'Jun', desktop: 214, mobile: 140 },
]

const config: ChartConfig = {
  desktop: { label: 'Desktop', color: 'var(--color-teal-600)' },
  mobile: { label: 'Mobile', color: 'var(--color-amber-600)' },
}

export default function BarChartExample() {
  return (
    <ChartRoot config={config} className='h-[250px] w-full pt-4'>
      <BarChart data={data} accessibilityLayer>
        <CartesianGrid vertical={false} />
        <XAxis dataKey='month' interval='preserveStartEnd' />
        <Tooltip content={<ChartTooltipContent />} />
        <Legend content={<ChartLegendContent />} />
        <Bar dataKey='desktop' fill='var(--color-desktop)' radius={[4, 4, 0, 0]} />
        <Bar dataKey='mobile' fill='var(--color-mobile)' radius={[4, 4, 0, 0]} />
      </BarChart>
    </ChartRoot>
  )
}

```

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

### React Navigation Menu with Compose UI

Source: https://context7_llms

This snippet demonstrates how to build a complex navigation menu in React using the @lglab/compose-ui/navigation-menu library. It includes top-level links, dropdown menus for 'Getting Started' and 'Components', and a nested menu for 'More Components'. The example utilizes Next.js Link component for routing and lucide-react icons for visual cues. It's designed for creating organized and accessible navigation interfaces.

```tsx
import {
  NavigationMenuArrow,
  NavigationMenuContent,
  NavigationMenuIcon,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuPopup,
  NavigationMenuPortal,
  NavigationMenuPositioner,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from '@lglab/compose-ui/navigation-menu'
import { ChevronDown, ChevronRight } from 'lucide-react'
import Link from 'next/link'

const gettingStartedLinks = [
  {
    href: '/overview/quick-start',
    title: 'Quick Start',
    description: 'Get started with Compose UI in your React project.',
  },
  {
    href: '/overview/composition',
    title: 'Composition',
    description: 'Learn about composable components and architecture.',
  },
  {
    href: '/overview/accessibility',
    title: 'Accessibility',
    description: 'Built-in ARIA, keyboard navigation, and focus management.',
  },
  {
    href: '/overview/theming',
    title: 'Theming',
    description: 'Customize colors, typography, and dark mode.',
  },
]

const componentsLinks = [
  { href: '/components/button', title: 'Button' },
  { href: '/components/card', title: 'Card' },
  { href: '/components/dialog', title: 'Dialog' },
  { href: '/components/menu', title: 'Menu' },
  { href: '/components/navigation-menu', title: 'Navigation Menu' },
]

const moreComponentsLinks = [
  { href: '/components/accordion', title: 'Accordion' },
  { href: '/components/tabs', title: 'Tabs' },
  { href: '/components/tooltip', title: 'Tooltip' },
  { href: '/components/popover', title: 'Popover' },
]

export default function NavigationMenuExample() {
  return (
    <NavigationMenuRoot>
      <NavigationMenuList className='flex-col sm:flex-row'>
        <NavigationMenuItem value='home'>
          <NavigationMenuLink render={<Link href='/overview/quick-start' />}>
            Home
          </NavigationMenuLink>
        </NavigationMenuItem>

        <NavigationMenuItem value='getting-started'>
          <NavigationMenuTrigger>
            Getting Started
            <NavigationMenuIcon>
              <ChevronDown className='size-4' />
            </NavigationMenuIcon>
          </NavigationMenuTrigger>
          <NavigationMenuContent className='max-w-[500px]'>
            <ul className='grid gap-1 md:grid-cols-2'>
              {gettingStartedLinks.map((link) => (
                <li key={link.href}>
                  <NavigationMenuLink
                    render={<Link href={link.href} />}
                    className='flex flex-col'
                  >
                    <div className='font-medium'>{link.title}</div>
                    <p className='text-sm text-muted-foreground'>{link.description}</p>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem value='components'>
          <NavigationMenuTrigger>
            Components
            <NavigationMenuIcon>
              <ChevronDown className='size-4' />
            </NavigationMenuIcon>
          </NavigationMenuTrigger>
          <NavigationMenuContent className='w-[220px]'>
            <ul className='grid'>
              {componentsLinks.map((link) => (
                <li key={link.href}>
                  <NavigationMenuLink render={<Link href={link.href} />}>
                    {link.title}
                  </NavigationMenuLink>
                </li>
              ))}
              <li>
                <NavigationMenuRoot orientation='vertical' className='w-full'>
                  <NavigationMenuList className='flex-col items-stretch'>
                    <NavigationMenuItem value='more-components'>
                      <NavigationMenuTrigger className='w-full justify-between'>
                        More Components
                        <NavigationMenuIcon>
                          <ChevronRight className='size-4' />
                        </NavigationMenuIcon>
                      </NavigationMenuTrigger>
                      <NavigationMenuContent className='w-[200px]'>
                        <ul className='grid'>
                          {moreComponentsLinks.map((link) => (
                            <li key={link.href}>
                              <NavigationMenuLink render={<Link href={link.href} />}>
                                {link.title}
                              </NavigationMenuLink>
                            </li>
                          ))}
                        </ul>
                      </NavigationMenuContent>
                    </NavigationMenuItem>
                  </NavigationMenuList>

                  <NavigationMenuPortal>
                    <NavigationMenuPositioner side='right' align='start'>
                      <NavigationMenuPopup>
                        <NavigationMenuViewport />
                      </NavigationMenuPopup>
                    </NavigationMenuPositioner>
                  </NavigationMenuPortal>
                </NavigationMenuRoot>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenuRoot>
  )
}
```

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

### Basic Preview Card Example

Source: https://context7_llms

Demonstrates a basic Preview Card that appears when hovering over a link. It displays contextual information, including an image and a short description.

```tsx
import {
  PreviewCardArrow,
  PreviewCardPopup,
  PreviewCardPortal,
  PreviewCardPositioner,
  PreviewCardRoot,
  PreviewCardTrigger,
} from '@lglab/compose-ui/preview-card'

export default function DefaultExample() {
  return (
    <p className='text-sm'>
      The{' '}
      <PreviewCardRoot>
        <PreviewCardTrigger href='https://en.wikipedia.org/wiki/Nile'>
          Nile
        </PreviewCardTrigger>
        <PreviewCardPortal>
          <PreviewCardPositioner>
            <PreviewCardPopup className='space-y-2'>
              <PreviewCardArrow />
              <img
                src='https://images.unsplash.com/photo-1680356217112-dad9300ce49d?q=80&w=448&h=300'
                alt='Satellite image of the Nile'
                className='w-full rounded'
              />
              <p className='text-sm'>
                The Nile is a major north-flowing river in northeastern Africa. It is the
                longest river in Africa and is among the longest in the world.
              </p>
            </PreviewCardPopup>
          </PreviewCardPositioner>
        </PreviewCardPortal>
      </PreviewCardRoot>{' '}
      is the longest river in Africa.
    </p>
  )
}
```

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

### Compose UI Vertical Group Layout in React

Source: https://context7_llms

Shows how to arrange components vertically within a GroupRoot. This example uses buttons with icons and text, aligned to the start. Requires '@lglab/compose-ui/button' and '@lglab/compose-ui/group'.

```tsx
import { Button } from '@lglab/compose-ui/button'
import { GroupRoot } from '@lglab/compose-ui/group'
import { LogOut, Settings, Trash, UserPen } from 'lucide-react'

export default function VerticalExample() {
  return (
    <GroupRoot orientation='vertical'>
      <Button variant='outline' className='justify-start'>
        <UserPen />
        Profile
      </Button>
      <Button variant='outline' className='justify-start'>
        <Settings />
        Settings
      </Button>
      <Button variant='outline' className='justify-start'>
        <LogOut />
        Logout
      </Button>
      <Button variant='outline' className='justify-start text-destructive'>
        <Trash />
        Delete
      </Button>
    </GroupRoot>
  )
}
```

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

### Basic Compose UI Drawer Example

Source: https://context7_llms

Demonstrates the basic implementation of the Drawer component. It includes a trigger to open the drawer and the essential elements for its structure, such as backdrop, popup, header, content, and footer.

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from '@lglab/compose-ui/drawer'

export default function BasicExample() {
  return (
    <DrawerRoot>
      <DrawerTrigger>Open Drawer</DrawerTrigger>
      <DrawerPortal>
        <DrawerBackdrop />
        <DrawerPopup>
          <DrawerHeader>
            <DrawerTitle>Drawer</DrawerTitle>
            <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
          </DrawerHeader>
          <DrawerContent>
            <p>
              Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit. Nulla
              bibendum est aliquam mauris laoreet interdum.
            </p>
          </DrawerContent>
          <DrawerFooter className='flex justify-end'>
            <DrawerClose>Close</DrawerClose>
          </DrawerFooter>
        </DrawerPopup>
      </DrawerPortal>
    </DrawerRoot>
  )
}
```

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

### Basic Compose UI Alert Dialog Example

Source: https://context7_llms

Demonstrates a basic implementation of the AlertDialog component. It includes the necessary imports for various AlertDialog sub-components and shows how to structure the dialog with a trigger, backdrop, popup, title, description, and action buttons.

```tsx
import {
  AlertDialogBackdrop,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogPopup,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@lglab/compose-ui/alert-dialog'

export default function BasicExample() {
  return (
    <AlertDialogRoot>
      <AlertDialogTrigger variant='destructive'>Discard draft</AlertDialogTrigger>
      <AlertDialogPortal>
        <AlertDialogBackdrop />
        <AlertDialogPopup>
          <AlertDialogTitle>Discard draft?</AlertDialogTitle>
          <AlertDialogDescription>
            You can&apos;t undo this action.
          </AlertDialogDescription>
          <div className='mt-6 flex justify-end gap-2'>
            <AlertDialogClose>Cancel</AlertDialogClose>
            <AlertDialogClose variant='destructive'>Discard</AlertDialogClose>
          </div>
        </AlertDialogPopup>
      </AlertDialogPortal>
    </AlertDialogRoot>
  )
}
```

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

### Horizontal Layout Card Example using Compose UI

Source: https://context7_llms

Illustrates a card component arranged in a horizontal layout, featuring an image on the left and content on the right. It utilizes Card components from @lglab/compose-ui/card and Button components from @lglab/compose-ui/button. Requires installation of @lglab/compose-ui.

```tsx
import { Button } from '@lglab/compose-ui/button'
import {
  CardDescription,
  CardFooter,
  CardHeader,
  CardMedia,
  CardRoot,
  CardTitle,
} from '@lglab/compose-ui/card'

export default function HorizontalLayoutCard() {
  return (
    <CardRoot className='w-fit flex flex-row'>
      <CardMedia className='w-30 rounded-l-lg'>
        <img
          src='https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80'
          alt='Grid of user avatars'
          className='aspect-square'
        />
      </CardMedia>
      <div className='flex flex-1 flex-col'>
        <CardHeader>
          <CardTitle>User Profile</CardTitle>
          <CardDescription>
            Member since 2024. Active contributor to the community.
          </CardDescription>
        </CardHeader>
        <CardFooter className='gap-2'>
          <Button size='sm'>Follow</Button>
          <Button size='sm' variant='outline'>
            Message
          </Button>
        </CardFooter>
      </div>
    </CardRoot>
  )
}
```

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

### Manage Compose UI Tooltips with Provider

Source: https://context7_llms

This example illustrates the use of `TooltipProvider` to globally configure tooltip behavior, such as default `delay` and `closeDelay`. It wraps multiple tooltips, ensuring consistent behavior across them without individual configuration.

```tsx
import { Button } from '@lglab/compose-ui/button'
import {
  TooltipArrow,
  TooltipPopup,
  TooltipPortal,
  TooltipPositioner,
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
} from '@lglab/compose-ui/tooltip'
import { Bold, Italic, Underline } from 'lucide-react'

export default function ProviderExample() {
  return (
    <TooltipProvider delay={200} closeDelay={0}>
      <div className='flex items-center gap-1'>
        <TooltipRoot>
          <TooltipTrigger
            render={(props) => (
              <Button {...props} variant='outline' size='icon'>
                <Bold className='size-4' />
                <span className='sr-only'>Bold</span>
              </Button>
            )} />
          <TooltipPortal>
            <TooltipPositioner>
              <TooltipPopup>
                <TooltipArrow />
                Bold
              </TooltipPopup>
            </TooltipPositioner>
          </TooltipPortal>
        </TooltipRoot>

        <TooltipRoot>
          <TooltipTrigger
            render={(props) => (
              <Button {...props} variant='outline' size='icon'>
                <Italic className='size-4' />
                <span className='sr-only'>Italic</span>
              </Button>
            )} />
          <TooltipPortal>
            <TooltipPositioner>
              <TooltipPopup>
                <TooltipArrow />
                Italic
              </TooltipPopup>
            </TooltipPositioner>
          </TooltipPortal>
        </TooltipRoot>

        <TooltipRoot>
          <TooltipTrigger
            render={(props) => (
              <Button {...props} variant='outline' size='icon'>
                <Underline className='size-4' />
                <span className='sr-only'>Underline</span>
              </Button>
            )} />
          <TooltipPortal>
            <TooltipPositioner>
              <TooltipPopup>
                <TooltipArrow />
                Underline
              </TooltipPopup>
            </TooltipPositioner>
          </TooltipPortal>
        </TooltipRoot>
      </div>
    </TooltipProvider>
  )
}
```

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

### Default Pagination Example with Compose UI

Source: https://context7_llms

Provides a complete example of a default pagination component using '@lglab/compose-ui'. It utilizes the `usePagination` hook to manage state and renders pagination controls including previous, next, page numbers, and ellipsis. Dependencies include `lucide-react` for icons and `useState` from React.

```tsx
import {
  PaginationButton,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationNext,
  PaginationPrevious,
  PaginationRoot,
  usePagination,
} from '@lglab/compose-ui/pagination'
import { ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react'
import { useState } from 'react'

export default function DefaultExample() {
  const [currentPage, setCurrentPage] = useState(1)
  const totalPages = 5

  const { pages, canGoPrevious, canGoNext, goToPrevious, goToNext, goToPage } = 
    usePagination({
      currentPage,
      totalPages,
      onPageChange: setCurrentPage,
    })

  return (
    <PaginationRoot className='mx-auto'>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious onClick={goToPrevious} disabled={!canGoPrevious}>
            <ChevronLeft className='size-4' />
          </PaginationPrevious>
        </PaginationItem>

        {pages.map((page, i) => (
          <PaginationItem key={i}>
            {page === 'ellipsis' ? (
              <PaginationEllipsis>
                <Ellipsis className='size-4' />
              </PaginationEllipsis>
            ) : (
              <PaginationButton
                isActive={page === currentPage}
                onClick={() => goToPage(page)}>
                {page}
              </PaginationButton>
            )}
          </PaginationItem>
        ))}

        <PaginationItem>
          <PaginationNext onClick={goToNext} disabled={!canGoNext}>
            <ChevronRight className='size-4' />
          </PaginationNext>
        </PaginationItem>
      </PaginationContent>
    </PaginationRoot>
  )
}
```

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

### Basic Compose UI Menubar Example (TypeScript)

Source: https://context7_llms

Demonstrates a basic implementation of the Compose UI Menubar component in TypeScript. It showcases how to structure a menubar with 'File', 'Edit', and 'View' menus, each containing several menu items and separators.

```tsx
import {
  MenubarItem,
  MenubarMenu,
  MenubarPopup,
  MenubarPortal,
  MenubarPositioner,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from '@lglab/compose-ui/menubar'

export default function DefaultExample() {
  return (
    <MenubarRoot>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarPortal>
          <MenubarPositioner>
            <MenubarPopup>
              <MenubarItem>New</MenubarItem>
              <MenubarItem>Open</MenubarItem>
              <MenubarItem>Save</MenubarItem>
              <MenubarSeparator />
              <MenubarItem>Print</MenubarItem>
            </MenubarPopup>
          </MenubarPositioner>
        </MenubarPortal>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarPortal>
          <MenubarPositioner>
            <MenubarPopup>
              <MenubarItem>Undo</MenubarItem>
              <MenubarItem>Redo</MenubarItem>
              <MenubarSeparator />
              <MenubarItem>Cut</MenubarItem>
              <MenubarItem>Copy</MenubarItem>
              <MenubarItem>Paste</MenubarItem>
            </MenubarPopup>
          </MenubarPositioner>
        </MenubarPortal>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarPortal>
          <MenubarPositioner>
            <MenubarPopup>
              <MenubarItem>Zoom In</MenubarItem>
              <MenubarItem>Zoom Out</MenubarItem>
              <MenubarSeparator />
              <MenubarItem>Full Screen</MenubarItem>
            </MenubarPopup>
          </MenubarPositioner>
        </MenubarPortal>
      </MenubarMenu>
    </MenubarRoot>
  )
}
```

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

### Compose UI Input Group Examples in React

Source: https://context7_llms

Demonstrates how to use the GroupRoot and GroupAddon components with Input components to create various styled input fields. Supports icons, text prefixes/suffixes, and different input types. Requires '@lglab/compose-ui/group', '@lglab/compose-ui/input', and 'lucide-react' for icons.

```tsx
import { GroupAddon, GroupRoot } from '@lglab/compose-ui/group'
import { Input } from '@lglab/compose-ui/input'
import { MailIcon, SearchIcon } from 'lucide-react'

export default function InputGroupExample() {
  return (
    <div className='space-y-4'>
      <div>
        <label className='text-sm font-medium mb-2 block'>Search Input</label>
        <GroupRoot>
          <GroupAddon size='icon'>
            <SearchIcon />
          </GroupAddon>
          <Input placeholder='Search...' />
        </GroupRoot>
      </div>

      <div>
        <label className='text-sm font-medium mb-2 block'>Email Input</label>
        <GroupRoot>
          <GroupAddon size='icon'>
            <MailIcon />
          </GroupAddon>
          <Input type='email' placeholder='you@example.com' />
        </GroupRoot>
      </div>

      <div>
        <label className='text-sm font-medium mb-2 block'>Username Input</label>
        <GroupRoot>
          <GroupAddon size='icon'>@</GroupAddon>
          <Input placeholder='username' />
        </GroupRoot>
      </div>

      <div>
        <label className='text-sm font-medium mb-2 block'>URL Input</label>
        <GroupRoot>
          <GroupAddon>https://</GroupAddon>
          <Input placeholder='example.com' />
        </GroupRoot>
      </div>

      <div>
        <label className='text-sm font-medium mb-2 block'>Currency Input</label>
        <GroupRoot>
          <GroupAddon size='icon'>$</GroupAddon>
          <Input type='number' placeholder='100' className='w-32' />
          <GroupAddon>USD</GroupAddon>
        </GroupRoot>
      </div>
    </div>
  )
}
```

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

### Default Checkbox Group Example in React

Source: https://context7_llms

A React example showcasing the default usage of the CheckboxGroupRoot component from '@lglab/compose-ui/checkbox-group'. It includes CheckboxRoot and CheckboxIndicator components, along with 'lucide-react' for the checkmark icon. This example manages the state of selected checkboxes.

```tsx
import { CheckboxIndicator, CheckboxRoot } from '@lglab/compose-ui/checkbox'
import { CheckboxGroupRoot } from '@lglab/compose-ui/checkbox-group'
import { Check } from 'lucide-react'
import * as React from 'react'

const apples = [
  { value: 'fuji', label: 'Fuji' },
  { value: 'gala', label: 'Gala' },
  { value: 'granny-smith', label: 'Granny Smith' },
]

export default function DefaultExample() {
  const id = React.useId()
  const [value, setValue] = React.useState<string[]>(['fuji'])

  return (
    <CheckboxGroupRoot aria-labelledby={id} value={value} onValueChange={setValue}>
      <div className='text-sm font-medium text-foreground' id={id}>
        Favorite apples
      </div>

      {apples.map((apple) => (
        <label key={apple.value} className='flex items-center gap-2 text-sm'>
          <CheckboxRoot name='apple' value={apple.value}>
            <CheckboxIndicator>
              <Check className='size-3.5' />
            </CheckboxIndicator>
          </CheckboxRoot>
          {apple.label}
        </label>
      ))}
    </CheckboxGroupRoot>
  )
}
```

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

### Basic Progress Bar Example

Source: https://context7_llms

Demonstrates a basic implementation of a progress bar. It includes a label, value, track, and indicator, with a dynamic update of the progress value over time.

```tsx
import {
  ProgressIndicator,
  ProgressLabel,
  ProgressRoot,
  ProgressTrack,
  ProgressValue,
} from '@lglab/compose-ui/progress'
import * as React from 'react'

export default function BasicExample() {
  const [value, setValue] = React.useState(20)

  React.useEffect(() => {
    const interval = setInterval(() => {
      setValue((current) => Math.min(100, Math.round(current + Math.random() * 25)))
    }, 1000)
    return () => clearInterval(interval)
  }, [])

  return (
    <ProgressRoot className='w-full max-w-md mx-auto text-sm font-medium ' value={value}>
      <div className='flex items-center justify-between mb-2'>
        <ProgressLabel>
          {value < 100 ? 'Uploading file...' : 'File uploaded'}
        </ProgressLabel>
        <ProgressValue />
      </div>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </ProgressRoot>
  )
}
```

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

### Basic Compose UI Table Example

Source: https://context7_llms

Demonstrates a basic implementation of the Compose UI Table component. It includes importing necessary components like Badge, TableRoot, TableHeader, TableBody, etc., and renders a list of invoices with status badges. The example utilizes React's JSX syntax and assumes data is provided in a predefined format.

```tsx
import { Badge, BadgeVariant } from '@lglab/compose-ui/badge'
import {
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRoot,
  TableRow,
} from '@lglab/compose-ui/table'

const invoices = [
  { id: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
  { id: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
  { id: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
  { id: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
  { id: 'INV005', status: 'Paid', method: 'PayPal', amount: '$550.00' },
]

const statusVariants: Record<string, BadgeVariant> = {
  Paid: 'success',
  Pending: 'warning',
  Unpaid: 'destructive',
}

export default function BasicExample() {
  return (
    <TableRoot>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead>Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.id}>
            <TableCell className='font-medium'>{invoice.id}</TableCell>
            <TableCell>
              <Badge
                variant={statusVariants[invoice.status]}
                appearance='outline'
                size='sm'
              >
                {invoice.status}
              </Badge>
            </TableCell>
            <TableCell>{invoice.method}</TableCell>
            <TableCell>{invoice.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </TableRoot>
  )
}
```

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

### Popover Open on Hover Example (React)

Source: https://context7_llms

This example demonstrates how to configure a Popover to open when the trigger element is hovered over. It utilizes the 'openOnHover' and 'delay' props for controlled behavior.

```tsx
import { Button } from '@lglab/compose-ui/button'
import {
  PopoverArrow,
  PopoverDescription,
  PopoverPopup,
  PopoverPortal,
  PopoverPositioner,
  PopoverRoot,
  PopoverTitle,
  PopoverTrigger,
} from '@lglab/compose-ui/popover'
import { Bell } from 'lucide-react'

export default function OpenOnHoverExample() {
  return (
    <PopoverRoot>
      <PopoverTrigger
        openOnHover
        delay={300}
        render={(props) => (
          <Button {...props} variant='outline' size='icon'>
            <Bell className='size-4' aria-label='Notifications' />
          </Button>
        )}
      />
      <PopoverPortal>
        <PopoverPositioner>
          <PopoverPopup className='space-y-0.5'>
            <PopoverArrow />
            <PopoverTitle>Notifications</PopoverTitle>
            <PopoverDescription>
              Hover over the bell icon to see this popover. It opens after a 300ms delay.
            </PopoverDescription>
          </PopoverPopup>
        </PopoverPositioner>
      </PopoverPortal>
    </PopoverRoot>
  )
}
```