Olyx

https://olyxui.com/docs
Admin
Olyx is a modern, accessible React component library built on Base UI, offering a collection of...
Tokens:49,234
Snippets:667
Trust Score:3.2
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Tooltip Component

Source: https://olyxui.com/docs/components/tooltip

Install the Tooltip component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add tooltip
```

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

### Install Select Component

Source: https://olyxui.com/docs/components/select

Install the Select component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add select
```

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

### Install Switch Component

Source: https://olyxui.com/docs/components/switch

Install the Switch component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add switch
```

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

### Install Pagination Component

Source: https://olyxui.com/docs/components/pagination

Install the pagination component using pnpm.

```bash
pnpm dlx @olyx/cli@latest add pagination
```

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

### Install Input Component

Source: https://olyxui.com/docs/components/input

Install the Input component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add input
```

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

### Install Skeleton Component

Source: https://olyxui.com/docs/components/skeleton

Install the Skeleton component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add skeleton
```

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

### Install Banner Component

Source: https://olyxui.com/docs/components/banner

Install the Banner component using pnpm.

```bash
pnpm dlx @olyx/cli@latest add banner
```

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

### Install Toolbar Component

Source: https://olyxui.com/docs/components/toolbar

Install the Toolbar component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add toolbar
```

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

### Install Progress Component

Source: https://olyxui.com/docs/components/progress

Install the Progress component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add progress
```

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

### Install Spinner Component

Source: https://olyxui.com/docs/components/spinner

Install the Spinner component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add spinner
```

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

### Install Drawer Component

Source: https://olyxui.com/docs/components/drawer

Install the Drawer component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add drawer
```

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

### Install Alert CLI

Source: https://olyxui.com/docs/components/alert

Install the Alert component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add alert
```

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

### Install Dropdown Menu CLI

Source: https://olyxui.com/docs/components/dropdown-menu

Install the dropdown-menu component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add dropdown-menu
```

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

### Install Preview Card CLI

Source: https://olyxui.com/docs/components/preview-card

Install the Preview Card component using the pnpm package manager.

```bash
pnpm dlx @olyx/cli@latest add preview-card
```

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

### Install Popover Component

Source: https://olyxui.com/docs/components/popover

Install the Popover component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add popover
```

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

### Install Navigation Menu

Source: https://olyxui.com/docs/components/navigation-menu

Install the Navigation Menu component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add navigation-menu
```

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

### Install Combobox Component

Source: https://olyxui.com/docs/components/combobox

Install the Combobox component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add combobox
```

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

### Install Separator Component

Source: https://olyxui.com/docs/components/separator

Install the Separator component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add separator
```

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

### Install Badge Component

Source: https://olyxui.com/docs/components/badge

Install the Badge component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add badge
```

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

### Install Sheet Component

Source: https://olyxui.com/docs/components/sheet

Install the Sheet component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add sheet
```

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

### Install Menu Bar CLI

Source: https://olyxui.com/docs/components/menu-bar

Install the Menu Bar CLI using pnpm. This is the first step to using the component.

```bash
pnpm dlx @olyx/cli@latest add menu-bar
```

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

### Install All Olyx UI Components with CLI

Source: https://olyxui.com/docs/get-started

Use this command to install all available Olyx primitive components at once. This includes over 50 components like buttons, dialogs, tabs, and selects.

```bash
pnpm dlx @olyx/cli@latest add
```

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

### Install Button Component

Source: https://olyxui.com/docs/components/button

Install the Button component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add button
```

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

### Install Tabs Component

Source: https://olyxui.com/docs/components/tabs

Install the Tabs component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add tabs
```

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

### Install Toast CLI

Source: https://olyxui.com/docs/components/toast

Install the Toast CLI using pnpm to manage toast components.

```bash
pnpm dlx @olyx/cli@latest add toast
```

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

### Light Tooltip Example

Source: https://olyxui.com/docs/components/tooltip

Example of a Tooltip with a light variant.

```typescript
<Tooltip>
  <TooltipTrigger render={<Button variant="neutral" mode="stroke" />}>
    Hover me
  </TooltipTrigger>
  <TooltipContent variant="light">Helpful hint</TooltipContent>
</Tooltip>
```

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

### Install Slider Component

Source: https://olyxui.com/docs/components/slider

Install the Slider component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add slider
```

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

### Input Group with Start and End Affix

Source: https://olyxui.com/docs/components/input-group

An example of an Input Group that includes both a starting and an ending text affix.

```javascript
<InputWrapper>
  <InputAffix>https://</InputAffix>
  <Input placeholder="example" />
  <InputAffix>.com</InputAffix>
</InputWrapper>
```

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

### Install Context Menu

Source: https://olyxui.com/docs/components/context-menu

Install the Context Menu component using the pnpm package manager.

```bash
pnpm dlx @olyx/cli@latest add context-menu
```

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

### Install Dialog Component

Source: https://olyxui.com/docs/components/dialog

Install the Dialog component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add dialog
```

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

### Install Rating Bar

Source: https://olyxui.com/docs/components/rating-bar

Install the rating-bar component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add rating-bar
```

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

### Install Input Group

Source: https://olyxui.com/docs/components/input-group

Install the Input Group component using pnpm.

```bash
pnpm dlx @olyx/cli@latest add input-group
```

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

### Install Collapsible Component

Source: https://olyxui.com/docs/components/collapsible

Install the Collapsible component using the olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add collapsible
```

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

### Small Tooltip Example

Source: https://olyxui.com/docs/components/tooltip

Example of a Tooltip with a small size.

```typescript
<Tooltip>
  <TooltipTrigger render={<Button variant="neutral" mode="stroke" />}>
    Hover me
  </TooltipTrigger>
  <TooltipContent size="sm">Helpful hint</TooltipContent>
</Tooltip>
```

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

### Install Link Button with CLI

Source: https://olyxui.com/docs/components/link-button

Install the Link Button component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add link-button
```

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

### Install Avatar Component

Source: https://olyxui.com/docs/components/avatar

Install the Avatar component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add avatar
```

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

### Install Textarea Component

Source: https://olyxui.com/docs/components/textarea

Install the Textarea component using the pnpm package manager.

```bash
pnpm dlx @olyx/cli@latest add textarea
```

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

### Install Tag Component CLI

Source: https://olyxui.com/docs/components/tag

Install the Tag component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add tag
```

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

### Install Autocomplete CLI

Source: https://olyxui.com/docs/components/autocomplete

Installs the Autocomplete CLI tool globally. Use this command to add the Autocomplete component to your project.

```bash
pnpm dlx @olyx/cli@latest add autocomplete
```

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

### Install Field Component

Source: https://olyxui.com/docs/components/field

Install the Field component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add field
```

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

### Install Checkbox Component

Source: https://olyxui.com/docs/components/checkbox

Install the Checkbox component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add checkbox
```

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

### Install Command Palette CLI

Source: https://olyxui.com/docs/components/command

Installs the Command Palette CLI tool globally using pnpm.

```bash
pnpm dlx @olyx/cli@latest add command
```

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

### Install Status Badge via CLI

Source: https://olyxui.com/docs/components/status-badge

Install the Status Badge component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add status-badge
```

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

### Install Toggle Group

Source: https://olyxui.com/docs/components/toggle-group

Install the Toggle Group component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add toggle-group
```

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

### Install Rating Review Component

Source: https://olyxui.com/docs/components/rating-review

Install the Rating Review component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add rating-review
```

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

### Install Button Group Component

Source: https://olyxui.com/docs/components/button-group

Install the Button Group component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add button-group
```

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

### Install Kbd Component

Source: https://olyxui.com/docs/components/kbd

Use the Olyx CLI to add the Kbd component to your project. This command installs the latest version of the CLI and the kbd package.

```bash
pnpm dlx @olyx/cli@latest add kbd
```

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

### Install Radio Group Component

Source: https://olyxui.com/docs/components/radio

Install the Radio Group component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add radio
```

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

### Install Table Component CLI

Source: https://olyxui.com/docs/components/table

Install the Table component using the Olyx CLI. This command fetches the latest version of the CLI and adds the table component.

```bash
pnpm dlx @olyx/cli@latest add table
```

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

### Complete Form Example

Source: https://olyxui.com/docs/components/field

A comprehensive example of a form using various Field components, including input, select, textarea, and checkbox.

```jsx
<form>
  <Field>
    <FieldLabel>Full name</FieldLabel>
    <Input />
  </Field>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type="email" placeholder="you@example.com" />
    <FieldDescription>We'll send a confirmation email.</FieldDescription>
  </Field>
  <Field>
    <FieldLabel>Department</FieldLabel>
    <Select placeholder="Select department">
      <SelectItem value="eng">Engineering</SelectItem>
      <SelectItem value="mkt">Marketing</SelectItem>
    </Select>
  </Field>
  <Field>
    <FieldLabel>Bio</FieldLabel>
    <Textarea placeholder="Tell us about yourself..." />
  </Field>
  <Field>
    <Checkbox label="I accept the privacy policy" />
  </Field>
  <Button type="submit">Submit</Button>
</form>
```

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

### Add a Single UI Component

Source: https://olyxui.com/docs/handbook/cli

Use `olyx add` to install a specific component from the registry. The CLI ensures the project is initialized, fetches the registry, writes component files, and installs npm dependencies.

```bash
olyx add button
```

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

### Card Style Switch Example

Source: https://olyxui.com/docs/components/switch

Example of a Switch component styled within a card layout.

```typescript
<div className="flex items-center justify-between font-medium">
  Push Notifications
  <Switch aria-label="Enable push notifications" />
</div>
<p className="text-sm text-muted-foreground">Receive alerts for new messages and updates.</p>

```

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

### Install Toggle Component

Source: https://olyxui.com/docs/components/toggle

Install the Toggle component using the Olyx CLI. This command adds the necessary package to your project.

```bash
pnpm dlx @olyx/cli@latest add toggle
```

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

### Basic Context Menu Usage

Source: https://olyxui.com/docs/components/context-menu

A basic example of a Context Menu with trigger and content items.

```typescript
<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Cut</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

```

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

### Add Olyx Button Component with CLI

Source: https://olyxui.com/docs/get-started

This command installs the Olyx button component using the CLI. It automatically creates the necessary files and installs dependencies.

```bash
pnpm dlx @olyx/cli@latest add @olyx/button
```

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

### Install Checkbox Group CLI

Source: https://olyxui.com/docs/components/checkbox-group

Installs the Checkbox Group component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add checkbox-group
```

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

### Tooltip Positioning Example

Source: https://olyxui.com/docs/components/tooltip

Demonstrates different positioning options for the Tooltip.

```typescript
<Tooltip>
  <TooltipTrigger render={<Button variant="neutral" mode="stroke" />}>
    Top
  </TooltipTrigger>
  <TooltipContent side="top">Tooltip on top</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger render={<Button variant="neutral" mode="stroke" />}>
    Bottom
  </TooltipTrigger>
  <TooltipContent side="bottom">Tooltip on bottom</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger render={<Button variant="neutral" mode="stroke" />}>
    Left
  </TooltipTrigger>
  <TooltipContent side="left">Tooltip on left</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger render={<Button variant="neutral" mode="stroke" />}>
    Right
  </TooltipTrigger>
  <TooltipContent side="right">Tooltip on right</TooltipContent>
</Tooltip>
```

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

### Command Palette with Shortcuts

Source: https://olyxui.com/docs/components/command

Illustrates how to add keyboard shortcuts to command items for quick access. This example assumes a dialog context.

```jsx
<CommandDialog>
  <CommandDialogTrigger render={<Button mode="stroke" />}>
    Open Command Palette
  </CommandDialogTrigger>
  <CommandDialogContent>
    <Command items={items}>
      <CommandInput placeholder="Search..." />
      <CommandPanel>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandList>
          {(item) => (
            <CommandItem key={item.value} value={item}>
              {item.label}
              <CommandShortcut>⌘N</CommandShortcut>
            </CommandItem>
          )}
        </CommandList>
      </CommandPanel>
    </Command>
  </CommandDialogContent>
</CommandDialog>
```

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

### Install Number Field Component

Source: https://olyxui.com/docs/components/number-field

Install the Number Field component using the Olyx CLI.

```bash
pnpm dlx @olyx/cli@latest add number-field
```

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

### Initialize Olyx UI Project

Source: https://olyxui.com/docs/handbook/cli

Use `olyx init` to set up Olyx UI in the current folder. This command creates or confirms the component directory, writes `components.json`, installs base styles, and attempts to inject @import statements into your global CSS.

```bash
pnpm dlx @olyx/cli@latest init
```

```bash
olyx init
```

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

### Basic Popover Usage

Source: https://olyxui.com/docs/components/popover

A basic example of how to implement a Popover with a trigger and content.

```typescript
<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Popover Title</PopoverTitle>
      <PopoverDescription>Popover description text.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>
```

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

### Large Tooltip Example

Source: https://olyxui.com/docs/components/tooltip

Example of a Tooltip with a large size.

```typescript
<Tooltip>
  <TooltipTrigger render={<Button variant="neutral" mode="stroke" />}>
    Hover me
  </TooltipTrigger>
  <TooltipContent size="lg">Helpful hint</TooltipContent>
</Tooltip>
```

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

### Autocomplete with Start Addon

Source: https://olyxui.com/docs/components/autocomplete

Includes a start addon, such as an icon, at the beginning of the autocomplete input. This provides visual context or an interactive element before the input field.

```jsx
import { AlertTriangle } from "lucide-react"

<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." startAddon={<AlertTriangle size={16} />} />
  <AutocompletePopup>
    <AutocompleteList>
      {(item) => (
        <AutocompleteItem key={item.value} value={item}>
          {item.label}
        </AutocompleteItem>
      )}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>
```

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

### Install Accordion via CLI

Source: https://olyxui.com/docs/components/accordion

Use the Olyx CLI to add the accordion component to your project.

```bash
pnpm dlx @olyx/cli@latest add accordion
```

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

### Install Breadcrumb Component

Source: https://olyxui.com/docs/components/breadcrumb

Install the Breadcrumb component using the Olyx CLI. This command adds the necessary files to your project.

```bash
pnpm dlx @olyx/cli@latest add breadcrumb
```

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

### Open Top Drawer

Source: https://olyxui.com/docs/components/drawer

Example of a Drawer configured to open from the top.

```typescript
<Drawer direction="top">
  <DrawerTrigger>Open Top Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Top Drawer</DrawerTitle>
      <DrawerDescription>This drawer slides in from the top.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
      <Button>Save changes</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

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

### Basic Navigation Menu Structure

Source: https://olyxui.com/docs/components/navigation-menu

A basic example of a navigation menu with one item and a link.

```typescript
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>
        Item One
        <NavigationMenuIndicator />
      </NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="#">Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

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

### Basic Pagination Example

Source: https://olyxui.com/docs/components/pagination

A standard pagination component with previous, next, numbered links, and ellipsis.

```typescript
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

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

### Switch with Description

Source: https://olyxui.com/docs/components/switch

Example of a Switch component with a descriptive label and explanation.

```typescript
<div className="flex items-center space-x-2">
  <Switch id="airplane-mode" />
  <label htmlFor="airplane-mode" className="text-sm font-medium leading-none">
    Airplane Mode
  </label>
  <p className="text-sm text-muted-foreground">Disable all wireless connections.</p>
</div>

```

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

### Basic Tooltip Usage

Source: https://olyxui.com/docs/components/tooltip

A basic example of a Tooltip component with a trigger and content.

```typescript
<Tooltip>
  <TooltipTrigger render={<Button variant="neutral" mode="stroke" />}>
    Hover me
  </TooltipTrigger>
  <TooltipContent>Helpful hint</TooltipContent>
</Tooltip>
```

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

### Select Field Example

Source: https://olyxui.com/docs/components/field

Demonstrates a Field component with a Select element for choosing an option from a list.

```jsx
<Field>
  <FieldLabel>Role</FieldLabel>
  <Select placeholder="Select a role">
    <SelectItem value="admin">Admin</SelectItem>
    <SelectItem value="user">User</SelectItem>
  </Select>
</Field>
```

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

### Info Banner Example

Source: https://olyxui.com/docs/components/banner

Display an informational banner with important updates.

```typescript
<Banner status="info">
  <BannerContent>We've updated our privacy policy. Review changes here.</BannerContent>
</Banner>
```

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

### Disabled Switch Example

Source: https://olyxui.com/docs/components/switch

Demonstrates a disabled Switch component.

```typescript
<Switch disabled />

```

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

### CSS Class Approach: Library Component

Source: https://olyxui.com/docs/handbook/styling

Example of a component shipped by a library using CSS classes.

```html
<button class="btn btn-primary btn-filled btn-lg">Save</button>
```

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

### Success Banner Example

Source: https://olyxui.com/docs/components/banner

Display a success banner to confirm an action.

```typescript
<Banner status="success">
  <BannerContent>Your account has been successfully verified!</BannerContent>
</Banner>
```

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

### Open Left Side Drawer

Source: https://olyxui.com/docs/components/drawer

Example of a Drawer configured to open from the left side.

```typescript
<Drawer direction="left">
  <DrawerTrigger>Open Left Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Left Drawer</DrawerTitle>
      <DrawerDescription>This drawer slides in from the left.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
      <Button>Save changes</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

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

### Field with Description Example

Source: https://olyxui.com/docs/components/field

Demonstrates a Field component with a label and a descriptive text.

```jsx
<Field>
  <FieldLabel>Username</FieldLabel>
  <Input placeholder="your-username" />
  <FieldDescription>This will be your public display name.</FieldDescription>
</Field>
```

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

### Nested Dialog Example

Source: https://olyxui.com/docs/components/dialog

Illustrates how to implement nested Dialogs, where one Dialog can open another.

```typescript
<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Dialog>
        <DialogTrigger>Context Menu</DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Context Menu</DialogTitle>
          </DialogHeader>
          <DialogDescription>
            <p>Context menu options...</p>
          </DialogDescription>
          <DialogFooter>
            <DialogClose>
              <Button variant="outline">Close Context</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <DialogClose>
        <Button variant="outline">Close</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

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

### Install Alert Dialog via CLI

Source: https://olyxui.com/docs/components/alert-dialog

Use the Olyx CLI to add the alert dialog component to your project.

```bash
pnpm dlx @olyx/cli@latest add alert-dialog
```

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

### Split Button Group Example

Source: https://olyxui.com/docs/components/button-group

Demonstrates a split button group with a primary action and a secondary dropdown or action.

```html
Save Changes
Button

Up next
Checkbox
```

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

### Dialog with Custom Footer

Source: https://olyxui.com/docs/components/dialog

Example of a Dialog with a custom footer, demonstrating how to override default actions.

```typescript
<Dialog>
  <DialogTrigger>Share Document</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Share Document</DialogTitle>
      <DialogDescription>Share this document with others.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Share</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

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

### Warning Banner Example

Source: https://olyxui.com/docs/components/banner

Display a warning banner to alert users.

```typescript
<Banner status="warning">
  <BannerContent>Your trial expires in 3 days. Upgrade to continue using premium features.</BannerContent>
</Banner>
```

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

### List Available UI Components

Source: https://olyxui.com/docs/handbook/cli

Use `olyx list` to display all available UI components from the registry. This command fetches the registry and presents the components in alphabetical order.

```bash
olyx list
```

```bash
pnpm dlx @olyx/cli@latest list
```

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

### Open Right Side Drawer

Source: https://olyxui.com/docs/components/drawer

Example of a Drawer configured to open from the right side.

```typescript
<Drawer direction="right">
  <DrawerTrigger>Open Right Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Right Drawer</DrawerTitle>
      <DrawerDescription>This drawer slides in from the right.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
      <Button>Save changes</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

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

### Basic Sheet Usage

Source: https://olyxui.com/docs/components/sheet

A basic example of how to implement a Sheet component with a trigger, content, header, footer, and close button.

```typescript
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <SheetPanel>Content goes here</SheetPanel>
    <SheetFooter>
      <SheetClose>Cancel</SheetClose>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

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

### Number Field Example

Source: https://olyxui.com/docs/components/field

Illustrates a Number Field component for inputting numerical values.

```jsx
<Field>
  <FieldLabel>Quantity</FieldLabel>
  <NumberField />
</Field>
```

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

### Feature Banner Example

Source: https://olyxui.com/docs/components/banner

Highlight new features using a feature status banner.

```typescript
<Banner status="feature">
  <BannerContent>Introducing dark mode! Try it now in settings.</BannerContent>
</Banner>
```

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

### Data Attribute Approach: Olyx Component

Source: https://olyxui.com/docs/handbook/styling

Example of a component using data attributes for styling, as provided by the Olyx library.

```html
<button data-ui="button" data-variant="primary" data-mode="filled" data-size="lg">Save</button>
```

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

### Install Scroll Area Component

Source: https://olyxui.com/docs/components/scroll-area

Use this command to add the scroll-area component to your project.

```bash
pnpm dlx @olyx/cli@latest add scroll-area
```

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

### Combobox Field Example

Source: https://olyxui.com/docs/components/field

Demonstrates the use of a Combobox within a Field component for selecting a language.

```jsx
<Field>
  <FieldLabel>Language</FieldLabel>
  <Combobox placeholder="Select a language" />
</Field>
```

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

### Basic Command Palette Usage

Source: https://olyxui.com/docs/components/command

Demonstrates how to set up a basic command palette with a dialog trigger and a list of items. Ensure you have imported all necessary components from '@/components/ui/command' and '@/components/ui/button'.

```jsx
import {
  Command,
  CommandDialog,
  CommandDialogContent,
  CommandDialogTrigger,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPanel,
} from "@/components/ui/command"
import { Button } from "@/components/ui/button"

const items = [
  { value: "linear", label: "Linear" },
  { value: "figma", label: "Figma" },
  { value: "slack", label: "Slack" },
]
 
<CommandDialog>
  <CommandDialogTrigger render={<Button mode="stroke" />}>
    Open Command Palette
  </CommandDialogTrigger>
 
  <CommandDialogContent>
    <Command items={items}>
      <CommandInput placeholder="Search..." />
      <CommandPanel>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandList>
          {(item) => (
            <CommandItem key={item.value} value={item}>
              {item.label}
            </CommandItem>
          )}
        </CommandList>
      </CommandPanel>
    </Command>
  </CommandDialogContent>
</CommandDialog>
```

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

### Add Multiple UI Components

Source: https://olyxui.com/docs/handbook/cli

You can add multiple components at once by listing them after the `olyx add` command. This is useful for installing several components simultaneously.

```bash
olyx add button card dialog
```

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

### Olyx UI Component Style File Structure

Source: https://olyxui.com/docs/handbook/styling

Illustrates the typical file structure for an Olyx UI component, separating component logic and data attribute-based styles.

```bash
packages/react/src/button/
├── index.tsx        # Component logic + data attributes
└── style.css        # Styles targeting data attributes
```

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

### Basic Menu Bar Usage

Source: https://olyxui.com/docs/components/menu-bar

A basic example of a Menu Bar with file operations and sharing/printing options. This demonstrates the structure of nested menus and separators.

```typescript
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>New Tab</MenubarItem>
        <MenubarItem>New Window</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>Share</MenubarItem>
        <MenubarItem>Print</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

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

### Disabled Tag

Source: https://olyxui.com/docs/components/tag

Example of a disabled Tag component.

```react
<Tag disabled>Label</Tag>

```

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

### Tag with Icon

Source: https://olyxui.com/docs/components/tag

Example of a Tag component that includes an icon.

```react
<Tag icon={<Icon />}>Label</Tag>

```

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

### Dismissible Tag

Source: https://olyxui.com/docs/components/tag

Example of a Tag component with a dismiss button.

```react
<Tag dismissible>Label</Tag>

```

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

### Dismissible Banner Example

Source: https://olyxui.com/docs/components/banner

Create a banner that can be closed by the user.

```typescript
<Banner>
  <BannerContent>This banner can be dismissed by the user.</BannerContent>
  <BannerClose />
</Banner>
```

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

### Interactive Component Picker

Source: https://olyxui.com/docs/handbook/cli

If you run `olyx add` without specifying any component names, it will open an interactive picker to help you choose components.

```bash
olyx add
```

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

### Import Preview Card Components

Source: https://olyxui.com/docs/components/preview-card

Import the necessary components for using the Preview Card in your application.

```typescript
import {
  PreviewCard,
  PreviewCardContent,
  PreviewCardTrigger,
} from "@/components/ui/preview-card"

```

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

### Basic Input Group Usage

Source: https://olyxui.com/docs/components/input-group

Demonstrates how to import and use the Input, InputWrapper, InputIcon, and InputAffix components to create a basic input group with a leading icon.

```javascript
import { Input } from "@/components/ui/input"
import { InputWrapper, InputIcon, InputAffix } from "@/components/ui/input-group"

<InputWrapper>
  <InputIcon>
    <StarIcon />
  </InputIcon>
  <Input placeholder="Add to favorites" />
</InputWrapper>
```

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

### Lighter Variant Tag

Source: https://olyxui.com/docs/components/tag

Example of a Tag component with the 'lighter' variant.

```react
<Tag variant="lighter">Label</Tag>

```

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

### Solid Text Separator Example

Source: https://olyxui.com/docs/components/separator

Renders a separator with text in the middle.

```typescript
<Separator variant="solid-text">New section</Separator>

```

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

### Field with Autocomplete

Source: https://olyxui.com/docs/components/field

Example of a Field component utilizing the autocomplete attribute.

```jsx
<Field>
  <FieldLabel>Country</FieldLabel>
  <Input type="text" placeholder="United States" autoComplete="country-name" />
</Field>
```

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

### Basic Button Group Usage

Source: https://olyxui.com/docs/components/button-group

Demonstrates how to import and use the ButtonGroup and Button components to create a simple group of buttons.

```javascript
import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"
import { Button } from "@/components/ui/button"

<ButtonGroup>
  <Button>Previous</Button>
  <Button>Next</Button>
</ButtonGroup>
```

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

### Error Banner Example

Source: https://olyxui.com/docs/components/banner

Display an error banner with a specific message.

```typescript
<Banner status="error">
  <BannerContent>System maintenance scheduled for tonight at 10 PM EST.</BannerContent>
</Banner>
```

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

### Horizontal Button Group Example

Source: https://olyxui.com/docs/components/button-group

A preview of the horizontal button group.

```html
Archive
Report
Snooze
```

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

### Import Tooltip Components

Source: https://olyxui.com/docs/components/tooltip

Import the necessary Tooltip components from the library.

```typescript
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"

```

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

### Import Navigation Menu Components

Source: https://olyxui.com/docs/components/navigation-menu

Import necessary components for building a navigation menu.

```typescript
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
```

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

### Basic Collapsible Usage

Source: https://olyxui.com/docs/components/collapsible

A basic example of a collapsible panel with a trigger button.

```typescript
<Collapsible>
  <CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
  <CollapsiblePanel>
    Yes, you can access the file in the cloud.
  </CollapsiblePanel>
</Collapsible>

```

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

### Spinner in Input Group

Source: https://olyxui.com/docs/components/spinner

Example of using the Spinner component within an input group.

```typescript
<InputGroup>
  <InputLeftElement children={<Spinner />} />
  <Input placeholder="Loading..." />
</InputGroup>

```

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

### Content Separator Example

Source: https://olyxui.com/docs/components/separator

Renders a separator with text in the middle, suitable for continuing content.

```typescript
<Separator variant="content">or continue with</Separator>

```

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

### CSS Class Approach: Customization Attempts

Source: https://olyxui.com/docs/handbook/styling

Illustrates attempts to customize a component styled with CSS classes, showing how specificity issues arise.

```css
/* You want to customize it: */
.btn-primary {
  background: hotpink; /* ❌ might not apply — library's .btn-primary might be more specific */
}
 
/* So you escalate: */
.btn.btn-primary {
  background: hotpink; /* ❌ still loses to .btn.btn-primary.btn-filled */
}
 
/* Nuclear option: */
.btn-primary {
  background: hotpink !important; /* 💀 works, but now nothing can override you either */
}
```

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

### Checkbox Field Example

Source: https://olyxui.com/docs/components/field

Shows a single Checkbox integrated within a Field component.

```jsx
<Field>
  <Checkbox label="I agree to the terms and conditions" />
</Field>
```

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

### Data Attribute Approach: Customization

Source: https://olyxui.com/docs/handbook/styling

Demonstrates how to customize a component styled with data attributes, showing predictable specificity.

```css
[data-ui="button"][data-variant="primary"] {
  background: hotpink; /* ✅ applies cleanly — same specificity as the library */
}
 
/* Want to scope it further? */
.my-form [data-ui="button"][data-variant="primary"] {
  background: hotpink; /* ✅ higher specificity, scoped to your context */
}
```

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

### Field with Error Example

Source: https://olyxui.com/docs/components/field

Shows a Field component configured to display an error message.

```jsx
<Field>
  <FieldLabel>Email</FieldLabel>
  <Input type="email" placeholder="you@example.com" />
  <FieldError>Invalid email address</FieldError>
</Field>
```

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

### Basic Preview Card Usage

Source: https://olyxui.com/docs/components/preview-card

Render a basic Preview Card with a trigger and content. The content will appear in a popup when the trigger is hovered.

```typescript
<PreviewCard>
  <PreviewCardTrigger>Hover me</PreviewCardTrigger>
  <PreviewCardContent>Preview Card Content</PreviewCardContent>
</PreviewCard>

```

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

### Spinner in Button

Source: https://olyxui.com/docs/components/spinner

Example of using the Spinner component inside a button to indicate a loading state.

```typescript
<Button leftIcon={<Spinner />} disabled>
  Loading...
</Button>

```

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

### Import Context Menu Components

Source: https://olyxui.com/docs/components/context-menu

Import the necessary components for using the Context Menu.

```typescript
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

```

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

### Underline Separator Example

Source: https://olyxui.com/docs/components/separator

Renders a separator styled as an underline, often used for section titles.

```typescript
<Separator variant="underline">Account settings</Separator>

```

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

### Switch Field Example

Source: https://olyxui.com/docs/components/field

Shows a Switch component used within a Field for a boolean toggle.

```jsx
<Field>
  <Switch label="Dark mode" />
</Field>
```

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

### Checkbox Group Example

Source: https://olyxui.com/docs/components/field

Demonstrates a group of Checkboxes within a Field component, including a description.

```jsx
<Fieldset>
  <FieldsetLegend>Notifications</FieldsetLegend>
  <FieldsetDescription>Choose how you want to be notified.</FieldsetDescription>
  <Field>
    <Checkbox label="Email notifications" />
  </Field>
  <Field>
    <Checkbox label="SMS notifications" />
  </Field>
  <Field>
    <Checkbox label="Push notifications" />
  </Field>
</Fieldset>
```

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

### Import Dropdown Menu Components

Source: https://olyxui.com/docs/components/dropdown-menu

Import necessary components for creating a dropdown menu.

```typescript
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuGroupLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
```
Tokens:
Raw