{status.label}

{value === status.value && ( )} ))} ) } ``` ## Installation The combobox component is a composition of the `Command` and `Popover` components. Follow installation instructions for the [`Command`](/docs/components/command) and [`Popover`](/docs/components/popover) components. ## Usage ```tsx title="Imports" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" ``` ```tsx title="Anatomy" ``` --- ### Command A searchable interface for quickly executing commands or actions. ### Example ```tsx import { ArrowRightIcon, LayoutGridIcon, PlusIcon, UsersIcon, } from "lucide-react" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@/components/ui/command" import { Kbd } from "@/components/ui/kbd" export default function CommandDemo() { return ( No results found. Search projects... ⌘ P Create new project... C Search teams... Create new team... T Go to home Go to profile Go to settings Go to billing ) } ``` ## About The Command is built on top of [`cmdk-base`](https://cmdk-base.vercel.app), which is ported from [`cmdk`](https://github.com/pacocoursey/cmdk), originally created by [@pacocoursey](https://x.com/pacocoursey). ## Installation ```bash title="Terminal" npx shadcn@latest add https://9ui.dev/r/command.json ``` **Install dependencies** ```bash title="Terminal" npm install cmdk-base ``` **Copy and paste the following code into your project.** ## Usage ```tsx title="Imports" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@/components/ui/command" ``` ```tsx title="Anatomy" ``` ## Examples ### Dialog ### Example ```tsx "use client" import { useEffect, useState } from "react" import { ArrowRightIcon, LayoutGridIcon, PlusIcon, UsersIcon, } from "lucide-react" import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@/components/ui/command" import { Kbd } from "@/components/ui/kbd" export default function CommandDialogDemo() { const [open, setOpen] = useState(false) useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === "j" && (e.metaKey || e.ctrlKey)) { e.preventDefault() setOpen((open) => !open) } } document.addEventListener("keydown", down) return () => document.removeEventListener("keydown", down) }, []) return ( <>

⌘+J

No results found. Search projects... ⌘ P Create new project... C Search teams... Create new team... T Go to home Go to profile Go to settings Go to billing ) } ``` --- ### Context Menu Used to provide options specific to an element or area. ### Example ```tsx "use client" import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "@/components/ui/context-menu" export default function ContextMenuDemo() { return (

Right Click Here Back ⌘[ Forward ⌘] Reload ⌘R More Save As Print Cast Inspect Settings Always on Top Show full URL Zoom 50% 100% 150%

) } ``` ## Installation ```bash title="Terminal" npx shadcn@latest add https://9ui.dev/r/context-menu.json ``` **Copy and paste the following code into your project.** ## Usage ```tsx title="Imports" import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "@/components/ui/context-menu" ``` ```tsx title="Anatomy" ``` --- ### Date Picker A date picker component. ### Example ```tsx import * as React from "react" import dayjs from "dayjs" import { CalendarIcon, ChevronsUpDownIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" export default function DatePickerDemo() { const [open, setOpen] = React.useState(false) const [value, setValue] = React.useState(undefined) return ( ( )} /> ) } ``` ## Installation The date picker component is a composition of the `Calendar` and `Popover` components. Follow installation instructions for the [`Calendar`](/docs/components/calendar) and [`Popover`](/docs/components/popover) components. ## Usage ```tsx title="Imports" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" ``` ```tsx title="Anatomy" ``` --- ### Dialog A modal window for displaying content. ### Example ```tsx import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" export default function DialogDemo() { return ( ) } ``` ## Installation ```bash title="Terminal" npx shadcn@latest add https://9ui.dev/r/dialog.json ``` **Copy and paste the following code into your project.** ## Usage ```tsx title="Imports" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" ``` ```tsx title="Anatomy" ``` ## Examples ### Nested Dialogs ### Example ```tsx import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" export default function DialogNested() { return ( ) } ``` --- ### Drawer Displays a panel that slides out from the side of a screen to reveal more content. ### Example ```tsx "use client" import { useState } from "react" import { StarIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer" import { Textarea } from "@/components/ui/textarea" import { cn } from "@/lib/utils" export default function DrawerDemo() { const [rating, setRating] = useState(undefined) const handleChangeRating = (newRating: number) => { if (newRating === rating) { setRating(undefined) } else { setRating(newRating) } } return ( } />

Provide Your Feedback We value your feedback. Please rate your experience and leave a review.

{[1, 2, 3, 4, 5].map((star) => ( handleChangeRating(star)} /> ))}

</div>

<DrawerFooter>
            <Button className="w-full">Submit</Button>
            <DrawerClose
              render={(props) => (
                <Button {...props} variant="outline" className="w-full">
                  Cancel
                </Button>
              )}
            />
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}
```

## About

The Drawer is built on top of [`vaul-base`](https://vaul-base.vercel.app), which is ported from [`vaul`](https://vaul.emilkowal.ski), originally created by [@emilkowalski\_](https://x.com/emilkowalski_).

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/drawer.json
```

**Install the following dependencies:**

```bash
npm install vaul-base
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
```

```tsx title="Anatomy"
<Drawer>
	<DrawerTrigger>
	<DrawerContent>
		<DrawerHeader>
			<DrawerTitle />
			<DrawerDescription />
		</DrawerHeader>
		<DrawerFooter>
			<DrawerClose />
		</DrawerFooter>
	</DrawerContent>
</Drawer>
```

---

### Dropdown Menu

Used to display a list of options to the user.

### Example

```tsx
"use client"

import { useState } from "react"
import {
  PauseIcon,
  PlayIcon,
  SkipBackIcon,
  SkipForwardIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownDemo() {
  const [shuffle, setShuffle] = useState(false)
  const [repeat, setRepeat] = useState(false)
  const [sortBy, setSortBy] = useState("artist")

return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={(props) => <Button {...props}>Controls</Button>}
      />
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuLabel>Playback</DropdownMenuLabel>
          <DropdownMenuItem>
            <PlayIcon />
            Play
            <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <PauseIcon />
            Pause
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <SkipBackIcon />
            Previous
            <DropdownMenuShortcut>⌘[</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <SkipForwardIcon />
            Next
            <DropdownMenuShortcut>⌘]</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem
          checked={shuffle}
          onCheckedChange={setShuffle}
        >
          Shuffle
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={repeat} onCheckedChange={setRepeat}>
          Repeat
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem disabled>
          Enhanced Audio
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuLabel>Sort by</DropdownMenuLabel>
          <DropdownMenuRadioGroup value={sortBy} onValueChange={setSortBy}>
            <DropdownMenuRadioItem value="artist">Artist</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="album">Repeat</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="title">Title</DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Add to Playlist</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Jazz</DropdownMenuItem>
            <DropdownMenuItem>Rock</DropdownMenuItem>
            <DropdownMenuItem>Pop</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/dropdown-menu.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuGroupLabel,
  DropdownMenuItem,
  DropdownMenuItemShortcut,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown"
```

```tsx title="Anatomy"
<DropdownMenu>
  <DropdownMenuTrigger />
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuGroupLabel />
      <DropdownMenuItem>
        <DropdownMenuItemShortcut />
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem />
    <DropdownMenuRadioGroup>
      <DropdownMenuRadioItem />
    </DropdownMenuRadioGroup>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger />
      <DropdownMenuSubContent>
        <DropdownMenuItem />
      </DropdownMenuSubContent>
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>
```

---

### Emoji Picker

A component that allows users to pick an emoji.

### Example

```tsx
"use client"

import { Loader2 } from "lucide-react"
import { toast } from "sonner"

import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerEmpty,
  EmojiPickerList,
  EmojiPickerLoading,
  EmojiPickerSearch,
} from "@/components/ui/emoji-picker"

export default function EmojiPickerDemo() {
  return (
    <EmojiPicker
      onEmojiSelect={({ emoji, label }) => {
        toast(() => (
          <p className="flex items-center gap-2 text-sm">
            <span className="text-lg">{emoji}</span>
            {label}
          </p>
        ))
      }}
    >
      <EmojiPickerSearch />
      <EmojiPickerContent>
        <EmojiPickerLoading>
          <Loader2 className="size-4 animate-spin" />
        </EmojiPickerLoading>
        <EmojiPickerEmpty>No results</EmojiPickerEmpty>
        <EmojiPickerList />
      </EmojiPickerContent>
    </EmojiPicker>
  )
}
```

## About

The Emoji Picker is built on top of [`frimousse`](https://frimousse.liveblocks.io/), which is created by [liveblocks](https://liveblocks.io).

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/emoji-picker.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerEmpty,
  EmojiPickerList,
  EmojiPickerLoading,
  EmojiPickerSearch,
  EmojiPickerSkinToneSelector,
} from "@/components/ui/emoji-picker"
```

```tsx title="Anatomy"
<EmojiPicker>
  <EmojiPickerSearch />
  <EmojiPickerSkinToneSelector />
  <EmojiPickerContent>
    <EmojiPickerLoading />
    <EmojiPickerEmpty />
    <EmojiPickerList />
  </EmojiPickerContent>
</EmojiPicker>
```

## Examples

### Popover

### Example

```tsx
import * as React from "react"
import { Loader2 } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerEmpty,
  EmojiPickerList,
  EmojiPickerLoading,
  EmojiPickerSearch,
} from "@/components/ui/emoji-picker"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function EmojiPickerPopoverDemo() {
  const [open, setOpen] = React.useState(false)
  const [emoji, setEmoji] = React.useState<string | undefined>(undefined)

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger
        render={(props) => (
          <Button {...props} variant="outline" size="icon">
            {emoji ? emoji : "👇"}
          </Button>
        )}
      />
      <PopoverContent className="rounded-md p-0 outline-offset-0">
        <EmojiPicker
          className="border-none"
          onEmojiSelect={({ emoji, label }) => {
            setEmoji(emoji)
            setOpen(false)
            toast(() => (
              <p className="flex items-center gap-2 text-sm">
                <span className="text-lg">{emoji}</span>
                {label}
              </p>
            ))
          }}
        >
          <EmojiPickerSearch />
          <EmojiPickerContent>
            <EmojiPickerLoading>
              <Loader2 className="size-4 animate-spin" />
            </EmojiPickerLoading>
            <EmojiPickerEmpty>No results</EmojiPickerEmpty>
            <EmojiPickerList />
          </EmojiPickerContent>
        </EmojiPicker>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Form

A structured component for collecting and validating data.

### Example

```tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"

const schema = z.object({
  displayName: z
    .string()
    .min(3, { message: "Please enter at least 3 characters." }),
  email: z.string().email({ message: "Please enter a valid email address." }),
})

type FormValues = z.infer<typeof schema>

export default function FormDemo() {
  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: {
      displayName: "",
      email: "",
    },
  })

const onSubmit = (data: FormValues) => {
    console.log(data)
  }

return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="flex w-96 flex-col gap-4"
      >
        <FormField
          name="displayName"
          control={form.control}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Display Name</FormLabel>
              <FormControl>
                <Input
                  className="w-full"
                  placeholder="borabalogluu"
                  aria-invalid={!!form.formState.errors.displayName}
                  {...field}
                />
              </FormControl>
              <FormDescription>
                This is the name that will be displayed to other users.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          name="email"
          control={form.control}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input
                  className="w-full"
                  placeholder="your@email.com"
                  aria-invalid={!!form.formState.errors.email}
                  {...field}
                />
              </FormControl>
              <FormDescription>Enter your email address</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}
```

## About

9ui utilizes [`react-hook-form`](https://react-hook-form.com/) to build efficient, flexible, and scalable forms. React Hook Form is a lightweight library that optimizes performance by minimizing re-renders and simplifying form state management.

Why React Hook Form?

- Performance: Uses uncontrolled components, reducing unnecessary re-renders.
- Easy Integration: Works seamlessly with controlled and uncontrolled inputs.
- Validation: Supports built-in validation and integrates with libraries like [`Zod`](https://github.com/colinhacks/zod).
- Minimal Boilerplate: Reduces the amount of code needed to handle form state and validation.

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/form.json
```

**Install the dependencies.**

```bash title="Terminal"
npm install react-hook-form zod @hookform/resolvers
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
```

```tsx title="Anatomy"
<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)}>
    <FormField
      name="..."
      control="{...}"
      render={() => (
        <FormItem>
          <FormLabel>Label</FormLabel>
          <FormControl>{/* Input, Select, etc. */}</FormControl>
          <FormDescription>Description</FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />
  </form>
</Form>
```

---

### Input

A component that allows users to input text.

### Example

```tsx
import { Input } from "@/components/ui/input"

export default function InputDemo() {
  return <Input placeholder="Name" inputContainerClassName="w-80" />
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/input.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Input } from "@/components/ui/input"
```

```tsx title="Anatomy"
<Input />
```

## Examples

### With Icons

### Example

```tsx
import { useState } from "react"
import { EyeIcon, EyeOffIcon, LockIcon } from "lucide-react"

import { Input } from "@/components/ui/input"

export default function InputWithIcons() {
  const [isPasswordVisible, setIsPasswordVisible] = useState(false)

const togglePasswordVisibility = () => {
    setIsPasswordVisible(!isPasswordVisible)
  }

const passwordType = isPasswordVisible ? "text" : "password"

return (
    <Input
      placeholder="Password"
      inputContainerClassName="w-80"
      type={passwordType}
      leadingIcon={<LockIcon />}
      trailingIcon={
        isPasswordVisible ? (
          <EyeIcon
            className="hover:text-foreground pointer-events-auto cursor-pointer transition-colors duration-200"
            onClick={togglePasswordVisibility}
          />
        ) : (
          <EyeOffIcon
            className="hover:text-foreground pointer-events-auto cursor-pointer transition-colors duration-200"
            onClick={togglePasswordVisibility}
          />
        )
      }
    />
  )
}
```

---

### Disabled

### Example

```tsx
import { Input } from "@/components/ui/input"

export default function InputDisabled() {
  return <Input inputContainerClassName="w-80" placeholder="Name" disabled />
}
```

---

### Error

### Example

```tsx
import { Input } from "@/components/ui/input"

export default function InputError() {
  return (
    <Input inputContainerClassName="w-80" placeholder="Name" aria-invalid />
  )
}
```

---

### Input OTP

A component for entering OTP codes.

### Example

```tsx
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"

export default function InputOTPDemo() {
  return (
    <InputOTP maxLength={6}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  )
}
```

## About

The Input OTP is built on top of [`input-otp`](https://input-otp.rodz.dev/), which is created by [@guilherme_rodz](https://x.com/guilherme_rodz).

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/input-otp.json
```

**Install the dependencies.**

```bash title="Terminal"
npm install input-otp
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"
```

```tsx title="Anatomy"
<InputOTP>
  <InputOTPGroup>
    <InputOTPSlot />
  </InputOTPGroup>
  <InputOTPSeparator />
</InputOTP>
```

---

### Kbd

Displays keyboard shortcuts or keypresses.

### Example

```tsx
import { Kbd } from "@/components/ui/kbd"

export default function KbdDemo() {
  return (
    <div className="flex items-center gap-2 text-sm">
      <Kbd>⌘</Kbd>+<Kbd>K</Kbd>
    </div>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/kbd.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Kbd } from "@/components/ui/kbd"
```

```tsx title="Anatomy"
<Kbd />
```

---

### Menubar

Displays a top-level bar with expandable menus for easy access.

### Example

```tsx
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar"

export default function MenubarDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New File
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window
            <MenubarShortcut>⇧⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Open
            <MenubarShortcut>⌘O</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Open Folder
            <MenubarShortcut>⇧⌘O</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>Open Recent</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Save
            <MenubarShortcut>⌘S</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Save As
            <MenubarShortcut>⇧⌘S</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Close Window
            <MenubarShortcut>⌘W</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo
            <MenubarShortcut>⌘Y</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Cut
            <MenubarShortcut>⌘X</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Copy
            <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Paste
            <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Find
            <MenubarShortcut>⌘F</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Replace
            <MenubarShortcut>⌥⌘F</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarSub>
            <MenubarSubTrigger>Appearance</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarRadioGroup
                onValueChange={(value) => {
                  console.log(value)
                }}
              >
                <MenubarRadioItem value="system">System</MenubarRadioItem>
                <MenubarRadioItem value="light">Light</MenubarRadioItem>
                <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
              </MenubarRadioGroup>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Show/Hide Sidebar
            <MenubarShortcut>⌃⌥⌘*</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Command Palette
            <MenubarShortcut>⇧⌘P</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>Expand Tabs</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Zoom In
            <MenubarShortcut>⌘+</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Zoom Out
            <MenubarShortcut>⌘-</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Reset Zoom
            <MenubarShortcut>⌘0</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Help</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Getting Started</MenubarItem>
          <MenubarItem>Report Issue</MenubarItem>
          <MenubarItem>Check for Updates</MenubarItem>
          <MenubarItem>Contact the Team</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/menubar.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar"
```

```tsx title="Anatomy"
<Menubar>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarItem>
        <MenubarShortcut />
      </MenubarItem>
      <MenubarSeparator />
      <MenubarCheckboxItem />
      <MenubarSub>
        <MenubarSubTrigger />
        <MenubarSubContent>{/* ... */}</MenubarSubContent>
      </MenubarSub>
      <MenubarRadioGroup>
        <MenubarRadioItem />
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

---

### Meter

Used to represent a value within a fixed scale.

### Example

```tsx
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"

export default function MeterDemo() {
  return (
    <Meter className="mx-auto w-48" value={4} max={5}>
      <div className="flex items-center justify-between">
        <MeterLabel>Tasks Completed</MeterLabel>
        <MeterValue>{(formattedValue, value) => `${value} / 5`}</MeterValue>
      </div>
    </Meter>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/meter.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"
```

```tsx title="Anatomy"
<Meter>
  <MeterLabel />
  <MeterValue />
</Meter>
```

---

### Navigation Menu

A menu for navigating between different sections or pages.

### Example

```tsx
"use client"

import * as React from "react"
import Link from "next/link"

import { Icons } from "@/components/icons"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"

import { cn } from "@/lib/utils"

const components: { title: string; href: string; description: string }[] = [
  {
    title: "Alert Dialog",
    href: "/docs/components/alert-dialog",
    description:
      "A modal dialog for critical messages or confirmation actions.",
  },
  {
    title: "Preview Card",
    href: "/docs/components/preview-card",
    description: "Used to display a preview of content when hovered.",
  },
  {
    title: "Emoji Picker",
    href: "/docs/components/emoji-picker",
    description: "A component that allows users to pick an emoji.",
  },
  {
    title: "Progress",
    href: "/docs/components/progress",
    description: "Displays a progress bar with an optional label.",
  },
  {
    title: "Tabs",
    href: "/docs/components/tabs",
    description: "Used to organize content into tabbed navigation.",
  },
  {
    title: "Tooltip",
    href: "/docs/components/tooltip",
    description: "Used to provide context or hints for elements.",
  },
]

const gettingStartedItems = [
  {
    title: "Introduction",
    href: "/docs/getting-started/introduction",
    description: "Learn about 9ui.",
  },
  {
    title: "Installation",
    href: "/docs/getting-started/installation",
    description: "How to install 9ui in your project.",
  },
  {
    title: "Roadmap",
    href: "/docs/getting-started/roadmap",
    description: "See what we are working on next.",
  },
]

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu className="w-full">
      <NavigationMenuList className="flex-col items-start md:flex-row md:items-center">
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2">
              {gettingStartedItems.map((item) => (
                <ListItem key={item.title} title={item.title} href={item.href}>
                  {item.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2">
              {components.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="https://github.com/borabaloglu/9ui"
            render={({ ...props }) => (
              <a {...props} className={cn(navigationMenuTriggerStyle())}>
                <Icons.gitHub />
                Source Code
              </a>
            )}
          />
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

function ListItem({
  title,
  children,
  href,
  ...props
}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink
        render={(props) => (
          <Link href={href} {...props}>
            <div className="text-sm font-semibold">{title}</div>
            <p className="text-muted-foreground line-clamp-2 text-sm">
              {children}
            </p>
          </Link>
        )}
      />
    </li>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/navigation-menu.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
```

```tsx title="Anatomy"
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

---

### Number Field

A numeric input with increment, decrement, and scrub controls.

### Example

```tsx
import { NumberField, NumberFieldScrubArea } from "@/components/ui/number-field"

export default function NumberFieldDemo() {
  return (
    <NumberField className="mx-auto" defaultValue={5} min={0} max={100}>
      <NumberFieldScrubArea />
    </NumberField>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/number-field.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { NumberField, NumberFieldScrubArea } from "@/components/ui/number-field"
```

```tsx title="Anatomy"
<NumberField>
  <NumberFieldScrubArea />
</NumberField>
```

---

### Pagination

A control for navigating between pages of content.

### Example

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

export default function PaginationDemo() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/pagination.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
```

```tsx title="Anatomy"
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

## Pagination Link

By default, the `PaginationLink` component renders an anchor (`<a>`) element.

You can customize it to render a different element by passing a `render` prop.

```tsx title="Using Next.js Link"
<PaginationLink
  render={(...props) => (
    <Link href="#" {...props}>
      Go to page 1
    </Link>
  )}
/>
```

---

### Popover

A popup for displaying content.

### Example

```tsx
import { CopyIcon, Share2Icon } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function PopoverDemo() {
  const copyToClipboard = () => {
    toast.success("Copied to clipboard")
    navigator.clipboard.writeText(window.location.href)
  }

return (
    <Popover>
      <PopoverTrigger
        render={(props) => (
          <Button {...props} variant="outline" size="icon">
            <Share2Icon />
          </Button>
        )}
      />
      <PopoverContent className="w-[calc(100vw-4rem)] sm:w-[500px]">
        <PopoverHeader>
          <PopoverTitle>Share</PopoverTitle>
          <PopoverDescription>Share this component.</PopoverDescription>
        </PopoverHeader>
        <div className="mt-2 flex w-full gap-2">
          <Input
            inputContainerClassName="w-full"
            value={window.location.href}
            autoFocus={false}
            readOnly
          />
          <Button className="shrink-0" size="icon" onClick={copyToClipboard}>
            <CopyIcon />
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/popover.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverFooter,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
```

```tsx title="Anatomy"
<Popover>
  <PopoverTrigger />
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle />
      <PopoverDescription />
    </PopoverHeader>
    <PopoverFooter>
      <PopoverClose />
    </PopoverFooter>
  </PopoverContent>
</Popover>
```

---

### Preview Card

Used to display a preview of content when hovered.

### Example

```tsx
"use client"

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

export default function PreviewCardDemo() {
  return (
    <PreviewCard>
      <p>
        This is a preview card component from{" "}
        <PreviewCardTrigger className="cursor-pointer underline underline-offset-2">
          9ui
        </PreviewCardTrigger>
        .
      </p>
      <PreviewCardContent>
        <Icons.logo className="mx-auto w-10" />
        <p className="mt-4 text-sm">
          Beautiful, customizable components built with{" "}
          <a
            href="https://base-ui.com"
            className="underline underline-offset-2"
            target="_blank"
          >
            Base UI
          </a>{" "}
          and{" "}
          <a
            href="https://tailwindcss.com"
            className="underline underline-offset-2"
            target="_blank"
          >
            Tailwind CSS
          </a>
          .
        </p>
        <div className="mt-4 flex flex-col gap-1 text-sm">
          <div className="flex items-center gap-2">
            <span className="text-muted-foreground">Creator:</span>
            <a
              href="https://x.com/borabalogluu"
              className="underline underline-offset-2"
              target="_blank"
            >
              Bora Baloglu
            </a>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-muted-foreground">Source code:</span>
            <a
              href="https://github.com/borabaloglu/9ui"
              className="underline underline-offset-2"
              target="_blank"
            >
              Github
            </a>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-muted-foreground">Website</span>
            <a
              href="https://www.9ui.dev"
              className="underline underline-offset-2"
              target="_blank"
            >
              9ui.dev
            </a>
          </div>
        </div>
      </PreviewCardContent>
    </PreviewCard>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/preview-card.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  PreviewCard,
  PreviewCardContent,
  PreviewCardTrigger,
} from "@/components/ui/preview-card"
```

```tsx title="Anatomy"
<PreviewCard>
  <PreviewCardTrigger />
  <PreviewCardContent />
</PreviewCard>
```

---

### Progress

Displays a progress bar with an optional label.

### Example

```tsx
import * as React from "react"

import { Progress } from "@/components/ui/progress"

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

React.useEffect(() => {
    const interval = setInterval(() => {
      setValue((prev) => (prev === 100 ? 100 : prev + 2))
    }, 100)
    return () => clearInterval(interval)
  }, [])

return (
    <div className="w-80">
      <Progress value={value} />
    </div>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/progress.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Progress, ProgressValue } from "@/components/ui/progress"
```

```tsx title="Anatomy"
<Progress>
  <ProgressValue />
</Progress>
```

## Examples

### With Value

### Example

```tsx
import * as React from "react"

import { Progress, ProgressValue } from "@/components/ui/progress"

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

React.useEffect(() => {
    const interval = setInterval(() => {
      setValue((prev) => (prev === 100 ? 100 : prev + 2))
    }, 100)
    return () => clearInterval(interval)
  }, [])

return (
    <div className="w-80">
      <Progress value={value}>
        <ProgressValue />
      </Progress>
    </div>
  )
}
```

---

### Radio Group

A set of radio buttons for selecting one option from a group.

### Example

```tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export default function RadioGroupDemo() {
  return (
    <RadioGroup aria-labelledby="radio-group-plan">
      <div id="radio-group-plan" className="text-foreground font-medium">
        Select a plan
      </div>
      <Label className="flex items-center gap-2">
        <RadioGroupItem id="basic" value="basic" />
        Basic
      </Label>
      <Label className="flex items-center gap-2">
        <RadioGroupItem id="standard" value="standard" />
        Standard
      </Label>
      <Label className="flex items-center gap-2">
        <RadioGroupItem id="premium" value="premium" />
        Premium
      </Label>
    </RadioGroup>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/radio-group.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
```

```tsx title="Anatomy"
<RadioGroup>
  <RadioGroupItem />
</RadioGroup>
```

## Examples

### Disabled

### Example

```tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export default function RadioGroupDisabled() {
  return (
    <RadioGroup disabled aria-labelledby="radio-group-notifications">
      <div
        id="radio-group-notifications"
        className="text-foreground font-medium"
      >
        Notifications
      </div>
      <Label className="flex items-center gap-2">
        <RadioGroupItem id="email" value="email" />
        Email
      </Label>
      <Label className="flex items-center gap-2">
        <RadioGroupItem id="sms" value="sms" />
        SMS
      </Label>
      <Label className="flex items-center gap-2">
        <RadioGroupItem id="email-and-sms" value="email-and-sms" />
        Email & SMS
      </Label>
    </RadioGroup>
  )
}
```

---

### Scroll Area

A component for creating scrollable regions.

### Example

```tsx
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const versions = Array.from({ length: 50 }, (_, i) => `v${i + 1}.0.0`)

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-60 w-full max-w-60 rounded-md border">
      <div className="p-4">
        <h4 className="text-sm font-medium">Versions</h4>
        <Separator className="my-2" />
        <div className="mt-2 flex flex-col gap-2 text-sm">
          {versions.map((version) => (
            <div key={version}>{version}</div>
          ))}
        </div>
      </div>
    </ScrollArea>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/scroll-area.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { ScrollArea } from "@/components/ui/scroll-area"
```

```tsx title="Anatomy"
<ScrollArea />
```

## Examples

### Horizontal

### Example

```tsx
import { ScrollArea } from "@/components/ui/scroll-area"

const versions = Array.from({ length: 50 }, (_, i) => `v${i + 1}.0.0`).join(
  ", "
)

export default function ScrollAreaHorizontal() {
  return (
    <ScrollArea className="w-full rounded-md border" orientation="horizontal">
      <div className="inline-block p-4 text-sm text-nowrap">{versions}</div>
    </ScrollArea>
  )
}
```

---

### Select

A dropdown menu for choosing one option from a list..

### Example

```tsx
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const items = [
  {
    label: "Select a fruit",
    value: null,
  },
  {
    label: "Apple",
    value: "apple",
  },
  {
    label: "Banana",
    value: "banana",
  },
  {
    label: "Cherry",
    value: "cherry",
  },
]

export default function SelectDemo() {
  return (
    <div className="w-80">
      <Select items={items}>
        <SelectTrigger className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {items.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/select.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
```

```tsx title="Anatomy"
<Select>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectGroupLabel />
      <SelectItem />
    </SelectGroup>
  </SelectContent>
</Select>
```

## Examples

### Custom value

### Example

```tsx
import { useState } from "react"
import Image from "next/image"

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const users = {
  "karen-smith": {
    name: "Karen Smith",
    image: "/memoji-1.png",
  },
  "chris-williams": {
    name: "Chris Williams",
    image: "/memoji-3.png",
  },
  "melissa-johnson": {
    name: "Melissa Johnson",
    image: "/memoji-2.png",
  },
  "frank-lee": {
    name: "Frank Lee",
    image: "/memoji-4.png",
  },
}

export default function SelectWithCustomValue() {
  const [selected, setSelected] = useState<keyof typeof users | null>(null)

return (
    <div className="w-80">
      <Select
        value={selected}
        onValueChange={(value) => setSelected(value as keyof typeof users)}
      >
        <SelectTrigger className="w-full">
          <SelectValue>
            {() =>
              selected ? (
                <div className="flex items-center gap-2">
                  <Image
                    src={users[selected].image}
                    alt={users[selected].name}
                    width={16}
                    height={16}
                  />
                  {users[selected].name}
                </div>
              ) : (
                "Assign to"
              )
            }
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          {Object.entries(users).map(([id, user]) => (
            <SelectItem key={id} value={id}>
              <div className="flex items-center gap-2">
                <Image
                  src={user.image}
                  alt={user.name}
                  width={16}
                  height={16}
                />
                {user.name}
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}
```

---

### With groups

### Example

```tsx
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const items = [
  {
    label: "Select an option",
    value: null,
  },
  {
    label: "Apple",
    value: "apple",
  },
  {
    label: "Banana",
    value: "banana",
  },
  {
    label: "Cherry",
    value: "cherry",
  },
  {
    label: "Carrot",
    value: "carrot",
  },
  {
    label: "Potato",
    value: "potato",
  },
  {
    label: "Tomato",
    value: "tomato",
  },
]

export default function SelectWithGroups() {
  return (
    <div className="w-80">
      <Select items={items}>
        <SelectTrigger className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="cherry">Cherry</SelectItem>
          </SelectGroup>
          <SelectGroup>
            <SelectLabel>Vegetables</SelectLabel>
            <SelectItem value="carrot">Carrot</SelectItem>
            <SelectItem value="potato">Potato</SelectItem>
            <SelectItem value="tomato">Tomato</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}
```

---

### Multiple

### Example

```tsx
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const languages = {
  javascript: "JavaScript",
  typescript: "TypeScript",
  python: "Python",
  java: "Java",
  csharp: "C#",
  php: "PHP",
  cpp: "C++",
  rust: "Rust",
  go: "Go",
  swift: "Swift",
}

type Language = keyof typeof languages

const values = Object.keys(languages) as Language[]

function renderValue(value: Language[]) {
  if (value.length === 0) {
    return "Select languages..."
  }

const firstLanguage = languages[value[0]]
  const additionalLanguages =
    value.length > 1 ? ` (+${value.length - 1} more)` : ""
  return firstLanguage + additionalLanguages
}

export default function SelectMultiple() {
  return (
    <div className="w-80">
      <Select multiple>
        <SelectTrigger className="w-full">
          <SelectValue>{renderValue}</SelectValue>
        </SelectTrigger>
        <SelectContent>
          {values.map((value) => (
            <SelectItem key={value} value={value}>
              {languages[value]}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}
```

---

### Separator

Displays a divider to organize content visually or contextually.

### Example

```tsx
import { Separator } from "@/components/ui/separator"

export default function SeparatorDemo() {
  return (
    <div>
      <p>9ui is a component library for building modern web applications.</p>
      <Separator className="my-2.5" />
      <div className="flex gap-2.5">
        <p>Website</p>
        <Separator orientation="vertical" />
        <p>Documentation</p>
        <Separator orientation="vertical" />
        <p>Community</p>
      </div>
    </div>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/separator.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Separator } from "@/components/ui/separator"
```

```tsx title="Anatomy"
<Separator />
```

---

### Sheet

A sliding panel for displaying content.

### Example

```tsx
"use client"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { Textarea } from "@/components/ui/textarea"

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger
        render={(props) => <Button {...props}>Open Sheet</Button>}
      />
      <SheetContent>
        <SheetClose />
        <SheetHeader>
          <SheetTitle>Submit Feedback</SheetTitle>
          <SheetDescription>
            Please share your feedback with us to help improve our service.
          </SheetDescription>
        </SheetHeader>
        <div className="space-y-2 px-4">
          <Label htmlFor="feedback">Your Feedback</Label>
          <Textarea id="feedback" placeholder="Type your feedback here." />
        </div>
        <SheetFooter>
          <Button size="sm">Submit</Button>
          <SheetClose
            render={(props) => (
              <Button {...props} size="sm" variant="ghost">
                Close
              </Button>
            )}
          />
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/sheet.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
```

```tsx title="Anatomy"
<Sheet>
  <SheetTrigger />
  <SheetContent>
    <SheetClose />
    <SheetHeader>
      <SheetTitle />
      <SheetDescription />
    </SheetHeader>
    <SheetFooter>
      <SheetClose />
    </SheetFooter>
  </SheetContent>
</Sheet>
```

## Examples

### Sides

### Example

```tsx
"use client"

const SHEET_SIDES = ["top", "right", "bottom", "left"] as const

export default function SheetSides() {
  return (
    <div className="grid grid-cols-2 gap-2">
      {SHEET_SIDES.map((side) => (
        <Sheet key={side}>
          <SheetTrigger
            render={(props) => (
              <Button {...props} className="w-full">
                {side}
              </Button>
            )}
          />
          <SheetContent side={side}>
            <SheetClose />
            <SheetHeader>
              <SheetTitle>Submit Feedback</SheetTitle>
              <SheetDescription>
                Please share your feedback with us to help improve our service.
              </SheetDescription>
            </SheetHeader>
            <div className="space-y-2 px-4">
              <Label htmlFor="feedback">Your Feedback</Label>
              <Textarea id="feedback" placeholder="Type your feedback here." />
            </div>
            <SheetFooter>
              <Button size="sm">Submit</Button>
              <SheetClose
                render={(props) => (
                  <Button {...props} size="sm" variant="ghost">
                    Close
                  </Button>
                )}
              />
            </SheetFooter>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}
```

---

### Skeleton

Displays a loading state for a component.

### Example

```tsx
import { Skeleton } from "@/components/ui/skeleton"

export default function SkeletonDemo() {
  return (
    <div className="flex w-64 flex-col gap-4 rounded-lg border p-4">
      <Skeleton className="aspect-video w-full" />
      <Skeleton className="h-5 w-2/3" />
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-2/3" />
      </div>
    </div>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/skeleton.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Skeleton } from "@/components/ui/skeleton"
```

```tsx title="Anatomy"
<Skeleton />
```

---

### Slider

A control for selecting a value within a range.

### Example

```tsx
import { Slider } from "@/components/ui/slider"

export default function SliderDemo() {
  return <Slider className="max-w-100" defaultValue={50} />
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/slider.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Slider, SliderValue } from "@/components/ui/slider"
```

```tsx title="Anatomy"
<Slider>
  <SliderValue />
</Slider>
```

## Examples

### Disabled

### Example

```tsx
import { Slider } from "@/components/ui/slider"

export default function SliderDisabled() {
  return <Slider className="max-w-100" defaultValue={50} disabled />
}
```

---

### Range

### Example

```tsx
import { Slider } from "@/components/ui/slider"

export default function SliderRange() {
  return <Slider className="max-w-100" defaultValue={[20, 80]} />
}
```

---

### With Value

### Example

```tsx
import { Slider, SliderValue } from "@/components/ui/slider"

export default function SliderWithValue() {
  return (
    <Slider className="max-w-100" defaultValue={50}>
      <div className="flex justify-between">
        <span className="text-muted-foreground mt-3 text-xs font-medium">
          Opacity
        </span>
        <SliderValue />
      </div>
    </Slider>
  )
}
```

---

### Sonner

Displays a message to the user in a toast.

### Example

```tsx
import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export default function SonnerDemo() {
  return (
    <Button
      onClick={() =>
        toast("Your request has been sent", {
          description: "We'll get back to you as soon as possible",
        })
      }
    >
      Show Toast
    </Button>
  )
}
```

## About

[`Sonner`](https://sonner.emilkowal.ski) is created and maintained by [@emilkowalski\_](https://x.com/emilkowalski_).

## Installation

**Run the following command.**

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/sonner.json
```

**Add Toaster to your app layout.**

```tsx {1,9} title="app/layout.tsx"
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}
```

**Copy and paste the following code into your project.**

**Add Toaster to your app layout.**

```tsx {1,9} title="app/layout.tsx"
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}
```

## Usage

```tsx title="Imports"
import { toast } from "sonner"
```

```tsx title="Toast"
toast("Toast is working!")
```

## Examples

### Promise

### Example

```tsx
import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export default function SonnerPromiseDemo() {
  return (
    <Button
      onClick={() =>
        toast.promise(
          new Promise((resolve) => {
            setTimeout(() => {
              resolve("Request sent")
            }, 2000)
          }),
          {
            loading: "Sending request...",
            success: "Request sent",
          }
        )
      }
    >
      Show Toast
    </Button>
  )
}
```

---

### Action

### Example

```tsx
import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export default function SonnerActionDemo() {
  return (
    <Button
      onClick={() =>
        toast("Your email has been sent", {
          description: "We'll get back to you as soon as possible",
          action: {
            label: "Unsend",
            onClick: () => toast.success("Email unsent"),
          },
        })
      }
    >
      Show Toast
    </Button>
  )
}
```

---

### Rich Colors

### Example

```tsx
import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export default function SonnerRichColorsDemo() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <Button onClick={() => toast.success("Success", { richColors: true })}>
        success
      </Button>
      <Button onClick={() => toast.error("Error", { richColors: true })}>
        error
      </Button>
      <Button onClick={() => toast.warning("Warning", { richColors: true })}>
        warning
      </Button>
      <Button onClick={() => toast.info("Info", { richColors: true })}>
        info
      </Button>
    </div>
  )
}
```

---

### Switch

A toggle control for switching between two states.

### Example

```tsx
import { Switch } from "@/components/ui/switch"

export default function SwitchDemo() {
  return <Switch />
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/switch.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Switch } from "@/components/ui/switch"
```

```tsx title="Anatomy"
<Switch />
```

## Examples

### With Label

### Example

```tsx
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export default function SwitchWithLabel() {
  return (
    <Label className="flex items-center gap-2">
      <Switch />
      Enable notifications
    </Label>
  )
}
```

---

### Disabled

### Example

```tsx
import { Switch } from "@/components/ui/switch"

export default function SwitchDisabled() {
  return <Switch disabled />
}
```

---

### Table

Used to organize and present information in a tabular format.

### Example

```tsx
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const movies = [
  { title: "The Shawshank Redemption", year: 1994, rating: 9.3 },
  { title: "The Godfather", year: 1972, rating: 9.2 },
  { title: "The Dark Knight", year: 2008, rating: 9.0 },
  { title: "The Godfather Part II", year: 1974, rating: 9.0 },
  { title: "12 Angry Men", year: 1957, rating: 9.0 },
  { title: "Schindler's List", year: 1993, rating: 9.0 },
  {
    title: "The Lord of the Rings: The Return of the King",
    year: 2003,
    rating: 9.0,
  },
  { title: "Pulp Fiction", year: 1994, rating: 8.9 },
  {
    title: "The Lord of the Rings: The Fellowship of the Ring",
    year: 2001,
    rating: 8.8,
  },
  { title: "Forrest Gump", year: 1994, rating: 8.8 },
]

export default function TableDemo() {
  return (
    <div className="w-full overflow-hidden rounded-lg border pb-2">
      <Table>
        <TableCaption>Top 10 Movies of All Time</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>Title</TableHead>
            <TableHead className="w-20">Year</TableHead>
            <TableHead className="w-20 text-right">IMDB</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {movies.map((movie) => (
            <TableRow key={movie.title}>
              <TableCell className="py-4 font-medium sm:py-0">
                {movie.title}
              </TableCell>
              <TableCell>{movie.year}</TableCell>
              <TableCell className="text-right">{movie.rating}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/table.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
```

```tsx title="Anatomy"
<Table>
  <TableCaption />
  <TableHeader>
    <TableRow>
      <TableHead />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell />
    </TableRow>
  </TableBody>
</Table>
```

---

### Tabs

Used to organize content into tabbed navigation.

### Example

```tsx
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TabsDemo() {
  return (
    <Tabs className="w-full max-w-96" defaultValue="login">
      <TabsList>
        <TabsTrigger value="login">Login</TabsTrigger>
        <TabsTrigger value="signup">Sign up</TabsTrigger>
      </TabsList>
      <TabsContent value="login">
        <Card>
          <CardHeader>
            <CardTitle>Login</CardTitle>
            <CardDescription>Login to your account to continue</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" placeholder="Email" type="email" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" placeholder="Password" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button className="w-full">Login</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="signup">
        <Card>
          <CardHeader>
            <CardTitle>Sign up</CardTitle>
            <CardDescription>Sign up to create an account</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" placeholder="Email" type="email" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" placeholder="Password" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button className="w-full">Sign up</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/tabs.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
```

```tsx title="Anatomy"
<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</Tabs>
```

## Examples

### Underlined

### Example

export default function TabsUnderline() {
  return (
    <Tabs className="w-full max-w-96" defaultValue="login" variant="underline">
      <TabsList>
        <TabsTrigger value="login">Login</TabsTrigger>
        <TabsTrigger value="signup">Sign up</TabsTrigger>
      </TabsList>
      <TabsContent value="login">
        <Card>
          <CardHeader>
            <CardTitle>Login</CardTitle>
            <CardDescription>Login to your account to continue</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" placeholder="Email" type="email" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" placeholder="Password" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button className="w-full">Login</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="signup">
        <Card>
          <CardHeader>
            <CardTitle>Sign up</CardTitle>
            <CardDescription>Sign up to create an account</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" placeholder="Email" type="email" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" placeholder="Password" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button className="w-full">Sign up</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
```

---

### Disabled

### Example

export default function TabsUnderline() {
  return (
    <Tabs className="w-full max-w-96" defaultValue="login">
      <TabsList>
        <TabsTrigger value="login">Login</TabsTrigger>
        <Tooltip>
          <TooltipTrigger
            className="w-full"
            render={(props) => (
              <div {...props}>
                <TabsTrigger disabled>Sign up</TabsTrigger>
              </div>
            )}
          />
          <TooltipContent className="w-64">
            <span>
              Sign ups are temporarily disabled. Please check back later.
            </span>
          </TooltipContent>
        </Tooltip>
      </TabsList>
      <TabsContent value="login">
        <Card>
          <CardHeader>
            <CardTitle>Login</CardTitle>
            <CardDescription>Login to your account to continue</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" placeholder="Email" type="email" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" placeholder="Password" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button className="w-full">Login</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
```

---

### Textarea

A component that allows users to input long text.

### Example

```tsx
import { Textarea } from "@/components/ui/textarea"

export default function TextareaDemo() {
  return <Textarea className="w-80" placeholder="Enter your message..." />
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/textarea.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Textarea } from "@/components/ui/textarea"
```

```tsx title="Anatomy"
<Textarea />
```

## Examples

### Disabled

### Example

```tsx
import { Textarea } from "@/components/ui/textarea"

export default function TextareaDisabled() {
  return (
    <Textarea className="w-80" placeholder="Enter your message..." disabled />
  )
}
```

---

### Error

### Example

```tsx
import { Textarea } from "@/components/ui/textarea"

export default function TextareaError() {
  return (
    <Textarea
      className="w-80"
      placeholder="Enter your message..."
      aria-invalid
    />
  )
}
```

---

### Toast

Displays a message to the user in a toast.

### Example

```tsx
"use client"

import { useToast } from "@/hooks/use-toast"

import { Button } from "@/components/ui/button"

export default function ToastDemo() {
  const toast = useToast()

return (
    <Button
      onClick={() =>
        toast.add({
          title: "Your request has been sent",
          description: "We'll get back to you as soon as possible",
        })
      }
    >
      Show Toast
    </Button>
  )
}
```

## Installation

**Run the following command.**

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/toast.json
```

**Add to your app layout.**

```tsx {1,8-10} title="app/layout.tsx"
import { ToastProvider } from "@/components/ui/toast"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <ToastProvider>
          <main>{children}</main>
        </ToastProvider>
      </body>
    </html>
  )
}
```

**Copy and paste the following code into your project.**

**Create hook.**

```tsx title="use-toast.tsx"
"use client"

import { Toast } from "@base-ui-components/react/toast"

export const toastManager = Toast.createToastManager()

export const useToast = Toast.useToastManager
```

**Add to your app layout.**

```tsx {1,8-10} title="app/layout.tsx"
import { ToastProvider } from "@/components/ui/toast"

## Examples

### Promise

### Example

```tsx
"use client"

import { useToast } from "@/hooks/use-toast"

import { Button } from "@/components/ui/button"

export default function ToastPromiseDemo() {
  const toast = useToast()

return (
    <Button
      onClick={() =>
        toast.promise(
          new Promise<string>((resolve) => {
            setTimeout(() => {
              resolve("Request sent")
            }, 2000)
          }),
          {
            loading: "Sending request...",
            success: (data: string) => `Success: ${data}`,
            error: (err: Error) => `Error: ${err.message}`,
          }
        )
      }
    >
      Show Toast
    </Button>
  )
}
```

---

### Action

### Example

```tsx
"use client"

import { useToast } from "@/hooks/use-toast"

import { Button } from "@/components/ui/button"

export default function ToastActionDemo() {
  const toast = useToast()

return (
    <Button
      onClick={() => {
        const id = toast.add({
          title: "Your email has been sent",
          description: "We'll get back to you as soon as possible",
          actionProps: {
            children: "Unsend",
            onClick: () => {
              toast.close(id)
              toast.add({
                title: "Email unsent",
                type: "success",
              })
            },
          },
        })
      }}
    >
      Show Toast
    </Button>
  )
}
```

---

### Rich Colors

### Example

```tsx
"use client"

import { useToast } from "@/hooks/use-toast"

import { Button } from "@/components/ui/button"

export default function ToastRichColorsDemo() {
  const toast = useToast()

return (
    <div className="grid grid-cols-2 gap-2">
      <Button
        onClick={() =>
          toast.add({
            title: "Success",
            type: "success",
          })
        }
      >
        success
      </Button>
      <Button
        onClick={() =>
          toast.add({
            title: "Error",
            type: "error",
          })
        }
      >
        error
      </Button>
      <Button
        onClick={() =>
          toast.add({
            title: "Warning",
            type: "warning",
          })
        }
      >
        warning
      </Button>
      <Button
        onClick={() =>
          toast.add({
            title: "Info",
            type: "info",
          })
        }
      >
        info
      </Button>
    </div>
  )
}
```

---

### Toggle

Displays a control to toggle between two states.

### Example

```tsx
import { PinIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Pin">
      <PinIcon />
    </Toggle>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/toggle.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Toggle } from "@/components/ui/toggle"
```

```tsx title="Anatomy"
<Toggle />
```

## Examples

### Sizes

### Example

```tsx
import { PinIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

export default function ToggleSizes() {
  return (
    <div className="flex items-center gap-4">
      <Toggle aria-label="Pin" size="sm">
        <PinIcon />
      </Toggle>
      <Toggle aria-label="Pin" size="default">
        <PinIcon />
      </Toggle>
      <Toggle aria-label="Pin" size="lg">
        <PinIcon />
      </Toggle>
    </div>
  )
}
```

---

### Outline

### Example

```tsx
import { PinIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

export default function ToggleOutline() {
  return (
    <Toggle aria-label="Pin" variant="outline">
      <PinIcon />
    </Toggle>
  )
}
```

---

### Custom Control

### Example

```tsx
"use client"

import { useState } from "react"
import { PinIcon, PinOffIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

export default function ToggleCustomControl() {
  const [isPinned, setIsPinned] = useState(false)

return (
    <Toggle aria-label="Pin" pressed={isPinned} onPressedChange={setIsPinned}>
      {isPinned ? <PinIcon /> : <PinOffIcon />}
    </Toggle>
  )
}
```

---

### Disabled

### Example

```tsx
import { PinIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

export default function ToggleDisabled() {
  return (
    <Toggle aria-label="Pin" disabled>
      <PinIcon />
    </Toggle>
  )
}
```

---

### Toggle Group

A group of toggles for selecting single or multiple options.

### Example

```tsx
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup>
      <Toggle value="left">
        <AlignLeftIcon />
      </Toggle>
      <Toggle value="center">
        <AlignCenterIcon />
      </Toggle>
      <Toggle value="right">
        <AlignRightIcon />
      </Toggle>
    </ToggleGroup>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/toggle-group.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"
```

```tsx title="Anatomy"
<ToggleGroup>
  <Toggle />
</ToggleGroup>
```

## Examples

### Multiple

### Example

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"

export default function ToggleGroupMultiple() {
  return (
    <ToggleGroup toggleMultiple>
      <Toggle value="bold">
        <BoldIcon />
      </Toggle>
      <Toggle value="italic">
        <ItalicIcon />
      </Toggle>
      <Toggle value="underline">
        <UnderlineIcon />
      </Toggle>
    </ToggleGroup>
  )
}
```

---

### Toolbar

Displays a toolbar for user interaction.

### Example

```tsx
"use client"

import { GlobeIcon, LightbulbIcon, SparklesIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverFooter,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"
import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
} from "@/components/ui/toolbar"

const models = [
  {
    label: "Select a model",
    value: null,
  },
  {
    label: "Grok 3",
    value: "grok-3",
  },
  {
    label: "Claude 3.7 Sonnet",
    value: "claude-3.7-sonnet",
  },

{
    label: "GPT-4o",
    value: "gpt-4o",
  },
  {
    label: "04-mini",
    value: "o4-mini",
  },
]

export default function ToolbarDemo() {
  return (
    <Toolbar>
      <ToggleGroup className="border-none bg-transparent p-0" toggleMultiple>
        <ToolbarButton
          size="icon"
          render={
            <Toggle
              className="data-[pressed]:bg-green-950 data-[pressed]:text-green-200"
              aria-label="Show AI thinking"
              value="ai-thinking"
            >
              <LightbulbIcon />
            </Toggle>
          }
        />
        <ToolbarButton
          size="icon"
          render={
            <Toggle
              className="data-[pressed]:bg-blue-950 data-[pressed]:text-blue-200"
              aria-label="Use web search"
              value="web-search"
            >
              <GlobeIcon />
            </Toggle>
          }
        />
      </ToggleGroup>

<Select items={models}>
        <SelectTrigger className="w-40 md:w-52">
          <SelectValue className="truncate" />
        </SelectTrigger>
        <SelectContent className="w-52">
          {models.map((model) => (
            <SelectItem key={model.value} value={model.value}>
              {model.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

<Popover>
        <ToolbarButton
          size="icon"
          variant="outline"
          render={<PopoverTrigger />}
          aria-label="Edit prompt"
        >
          <SparklesIcon />
        </ToolbarButton>
        <PopoverContent className="w-80 space-y-2">
          <PopoverHeader>
            <PopoverTitle>Edit Prompt Template</PopoverTitle>
            <PopoverDescription>
              Customize the system prompt used for AI generation
            </PopoverDescription>
          </PopoverHeader>
          <Textarea
            className="resize-none"
            defaultValue="You are a helpful AI assistant. Your task is to help the user with their writing needs. Be concise, accurate, and helpful."
          />
          <PopoverFooter>
            <PopoverClose
              render={<Button variant="outline">Save Prompt</Button>}
            />
          </PopoverFooter>
        </PopoverContent>
      </Popover>
    </Toolbar>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/toolbar.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarInput,
  ToolbarLink,
  ToolbarSeparator,
} from "@/components/ui/toolbar"
```

```tsx title="Anatomy"
<Toolbar>
  <ToolbarButton />
  <ToolbarLink />
  <ToolbarSeparator />
  <ToolbarGroup>
    <ToolbarButton />
    <ToolbarButton />
  <ToolbarGroup />
  <ToolbarInput />
</Toolbar>
```

## Examples

### File Explorer

### Example

```tsx
"use client"

import {
  LayoutGridIcon,
  LayoutListIcon,
  MoreHorizontalIcon,
  SearchIcon,
  ShareIcon,
} from "lucide-react"

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarInput,
  ToolbarSeparator,
} from "@/components/ui/toolbar"

export default function ToolbarFileExplorerDemo() {
  return (
    <Toolbar>
      <ToggleGroup className="border-none bg-transparent p-0">
        <ToolbarButton
          size="icon"
          render={
            <Toggle aria-label="Grid view" value="grid-view">
              <LayoutGridIcon />
            </Toggle>
          }
        />
        <ToolbarButton
          size="icon"
          render={
            <Toggle aria-label="List view" value="list-view">
              <LayoutListIcon />
            </Toggle>
          }
        />
      </ToggleGroup>

<ToolbarGroup>
        <ToolbarButton size="icon" variant="outline">
          <ShareIcon />
        </ToolbarButton>
        <DropdownMenu>
          <ToolbarButton
            size="icon"
            variant="outline"
            render={<DropdownMenuTrigger />}
          >
            <MoreHorizontalIcon />
          </ToolbarButton>
          <DropdownMenuContent>
            <DropdownMenuItem>New File</DropdownMenuItem>
            <DropdownMenuItem>New Folder</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Open in New Tab</DropdownMenuItem>
            <DropdownMenuItem>Get Info</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </ToolbarGroup>
      <ToolbarSeparator />

<ToolbarInput
        render={<Input placeholder="Search" leadingIcon={<SearchIcon />} />}
      />
    </Toolbar>
  )
}
```

---

### Tooltip

Used to provide context or hints for elements.

### Example

```tsx
import { Icons } from "@/components/icons"
import { buttonVariants } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger
        className={buttonVariants({ variant: "outline", size: "icon" })}
      >
        <Icons.twitter />
      </TooltipTrigger>
      <TooltipContent>
        <span>
          Follow me{" "}
          <a
            className="font-medium"
            href="https://x.com/borabalogluu"
            target="_blank"
          >
            @borabalogluu
          </a>
        </span>
      </TooltipContent>
    </Tooltip>
  )
}
```

## Installation

```bash title="Terminal"
npx shadcn@latest add https://9ui.dev/r/tooltip.json
```

**Copy and paste the following code into your project.**

## Usage

```tsx title="Imports"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
```

```tsx title="Anatomy"
<Tooltip>
  <TooltipTrigger />
  <TooltipContent />
</Tooltip>
```

## Examples

### Custom Position

### Example

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

const positions = ["top", "right", "bottom", "left"] as const

export default function TooltipCustomPosition() {
  return (
    <div className="grid grid-cols-2 gap-2">
      {positions.map((position) => (
        <Tooltip key={position}>
          <TooltipTrigger className="w-full rounded-md border px-2 py-1.5 text-sm">
            {position}
          </TooltipTrigger>
          <TooltipContent className="max-w-56" side={position}>
            <span>This tooltip is positioned at the {position} side.</span>
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}
```

---

Invited Members