### Install Drawer Component using pnpm

Source: https://basecn.dev/docs/components/drawer

This command installs the Drawer component using pnpm. It fetches the component directly from the provided URL, assuming you are using the default registry setup.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/drawer.json
```

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

### Install Toggle Component (shadcn/ui)

Source: https://basecn.dev/docs/components/toggle

This command installs the Toggle component using the shadcn/ui CLI. It fetches the necessary files from the provided URL or a namespaced registry. Ensure you have pnpm installed to use this command.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/toggle.json
```

```bash
pnpm dlx shadcn@latest add @basecn/toggle
```

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

### Install shadcn/ui Switch Component

Source: https://basecn.dev/docs/components/switch

This snippet shows how to install the shadcn/ui Switch component using pnpm. It covers both the default installation and installation for namespaced registries. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/switch.json
```

```bash
pnpm dlx shadcn@latest add @basecn/switch
```

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

### Install Alert Dialog using pnpm

Source: https://basecn.dev/docs/components/alert-dialog

This command installs the Alert Dialog component from the shadcn/ui registry using pnpm. It assumes you are using the default registry. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/alert-dialog.json
```

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

### Install Sidebar Component using pnpm

Source: https://basecn.dev/docs/components/sidebar

This command installs the Sidebar component using pnpm and the provided URL. It's a straightforward way to add the component to your project.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/sidebar.json
```

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

### Install Aspect Ratio Component (Namespaced Registry)

Source: https://basecn.dev/docs/components/aspect-ratio

Installs the Aspect Ratio component using pnpm for a namespaced registry. This is an alternative installation method if you are using a namespaced registry setup.

```bash
pnpm dlx shadcn@latest add @basecn/aspect-ratio
```

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

### Install Drawer Component using Namespaced Registry with pnpm

Source: https://basecn.dev/docs/components/drawer

This command installs the Drawer component using pnpm when a namespaced registry is configured. It specifies the component under the '@basecn' namespace.

```bash
pnpm dlx shadcn@latest add @basecn/drawer
```

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

### Install Alert Dialog with Namespaced Registry using pnpm

Source: https://basecn.dev/docs/components/alert-dialog

This command installs the Alert Dialog component using a namespaced registry with pnpm. This is useful if you are using a custom or organization-specific registry. Ensure pnpm is installed.

```bash
pnpm dlx shadcn@latest add @basecn/alert-dialog
```

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

### Switch Component Examples for shadcn/ui

Source: https://basecn.dev/docs/components/switch

Demonstrates various examples of the Switch component from shadcn/ui. Includes disabled state, color variations (blue, green, red), usage with a thumb icon, and integration within a form.

```jsx
// Disabled Switch Example
<Switch disabled />
```

```jsx
// Color Variations (Default, Blue, Green, Red)
<Switch />
<Switch color="blue" />
<Switch color="green" />
<Switch color="red" />
```

```jsx
// Switch with Thumb Icon Example
<Switch thumbIcon={<Icon />} />
```

```jsx
// Switch within a Form Example
<Form>
  <FormField
    control={form.control}
    name="marketingEmails"
    render={({ field }) => (
      <FormItem>
        <FormControl>
          <Switch checked={field.value} onCheckedChange={field.onChange} />
        </FormControl>
        <FormLabel>Marketing emails</FormLabel>
        <FormDescription>Receive emails about new products, features, and more.</FormDescription>
      </FormItem>
    )}
  />
  <FormField
    control={form.control}
    name="securityEmails"
    render={({ field }) => (
      <FormItem>
        <FormControl>
          <Switch checked={field.value} onCheckedChange={field.onChange} />
        </FormControl>
        <FormLabel>Security emails</FormLabel>
        <FormDescription>Receive emails about your account security.</FormDescription>
      </FormItem>
    )}
  />
  <Button type="submit">Submit</Button>
</Form>
```

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

### Install Base UI Button Component using Namespaced Registry

Source: https://basecn.dev/docs/get-started/namespaced-registry

This command demonstrates how to install a specific component, like the 'button' component from Base UI, using the configured namespaced registry. It leverages the shadcn-cli to fetch and integrate the component into your project.

```bash
npx shadcn@latest add @basecn/button
```

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

### Install Sidebar Component using pnpm with Namespaced Registry

Source: https://basecn.dev/docs/components/sidebar

This command installs the Sidebar component using pnpm, specifically for projects utilizing a namespaced registry. It references the component under the '@basecn' scope.

```bash
pnpm dlx shadcn@latest add @basecn/sidebar
```

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

### Install Command Component with Namespaced Registry using pnpm

Source: https://basecn.dev/docs/components/command

This snippet demonstrates installing the Command component from a namespaced registry using pnpm and the shadcn CLI. This is an alternative installation method for users with a namespaced registry setup.

```bash
pnpm dlx shadcn@latest add @basecn/command
```

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

### Install Autocomplete Component with shadcn/ui

Source: https://basecn.dev/docs/components/autocomplete

Instructions for installing the Autocomplete component using the shadcn/ui CLI. Supports various package managers and namespaced registries.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/autocomplete.json
```

```bash
pnpm dlx shadcn@latest add @basecn/autocomplete
```

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

### Install Label Component using pnpm

Source: https://basecn.dev/docs/components/label

This snippet demonstrates how to install the 'Label' component using pnpm, a package manager. It shows the command for direct installation from a URL and an alternative for namespaced registries.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/label.json
```

```bash
pnpm dlx shadcn@latest add @basecn/label
```

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

### Install Resizable Component using pnpm

Source: https://basecn.dev/docs/components/resizable

Installs the Resizable component using pnpm. This command fetches the component from the official shadcn/ui registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/resizable.json
```

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

### Install Sheet Component using pnpm

Source: https://basecn.dev/docs/components/sheet

This command installs the Sheet component using pnpm, leveraging the shadcn-ui CLI. It fetches the component from the specified URL, which is compatible with Base UI's setup.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/sheet.json
```

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

### Install Base UI Context Menu with Namespaced Registry

Source: https://basecn.dev/docs/components/context-menu

Installs the Context Menu component from a namespaced registry using pnpm. This is an alternative installation method for users with a configured namespaced registry.

```bash
pnpm dlx shadcn@latest add @basecn/context-menu
```

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

### Install Hover Card with shadcn/ui and Base UI

Source: https://basecn.dev/docs/components/hover-card

Instructions for installing the Hover Card component using the shadcn/ui CLI with Base UI. This command-line interface simplifies the integration process into your project, supporting both default and namespaced registry setups.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/hover-card.json
```

```bash
pnpm dlx shadcn@latest add @basecn/hover-card
```

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

### Install Aspect Ratio Component (pnpm)

Source: https://basecn.dev/docs/components/aspect-ratio

Installs the Aspect Ratio component using pnpm. This command adds the component from the Base UI registry. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/aspect-ratio.json
```

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

### Install Item Component with Namespaced Registry using pnpm

Source: https://basecn.dev/docs/components/item

Installation instructions for the 'Item' component using pnpm with a namespaced registry. This is an alternative installation method if you are using a specific namespace for your registry. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add @basecn/item
```

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

### Install Spinner Component with Namespaced Registry

Source: https://basecn.dev/docs/components/spinner

Installs the Spinner component using pnpm, assuming a namespaced registry setup. This command adds the component from the @basecn namespace.

```bash
pnpm dlx shadcn@latest add @basecn/spinner
```

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

### Install Namespaced Resizable Component using pnpm

Source: https://basecn.dev/docs/components/resizable

Installs the Resizable component using pnpm from a namespaced registry. This is an alternative installation method if using a custom or namespaced registry.

```bash
pnpm dlx shadcn@latest add @basecn/resizable
```

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

### Install Base UI Menubar Component

Source: https://basecn.dev/docs/components/menubar

This snippet shows how to install the Base UI Menubar component using pnpm. It also provides an alternative command for users utilizing a namespaced registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/menubar.json
```

```bash
pnpm dlx shadcn@latest add @basecn/menubar
```

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

### Install Base UI Checkbox Component

Source: https://basecn.dev/docs/components/checkbox

Instructions for installing the Base UI Checkbox component using pnpm. Supports both direct URLs and namespaced registry installations.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/checkbox.json
```

```bash
pnpm dlx shadcn@latest add @basecn/checkbox
```

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

### Install Pagination Component with pnpm

Source: https://basecn.dev/docs/components/pagination

This command installs the Pagination component using pnpm and shadcn-ui. It fetches the component from the specified URL.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/pagination.json
```

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

### Install Input Group Component

Source: https://basecn.dev/docs/components/input-group

Instructions for installing the Input Group component using pnpm, npm, yarn, or bun. It also shows how to add it if using a namespaced registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/input-group.json
```

```bash
pnpm dlx shadcn@latest add @basecn/input-group
```

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

### Install Item Component using pnpm

Source: https://basecn.dev/docs/components/item

Installation instructions for the 'Item' component using pnpm. This command fetches the latest version of shadcn and adds the Item component from the specified URL. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/item.json
```

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

### Install Table Component with pnpm

Source: https://basecn.dev/docs/components/table

Installs the responsive table component using pnpm. Supports both direct URL installation and namespaced registry installation.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/table.json
```

```bash
pnpm dlx shadcn@latest add @basecn/table
```

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

### Install Tooltip Component (pnpm)

Source: https://basecn.dev/docs/components/tooltip

This command installs the Tooltip component using pnpm. It fetches the component configuration from a specified URL, enabling its use in your project.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/tooltip.json
```

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

### Configure Namespaced Registry for Base UI Components

Source: https://basecn.dev/docs/get-started/namespaced-registry

This configuration allows you to install components from the Base UI registry using a simplified format. It modifies your `components.json` file to define the registry path for the `@basecn` alias. This avoids the need for longer, explicit registry URLs.

```json
{
  "registries": {
    "@basecn": "https://basecn.dev/r/{name}.json"
  }
}
```

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

### Install Scroll Area with shadcn/ui and Base UI (pnpm)

Source: https://basecn.dev/docs/components/scroll-area

Installs the Scroll Area component using pnpm with the shadcn/ui CLI. This command fetches the necessary configuration from the Base UI registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/scroll-area.json
```

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

### Install Sonner Toast Component using pnpm

Source: https://basecn.dev/docs/components/sonner

This snippet shows how to install the Sonner toast component using the pnpm package manager. It utilizes shadcn-ui's add command to fetch the component from the specified registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/sonner.json
```

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

### Install Select Component (pnpm)

Source: https://basecn.dev/docs/components/select

Installs the Select component using pnpm. This command downloads and integrates the necessary files for the Select component into your project.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/select.json
```

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

### Install Command Component using pnpm

Source: https://basecn.dev/docs/components/command

This snippet shows how to install the Command component using pnpm and the shadcn CLI. It fetches the component from a specific registry URL.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/command.json
```

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

### Install Spinner Component using pnpm

Source: https://basecn.dev/docs/components/spinner

Installs the Spinner component using pnpm with the shadcn-ui CLI. This command fetches the necessary files from the basecn.dev registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/spinner.json
```

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

### Install Separator (Extended) using shadcn/ui

Source: https://basecn.dev/docs/components/separator-extended

Instructions for installing the Separator (Extended) component using the shadcn/ui CLI. This command fetches the component from the Base UI registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/separator-extended.json
```

```bash
pnpm dlx shadcn@latest add @basecn/separator-extended
```

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

### Install Select Component with Namespaced Registry (pnpm)

Source: https://basecn.dev/docs/components/select

Installs the Select component using pnpm with a namespaced registry. This is an alternative installation method for projects using specific registry configurations.

```bash
pnpm dlx shadcn@latest add @basecn/select
```

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

### Install Toggle Group Component

Source: https://basecn.dev/docs/components/toggle-group

This snippet shows how to install the Toggle Group component using different package managers. It provides commands for direct installation and for installations using a namespaced registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/toggle-group.json
```

```bash
pnpm dlx shadcn@latest add @basecn/toggle-group
```

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

### Install Tooltip Component with Namespaced Registry (pnpm)

Source: https://basecn.dev/docs/components/tooltip

This command installs the Tooltip component using pnpm with a namespaced registry. It's an alternative installation method for projects using a specific registry structure.

```bash
pnpm dlx shadcn@latest add @basecn/tooltip
```

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

### Install shadcn/ui Slider Component

Source: https://basecn.dev/docs/components/slider

Instructions for installing the shadcn/ui Slider component using package managers like pnpm, npm, yarn, or bun. It shows commands for both direct installation and installation with a namespaced registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/slider.json
```

```bash
pnpm dlx shadcn@latest add @basecn/slider
```

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

### Install Calendar Component using pnpm

Source: https://basecn.dev/docs/components/calendar

Instructions for installing the Calendar component using pnpm, with options for direct URL or namespaced registry installation. This command adds the component to your project, making it available for use.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/calendar.json
```

```bash
pnpm dlx shadcn@latest add @basecn/calendar
```

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

### Install Base UI Accordion using pnpm

Source: https://basecn.dev/docs/components/accordion

This command installs the Accordion component from the Base UI registry using pnpm. It assumes you are using the default registry. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/accordion.json
```

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

### Install Base UI Accordion with Namespaced Registry using pnpm

Source: https://basecn.dev/docs/components/accordion

This command installs the Accordion component from a namespaced registry using pnpm. It is an alternative installation method if you are using a custom or namespaced registry. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add @basecn/accordion
```

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

### Item Component - Link Example

Source: https://basecn.dev/docs/components/item

Demonstrates the 'Item' component used for links. This example includes two types of links: one for documentation and another for an external resource that opens in a new tab with security attributes.

```jsx
preview code
Visit our documentation
Learn how to get started with our components.
External resource
Opens in a new tab with security attributes.
```

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

### Item Component - Group Example

Source: https://basecn.dev/docs/components/item

Demonstrates grouping multiple 'Item' components together. This example shows a list of users, each with an avatar, name, and email address, presented as a cohesive group.

```jsx
preview code
![ ](https://github.com/shadcn.png)
shadcn
shadcn@vercel.com
![ ](https://github.com/maxleiter.png)
maxleiter
maxleiter@vercel.com
![ ](https://github.com/evilrabbit.png)
evilrabbit
evilrabbit@vercel.com
```

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

### Install Progress Component using pnpm

Source: https://basecn.dev/docs/components/progress

Installs the Progress component using the pnpm package manager with the shadcn-ui CLI. This command fetches the necessary files from the specified registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/progress.json
```

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

### Item Component - Header Example

Source: https://basecn.dev/docs/components/item

Shows how to use the 'Item' component as a header, potentially for sections or pages. This example includes multiple image elements, likely representing different versions or sizes of a visual element.

```jsx
preview code
![v0-1.5-sm](https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop)
v0-1.5-sm
Everyday tasks and UI generation.
![v0-1.5-lg](https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop)
v0-1.5-lg
Advanced thinking or reasoning.
![v0-2.0-mini](https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop)
v0-2.0-mini
Open Source model for everyone.
```

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

### Install Base UI Form Components

Source: https://basecn.dev/docs/components/form-with-react-hook-form

Installs the form components from Base UI using pnpm. This command fetches the necessary package from the official registry or a namespaced registry if configured.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/form.json
```

```bash
pnpm dlx shadcn@latest add @basecn/form
```

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

### Install Progress Component with Namespaced Registry

Source: https://basecn.dev/docs/components/progress

Installs the Progress component using the pnpm package manager, targeting a namespaced registry. This is an alternative installation method for specific registry configurations.

```bash
pnpm dlx shadcn@latest add @basecn/progress
```

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

### Install Breadcrumb Component using pnpm

Source: https://basecn.dev/docs/components/breadcrumb

Installs the Breadcrumb component using pnpm. This is the recommended installation method for new projects utilizing shadcn/ui and Base UI.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/breadcrumb.json
```

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

### Item Component - Image Example

Source: https://basecn.dev/docs/components/item

Illustrates the integration of images within the 'Item' component. This example displays multiple image-based items, each with a title, description, and associated metadata like duration.

```jsx
preview code
![Midnight City Lights](https://avatar.vercel.sh/Midnight City Lights)
Midnight City Lights - Electric Nights
Neon Dreams 3:45
![Coffee Shop Conversations](https://avatar.vercel.sh/Coffee Shop Conversations)
Coffee Shop Conversations - Urban Stories
The Morning Brew 4:05
![Digital Rain](https://avatar.vercel.sh/Digital Rain)
Digital Rain - Binary Beats
Cyber Symphony 3:30
```

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

### Install Navigation Menu Component (pnpm)

Source: https://basecn.dev/docs/components/navigation-menu

Installs the Navigation Menu component using pnpm, a package manager. This command fetches the component from the shadcn registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/navigation-menu.json
```

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

### Install Tabs Component using pnpm

Source: https://basecn.dev/docs/components/tabs

Installs the Tabs component using pnpm, suitable for projects using the default shadcn/ui registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/tabs.json
```

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

### Item Component - Icon Example

Source: https://basecn.dev/docs/components/item

Demonstrates how to incorporate an icon within the 'Item' component. This example shows a security alert with an associated icon, indicating a new login from an unknown device.

```jsx
preview code
Security Alert
New login detected from unknown device.
Review
```

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

### Vertical Resizable Panel Layout Example

Source: https://basecn.dev/docs/components/resizable

Demonstrates a vertical layout for resizable panels. This example shows how to structure the components for a top and bottom resizable section.

```jsx
import { Resizable } from "@radix-ui/react-resizable";

function VerticalExample() {
  return (
    <Resizable.Root direction="vertical">
      <Resizable.Panel defaultSize={30}>
        <div className="h-full flex items-center justify-center">Header</div>
      </Resizable.Panel>
      <Resizable.Handle />
      <Resizable.Panel>
        <div className="h-full flex items-center justify-center">Content</div>
      </Resizable.Panel>
    </Resizable.Root>
  );
}
```

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

### Install Card Component using pnpm

Source: https://basecn.dev/docs/components/card

Installs the Card component using the shadcn/ui CLI with pnpm. This is the recommended method for adding components to your project.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/card.json
```

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

### Input Group with Spinner Example

Source: https://basecn.dev/docs/components/input-group

Example of using the Input Group component to display a loading spinner with text.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-2 animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
<span>Saving... Please wait...</span>
```

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

### Default Avatar Example

Source: https://basecn.dev/docs/components/avatar

Demonstrates the default rendering of the Avatar component. This example shows the basic usage without any specific props or configurations.

```javascript
import { Avatar, AvatarFallback } from "@/components/ui/avatar"

```

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

### Install Namespaced Card Component using pnpm

Source: https://basecn.dev/docs/components/card

Installs the Card component from a namespaced registry using the shadcn/ui CLI with pnpm. This is an alternative installation method if you are using a namespaced registry.

```bash
pnpm dlx shadcn@latest add @basecn/card
```

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

### Separator (Extended) - Default Example

Source: https://basecn.dev/docs/components/separator-extended

Example demonstrating the default usage of the Separator (Extended) component, visually separating content.

```jsx
import { Separator } from "@basecn/separator-extended";

function App() {
  return (
    <div>
      <p>Content Above</p>
      <Separator />
      <p>Content Below</p>
    </div>
  );
}
```

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

### Install Namespaced Pagination Component with pnpm

Source: https://basecn.dev/docs/components/pagination

This command installs the Pagination component using pnpm and shadcn-ui from a namespaced registry. It is used when the component is available under a specific scope.

```bash
pnpm dlx shadcn@latest add @basecn/pagination
```

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

### Install Textarea Component using pnpm

Source: https://basecn.dev/docs/components/textarea

This snippet shows how to install the Textarea component using pnpm's dlx command. It fetches the component from a specific URL or a namespaced registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/textarea.json
```

```bash
pnpm dlx shadcn@latest add @basecn/textarea
```

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

### Install Base UI Context Menu using pnpm

Source: https://basecn.dev/docs/components/context-menu

Installs the Context Menu component from the Base UI registry using pnpm. This command fetches and adds the necessary files for the component.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/context-menu.json
```

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

### Install Base UI Dropdown Menu (pnpm)

Source: https://basecn.dev/docs/components/dropdown-menu

Installs the Base UI Dropdown Menu component using pnpm. It provides the command to add the component from the official repository or a namespaced registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/dropdown-menu.json
```

```bash
pnpm dlx shadcn@latest add @basecn/dropdown-menu
```

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

### Install Popover Component using pnpm

Source: https://basecn.dev/docs/components/popover

This snippet shows how to install the Popover component using pnpm with the shadcn CLI. It adds the component from the specified URL or a namespaced registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/popover.json
```

```bash
pnpm dlx shadcn@latest add @basecn/popover
```

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

### Install Sonner Toast Component with Namespaced Registry

Source: https://basecn.dev/docs/components/sonner

This snippet demonstrates installing the Sonner toast component when using a namespaced registry. It specifies the package name as '@basecn/sonner' for installation.

```bash
pnpm dlx shadcn@latest add @basecn/sonner
```

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

### Resizable Panel Handle Example

Source: https://basecn.dev/docs/components/resizable

Illustrates the usage of a Resizable Handle component, which allows users to interactively resize adjacent panels. This example is shown within a sidebar content context.

```jsx
import { Resizable } from "@radix-ui/react-resizable";

function HandleExample() {
  return (
    <div className="flex h-screen">
      <Resizable.Panel defaultSize={20} minSize={10} maxSize={30}>
        <div className="h-full flex items-center justify-center">Sidebar Content</div>
      </Resizable.Panel>
      <Resizable.Handle />
      <Resizable.Panel>
        <div className="h-full flex items-center justify-center">Main Content</div>
      </Resizable.Panel>
    </div>
  );
}
```

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

### Install Avatar Component with Namespaced Registry

Source: https://basecn.dev/docs/components/avatar

Installs the Avatar component using pnpm, assuming a namespaced registry configuration. This is an alternative installation method for projects using specific registry setups.

```bash
pnpm dlx shadcn@latest add @basecn/avatar
```

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

### Common Migration Steps from Radix UI to Base UI

Source: https://basecn.dev/docs/components/item

Outlines the general migration patterns applicable to all components when transitioning from Radix UI to Base UI. Reviewing these common steps is recommended before addressing component-specific changes.

```markdown
All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns. Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.
```

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

### Install Carousel Component using pnpm

Source: https://basecn.dev/docs/components/carousel

This command installs the Carousel component from the Base UI registry using pnpm. It fetches the necessary files to integrate the carousel functionality into your project.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/carousel.json
```

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

### Install Scroll Area with Namespaced Registry (pnpm)

Source: https://basecn.dev/docs/components/scroll-area

Installs the Scroll Area component using pnpm, targeting a namespaced registry for Base UI components. This is an alternative installation method for projects using namespaced registries.

```bash
pnpm dlx shadcn@latest add @basecn/scroll-area
```

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

### Install Base UI Field Component with Namespaced Registry

Source: https://basecn.dev/docs/components/field

This snippet shows how to install the Base UI Field component using a namespaced registry with pnpm. This is an alternative installation method for specific registry setups.

```bash
pnpm dlx shadcn@latest add @basecn/field
```

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

### Install Base UI Button Component

Source: https://basecn.dev/docs/components/button

Instructions for installing the Base UI Button component using different package managers like pnpm, npm, yarn, or bun. It also shows how to use a namespaced registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/button.json
```

```bash
pnpm dlx shadcn@latest add @basecn/button
```

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

### Install Namespaced Collapsible Component using pnpm

Source: https://basecn.dev/docs/components/collapsible

Installs the Collapsible component from a namespaced registry using pnpm. This is an alternative installation method if you are using a namespaced registry. Ensure you have pnpm installed and the namespaced registry configured.

```bash
pnpm dlx shadcn@latest add @basecn/collapsible
```

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

### Install Kbd Component with shadcn/ui

Source: https://basecn.dev/docs/components/kbd

Installs the Kbd component using the shadcn/ui CLI. This command fetches the necessary files for the Kbd component and any associated dependencies into your project. Supports both default and namespaced registries.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/kbd.json
```

```bash
pnpm dlx shadcn@latest add @basecn/kbd
```

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

### Install Collapsible Component using pnpm

Source: https://basecn.dev/docs/components/collapsible

Installs the Collapsible component from the shadcn/ui registry using pnpm. This command fetches and adds the necessary files for the component to your project. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/collapsible.json
```

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

### Input Group with Icon Example

Source: https://basecn.dev/docs/components/input-group

Demonstrates how to use the Input Group component with an icon.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera"><path d="M14.5 4h-4.928a2 2 0 0 0-1.525.793l-2.024 2.456A2 2 0 0 1 5.073 7.793l-1.927.455c-.39.09-.76.21-1.111.353a2 2 0 0 0-1.408.944l-2.031 2.708a2 2 0 0 0 .717 2.704l1.777.946a2 2 0 0 1 1.114 1.314l.298 1.562a2 2 0 0 0 1.978 1.642l1.342.072a2 2 0 0 1 1.897 1.484l.688 1.376a2 2 0 0 0 1.913 1.164h3.434a2 2 0 0 0 1.913-1.164l.688-1.376a2 2 0 0 1 1.897-1.484l1.342-.072a2 2 0 0 0 1.978-1.642l.298-1.562a2 2 0 0 1 1.114-1.314l1.777-.946a2 2 0 0 0 .717-2.704l-2.031-2.708a2 2 0 0 0-1.408-.944l-1.111-.353z"></path><circle cx="12" cy="12" r="3"></circle></svg>
<input placeholder="https:// .com" />
```

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

### Combobox with Icon Example - Base UI

Source: https://basecn.dev/docs/components/combobox

Demonstrates how to implement the Combobox component with icons using Base UI. This example showcases the visual integration of icons within the combobox suggestions.

```jsx
import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption,
  ComboboxPopover,
} from "@reach/combobox";
import "@reach/combobox/styles.css";

function Example() {
  const items = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
  ];

  return (
    <Combobox>
      <ComboboxInput placeholder="Select a fruit" />
      <ComboboxPopover>
        <ComboboxList>
          {items.map((item) => (
            <ComboboxOption key={item.value} value={item.label} />
          ))}
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
}

export default Example;
```

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

### Install Carousel Component with Namespaced Registry

Source: https://basecn.dev/docs/components/carousel

This command installs the Carousel component using a namespaced registry, specifically @basecn/carousel, via pnpm. This is an alternative installation method for projects utilizing namespaced registries.

```bash
pnpm dlx shadcn@latest add @basecn/carousel
```

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

### Input Group with Text Example

Source: https://basecn.dev/docs/components/input-group

Shows how to use the Input Group component with static text, such as currency symbols or domain names.

```html
$ USD
<input placeholder="120 characters left" />
```

```html
@company.com
<input placeholder="https:// .com" />
```

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

### Separator (Extended) - Dotted Example

Source: https://basecn.dev/docs/components/separator-extended

Example demonstrating the dotted style of the Separator (Extended) component for content separation.

```jsx
import { Separator } from "@basecn/separator-extended";

function App() {
  return (
    <div>
      <p>Content Above</p>
      <Separator variant="dotted" />
      <p>Content Below</p>
    </div>
  );
}
```

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

### Separator (Extended) - Dashed Example

Source: https://basecn.dev/docs/components/separator-extended

Example showcasing the dashed style of the Separator (Extended) component for content separation.

```jsx
import { Separator } from "@basecn/separator-extended";

function App() {
  return (
    <div>
      <p>Content Above</p>
      <Separator variant="dashed" />
      <p>Content Below</p>
    </div>
  );
}
```

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

### Separator (Extended) - Double Example

Source: https://basecn.dev/docs/components/separator-extended

Example illustrating the double line style of the Separator (Extended) component for content separation.

```jsx
import { Separator } from "@basecn/separator-extended";

function App() {
  return (
    <div>
      <p>Content Above</p>
      <Separator variant="double" />
      <p>Content Below</p>
    </div>
  );
}
```

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

### Install Combobox (Base UI) using pnpm

Source: https://basecn.dev/docs/components/combobox-baseui

Instructions for installing the Base UI Combobox component using pnpm. This command adds the combobox to your project, assuming you are using the default registry.

```bash
pnpm dlx shadcn@latest add https://basecn.dev/r/combobox.json
```

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

### Input Group with Custom Input Example

Source: https://basecn.dev/docs/components/input-group

Example of a custom input field within the Input Group component, possibly for form submission.

```html
<input placeholder="Custom input" />
<button>Submit</button>
```

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

### Input Group with Button Example

Source: https://basecn.dev/docs/components/input-group

Demonstrates integrating a button within the Input Group for actions like search.

```html
<input placeholder="https:// " />
<button>Search</button>
```

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

### Listen to Dropdown Menu Item Clicks (Radix UI vs. Base UI)

Source: https://basecn.dev/docs/components/dropdown-menu

Demonstrates how to listen for item clicks in a dropdown menu. It shows the difference in implementation between Radix UI (using `onSelect`) and Base UI (using `onClick`).

```jsx
import { DropdownMenu, DropdownMenuItem } from "@radix-ui/react-dropdown-menu";

<DropdownMenu>
  <DropdownMenuItem onSelect={() => console.log("Profile")}>
    Profile
  </DropdownMenuItem>
  <DropdownMenuItem onSelect={() => console.log("Billing")}>
    Billing
  </DropdownMenuItem>
  <DropdownMenuItem onSelect={() => console.log("Team")}>
    Team
  </DropdownMenuItem>
  <DropdownMenuItem onSelect={() => console.log("Subscription")}>
    Subscription
  </DropdownMenuItem>
</DropdownMenu>
```

```jsx
import { DropdownMenu, DropdownMenuItem } from "baseui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuItem onClick={() => console.log("Profile")}>
    Profile
  </DropdownMenuItem>
  <DropdownMenuItem onClick={() => console.log("Billing")}>
    Billing
  </DropdownMenuItem>
  <DropdownMenuItem onClick={() => console.log("Team")}>
    Team
  </DropdownMenuItem>
  <DropdownMenuItem onClick={() => console.log("Subscription")}>
    Subscription
  </DropdownMenuItem>
</DropdownMenu>
```

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

### Install Tabs Component with Namespaced Registry using pnpm

Source: https://basecn.dev/docs/components/tabs

Installs the Tabs component using pnpm for projects utilizing a namespaced registry, specifically @basecn/tabs.

```bash
pnpm dlx shadcn@latest add @basecn/tabs
```

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

### Combobox with Form Example - Base UI

Source: https://basecn.dev/docs/components/combobox

Illustrates integrating the Combobox component within a form using Base UI, specifically for selecting a language. This example shows how to manage the combobox's state within a form context.

```jsx
import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption,
  ComboboxPopover,
} from "@reach/combobox";
import "@reach/combobox/styles.css";
import React, { useState } from "react";

function LanguageSelect() {
  const languages = {
    English: "en",
    French: "fr",
    German: "de",
    Spanish: "es",
    Portuguese: "pt",
    Russian: "ru",
    Japanese: "ja",
    Korean: "ko",
    Chinese: "zh",
  };

  const [language, setLanguage] = useState("English");

  const handleSelect = (value) => {
    setLanguage(value);
  };

  return (
    <form>
      <label htmlFor="language">Language</label>
      <Combobox onSelect={handleSelect} aria-labelledby="language">
        <ComboboxInput id="language" name="language" value={language} />
        <ComboboxPopover>
          <ComboboxList>
            {Object.keys(languages).map((key) => (
              <ComboboxOption key={languages[key]} value={key} />
            ))}
          </ComboboxList>
        </ComboboxPopover>
      </Combobox>
      <button type="submit">Submit</button>
    </form>
  );
}

export default LanguageSelect;
```