### Install Badge Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/badge.mdx

Command to install the Badge component. This is the initial setup step.

```bash
npx shadcn-ui@latest add badge
```

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

### Install Separator Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/separator.mdx

Install the Separator component using the provided command. This is the initial setup step before using the component in your project.

```bash
npm install @base-ui/react @base-ui/components
```

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

### Install Sonner Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/sonner.mdx

Install the Sonner component using the provided command. This is the initial setup step for using the component.

```bash
npm install sonner
# or
yarn add sonner
# or
pnpm add sonner
```

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

### Install Pagination Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/pagination.mdx

Use this command to install the pagination component. Ensure you have the base components installed.

```bash
npx shadcn-ui@latest add pagination
```

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

### Install Alert Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/alert.mdx

Use this command to install the Alert component. Ensure you have the basecn CLI installed.

```bash
npx shadcn-ui@latest add alert
```

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

### Install Drawer Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/drawer.mdx

Use this command to install the Drawer component. Ensure you have the basecn CLI installed.

```bash
npx shadcn-ui@latest add drawer
```

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

### Install Calendar Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/calendar.mdx

Use this command to install the Calendar component. Ensure you have the basecn CLI installed.

```bash
npx shadcn-ui@latest add calendar
```

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

### Install Menubar Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/menubar.mdx

Use this command to install the Menubar component.

```bash
npm install @base-ui/react@latest
npm install @base-ui/react-icons@latest
```

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

### Install Context Menu Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/context-menu.mdx

Use this command to install the context-menu component.

```bash
npm install @base-ui/react
# or
yarn add @base-ui/react
```

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

### Install Drawer Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/drawer-base.mdx

Use this command to install the Drawer component. Ensure you have the Base UI CLI installed.

```bash
npx @base-ui/cli component add drawer-base
```

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

### Install Dropdown Menu Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/dropdown-menu.mdx

Command to install the dropdown-menu component.

```bash
npm install @base-ui/dropdown-menu
```

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

### Install Table Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/table.mdx

Use this command to install the table component into your project. Ensure you have the basecn CLI installed.

```bash
npx shadcn-ui@latest add table
```

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

### Install Input Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/input.mdx

Use this command to install the Input component. Ensure you have the necessary package manager configured.

```bash
npm install @base-ui/input
```

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

### Install Button Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/button.mdx

Install the Button component using the provided command.

```bash
npm install button
# or
yarn add button
```

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

### Install Kbd Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/kbd.mdx

Command to install the Kbd component into your project.

```bash
npx shadcn-ui@latest add kbd
```

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

### Install Resizable Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/resizable.mdx

Use this command to install the Resizable component into your project.

```bash
npx shadcn-ui@latest add resizable
```

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

### Install Sidebar Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/sidebar.mdx

Command to install the sidebar component into your project. Ensure you have the necessary dependencies and project setup.

```bash
npm install sidebar
```

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

### Install Textarea Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/textarea.mdx

Command to install the Textarea component into your project.

```bash
npx shadcn-ui@latest add textarea
```

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

### Install Combobox Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/combobox-baseui.mdx

Use this command to install the Combobox component for your project.

```bash
npm install @base-ui/react --save
npm install @base-ui/react-combobox --save
```

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

### Install Navigation Menu Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/navigation-menu.mdx

Command to install the Navigation Menu component.

```bash
npm install @base-ui/navigation-menu
```

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

### Start Development Server

Source: https://github.com/akash3444/basecn/blob/main/CONTRIBUTING.md

Run the development server to test your changes locally. Access the application via http://localhost:3000.

```bash
pnpm dev
```

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

### Default Textarea Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/textarea.mdx

A basic example of the Textarea component.

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

export function TextareaDemo() {
  return (
    <Textarea placeholder="Type your message here." />
  );
}

```

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

### Install Base UI Package

Source: https://github.com/akash3444/basecn/blob/main/content/docs/get-started/migrating-from-radix-ui.mdx

Install the Base UI React package using pnpm.

```bash
pnpm add @base-ui/react
```

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

### Install Tooltip Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/tooltip.mdx

Command to install the Tooltip component. This is typically the first step before using the component in your project.

```bash
npm install @base-ui/tooltip
```

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

### Install Checkbox Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/checkbox.mdx

Command to install the checkbox component.

```bash
npm install @baseui/checkbox
# or
yarn add @baseui/checkbox
```

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

### Install Empty Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/empty.mdx

Command to install the Empty component. Ensure you have the necessary dependencies.

```bash
npm install empty
```

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

### Install Avatar Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/avatar.mdx

Command to install the avatar component.

```bash
npm install @base-ui/react
```

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

### Base Button Component Examples

Source: https://context7.com/akash3444/basecn/llms.txt

Demonstrates various variants and sizes of the Button component, including a loading state and rendering as an anchor tag. Ensure lucide-react is installed for icons.

```tsx
import { Button } from "@/components/ui/button";
import { Loader2Icon, TrashIcon } from "lucide-react";

// All variants
export function ButtonExamples() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button>Default</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>

      {/* Sizes */}
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
      <Button size="icon"><TrashIcon /></Button>

      {/* Loading state */}
      <Button disabled>
        <Loader2Icon className="animate-spin" />
        Saving...
      </Button>

      {/* Render as anchor using Base UI render prop */}
      <Button render={<a href="/dashboard" />}>Go to Dashboard</Button>
    </div>
  );
}
```

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

### Install basecn Components using shadcn CLI

Source: https://context7.com/akash3444/basecn/llms.txt

Use the shadcn CLI with the @basecn namespace to add components directly into your project. Components are installed into src/components/ui/.

```bash
# Install any component using the namespaced shorthand
npx shadcn@latest add @basecn/button
npx shadcn@latest add @basecn/dialog
npx shadcn@latest add @basecn/select
npx shadcn@latest add @basecn/accordion

# Or via the full URL (legacy)
npx shadcn@latest add https://basecn.dev/r/button.json
```

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

### Install Input Group Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/input-group.mdx

Use this command to install the Input Group component.

```bash
npx shadcn-ui@latest add input-group
```

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

### Install Radio Group Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/radio-group.mdx

Command to install the radio-group component. Ensure you have the base-ui package installed.

```bash
npm install @base-ui/radio-group
```

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

### Install Aspect Ratio Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/aspect-ratio.mdx

Install the Aspect Ratio component using the provided command. This is a prerequisite for using the component in your project.

```bash
npx basecn add aspect-ratio
```

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

### Install Label Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/label.mdx

Command to install the Label component. Run this in your project's terminal.

```bash
npm install @basecn/label
```

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

### Install Slider Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/slider.mdx

Install the slider component using the base UI CLI.

```bash
npx baseui component slider
```

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

### Install Hover Card Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/hover-card.mdx

Use this command to install the Hover Card component.

```bash
npm install @base-ui/react --save
# or
yarn add @base-ui/react
```

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

### Install Alert Dialog

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/alert-dialog.mdx

Command to install the Alert Dialog component.

```bash
npm install @base-ui/react@latest @base-ui/alert-dialog@latest
```

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

### Install Spinner Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/spinner.mdx

Command to install the spinner component. Ensure you have the necessary dependencies.

```bash
npx shadcn-ui@latest add spinner
```

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

### Install Autocomplete Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/autocomplete.mdx

Command to install the Autocomplete component. Ensure you have the necessary package manager configured.

```bash
npm install @base-ui/autocomplete
```

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

### Install Project Dependencies

Source: https://github.com/akash3444/basecn/blob/main/CONTRIBUTING.md

Install all necessary project dependencies using pnpm. This is a required step before running the development server or building the project.

```bash
pnpm install
```

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

### Install Accordion Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/accordion.mdx

Use this command to install the Accordion component into your project.

```bash
npx shadcn-ui@latest add accordion
```

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

### Basic Switch Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/switch.mdx

A simple demonstration of the Switch component.

```jsx
import { Switch } from "@base-ui/react";

function App() {
  return <Switch />;
}
```

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

### Install Field Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/field.mdx

Use this command to install the Field component into your project.

```bash
npx shadcn-ui@latest add field
```

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

### Install Separator Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/separator-extended.mdx

Command to install the separator component. Ensure you are in the project root.

```bash
npm install @basecn/separator-extended
```

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

### Install Dialog Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/dialog.mdx

Use this command to install the Dialog component. Ensure you have the necessary package manager configured.

```bash
npm install @base-ui/react dialog
```

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

### Install Button Group

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/button-group.mdx

Install the Button Group component using the basecn CLI.

```bash
npx basecn add button-group
```

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

### Install Item Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/item.mdx

Use this command to install the Item component into your project. Ensure you have the necessary package manager configured.

```bash
npx shadcn-ui@latest add item
```

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

### Install Sheet Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/sheet.mdx

Use this command to install the Sheet component. Ensure you have the necessary package manager configured.

```bash
npm install @base-ui/react@latest @base-ui/tailwind@latest
```

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

### Install Toggle Group Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/toggle-group.mdx

Use this command to install the Toggle Group component into your project.

```bash
npm install @base-ui/react @base-ui/toggle-group
```

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

### Install Skeleton Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/skeleton.mdx

Install the Skeleton component using the basecn CLI. This command adds the necessary dependencies and files for the component.

```bash
npx basecn add skeleton
```

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

### Install Command Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/command.mdx

Use this command to install the Command component into your project. Ensure you have the necessary package manager configured.

```bash
npx shadcn-ui@latest add command
```

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

### Install Card Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/card.mdx

Use this command to install the Card component into your project. Ensure you have the necessary package manager configured.

```bash
npx shadcn-ui@latest add card
```

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

### Install Collapsible Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/collapsible.mdx

Use this command to install the collapsible component. Ensure you have the base-ui package manager configured.

```bash
npx baseui install collapsible
```

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

### Install Component using Namespaced Registry

Source: https://github.com/akash3444/basecn/blob/main/content/docs/get-started/namespaced-registry.mdx

Use this command to install a component, such as `button`, from the configured Basecn namespaced registry. Ensure the registry is set up in your `components.json`.

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

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

### Button Loading State Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/button.mdx

Demonstrates how to display a loading state for the Button component.

```tsx
import {
  Button,
  buttonVariants,
} from "@/components/ui/button";
import {
  IconArrowRight,
  IconPlus,
} from "@radix-ui/react-icons";

export function ButtonLoading() {
  return (
    <Button disabled>
      <span className="sr-only">Loading...</span>
      <IconPlus className="h-4 w-4 animate-spin" />
    </Button>
  );
}

```

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

### Install Carousel Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/carousel.mdx

Use this command to install the Carousel component. Ensure you have the necessary package manager configured.

```bash
npx shadcn-ui@latest add carousel
```

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

### Nested Drawer Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/drawer-base.mdx

Demonstrates how to implement nested drawers. This pattern is useful for multi-step processes or complex navigation.

```jsx
<ComponentPreview name="drawer-base-nested" constrainHeight={false} />
```

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

### Install Form Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/form-with-react-hook-form.mdx

Use this command to install the form component. Ensure you have the necessary dependencies for React Hook Form.

```bash
npx shadcn-ui@latest add form
```

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

### Split Button Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/button.mdx

Shows an example of a split button, typically used for primary and secondary actions.

```tsx
import {
  Button,
  buttonVariants,
} from "@/components/ui/button";
import {
  IconArrowRight,
  IconPlus,
} from "@radix-ui/react-icons";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function ButtonSplit() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>
          <IconPlus className="mr-2 h-4 w-4" />
          <span>Create</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>
          Make a Copy
        </DropdownMenuItem>
        <DropdownMenuItem>Rename</DropdownMenuItem>
        <DropdownMenuItem>Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

```

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

### Install Tabs Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/tabs.mdx

Install the Tabs component using the base UI CLI. This command adds the necessary package to your project.

```bash
npx @base-ui/cli component tabs install
```

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

### Install Breadcrumb Component

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/breadcrumb.mdx

Install the Breadcrumb component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn-ui@latest add breadcrumb
```

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

### Button With Icon Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/button.mdx

Shows how to integrate icons within the Button component.

```tsx
import {
  Button,
  buttonVariants,
} from "@/components/ui/button";
import {
  IconArrowRight,
  IconPlus,
} from "@radix-ui/react-icons";

export function ButtonWithIcon() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <Button>
        <IconPlus className="mr-2 h-4 w-4" /> Add to library
      </Button>
      <Button>
        Learn more <IconArrowRight className="ml-2 h-4 w-4" />
      </Button>
    </div>
  );
}

```

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

### Button Group Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/button.mdx

Illustrates how to group multiple Button components together.

```tsx
import {
  Button,
  buttonVariants,
} from "@/components/ui/button";
import {
  IconArrowRight,
  IconPlus,
} from "@radix-ui/react-icons";

export function ButtonGroup() {
  return (
    <div className="flex space-x-2">
      <Button variant="outline" size="sm">
        <IconPlus className="mr-2 h-4 w-4" />
        <span>Add</span>
      </Button>
      <Button variant="outline" size="sm">
        <IconPlus className="mr-2 h-4 w-4" />
        <span>Add</span>
      </Button>
      <Button variant="outline" size="sm">
        <IconPlus className="mr-2 h-4 w-4" />
        <span>Add</span>
      </Button>
    </div>
  );
}

```

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

### Disabled Textarea Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/textarea.mdx

Demonstrates how to render a Textarea in a disabled state.

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

export function TextareaDisabled() {
  return (
    <Textarea placeholder="Cannot type..." disabled />
  );
}

```

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

### Skeleton Card Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/skeleton.mdx

A basic example of the Skeleton component used to create a card-like placeholder. This is useful for displaying the structure of a card before its content is loaded.

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

export function SkeletonCard() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  );
}

```

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

### Field Input Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/field.mdx

Demonstrates a basic text input field with a label and help text.

```typescript
import {
  Field, FieldControl,
  FieldLabel, FieldMessage,
} from "@/registry/new-york/ui/field";

export default function FieldInput() {
  return (
    <Field className="w-64">
      <FieldLabel>Name</FieldLabel>
      <FieldControl>
        <input placeholder="Enter your name" />
      </FieldControl>
      <FieldMessage>Please enter your full name.</FieldMessage>
    </Field>
  );
}
```

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

### Empty Component Outline Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/empty.mdx

Demonstrates how to create an outlined empty state using the `border` utility class.

```jsx
import { Empty } from "@/components/ui/empty";

export default function EmptyOutline() {
  return (
    <Empty>
      <Empty.Icon />
      <Empty.Title>No items found</Empty.Title>
      <Empty.Description>Try creating a new item.</Empty.Description>
      <Empty.Action>
        <Button variant="outline">Create New Item</Button>
      </Empty.Action>
    </Empty>
  );
}
```

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

### Range Calendar Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/calendar.mdx

Demonstrates how to use the Calendar component for selecting a date range.

```tsx
import {
  Calendar,
} from "@/components/ui/calendar";

export default function RangeCalendar() {
  return <Calendar initialFocus mode="range" />; 
}
```

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

### Button Shape Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/button.mdx

Illustrates how to apply different shapes to the Button component.

```tsx
import {
  Button,
  buttonVariants,
} from "@/components/ui/button";
import {
  IconArrowRight,
  IconPlus,
} from "@radix-ui/react-icons";

export function ButtonShape() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <Button size="default">Default</Button>
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">
        <IconPlus className="h-4 w-4" />
      </Button>
    </div>
  );
}

```

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

### Textarea with Helper Text

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/textarea.mdx

Illustrates how to provide helper text below the Textarea to guide the user.

```jsx
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";

export function TextareaWithHelperText() {
  return (
    <div className="grid w-full gap-2">
      <Label htmlFor="message-with-helper">Your message</Label>
      <Textarea id="message-with-helper" placeholder="Type your message here." />
      <p className="text-sm text-muted-foreground">
        Your message will be super. 
      </p>
    </div>
  );
}

```

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

### Empty Component with Avatar Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/empty.mdx

Illustrates using the `EmptyMedia` component to display an avatar within the empty state.

```jsx
import { Empty } from "@/components/ui/empty";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function EmptyAvatar() {
  return (
    <Empty>
      <Empty.Media>
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
      </Empty.Media>
      <Empty.Title>No items found</Empty.Title>
      <Empty.Description>Try creating a new item.</Empty.Description>
      <Empty.Action>
        <Button variant="outline">Create New Item</Button>
      </Empty.Action>
    </Empty>
  );
}
```

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

### Clone the basecn Repository

Source: https://github.com/akash3444/basecn/blob/main/CONTRIBUTING.md

Clone your forked repository locally to start making changes. Ensure you navigate into the cloned directory.

```bash
git clone https://github.com/your-username/basecn.git
cd basecn
```

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

### Empty Component with Input Group Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/empty.mdx

Shows how to integrate an `InputGroup` component within the `EmptyContent` component for an interactive empty state.

```jsx
import { Empty } from "@/components/ui/empty";
import { InputGroup, Input, Button } from "@/components/ui";

export default function EmptyInputGroup() {
  return (
    <Empty>
      <Empty.Icon />
      <Empty.Title>No items found</Empty.Title>
      <Empty.Description>Try creating a new item.</Empty.Description>
      <Empty.Action>
        <InputGroup>
          <Input placeholder="Item name..." />
          <Button>Create</Button>
        </InputGroup>
      </Empty.Action>
    </Empty>
  );
}
```

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

### Empty Component with Avatar Group Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/empty.mdx

Demonstrates how to display an avatar group in the empty state using the `EmptyMedia` component.

```jsx
import { Empty } from "@/components/ui/empty";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function EmptyAvatarGroup() {
  return (
    <Empty>
      <Empty.Media>
        <AvatarGroup>
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <AvatarFallback>+3</AvatarFallback>
          </Avatar>
        </AvatarGroup>
      </Empty.Media>
      <Empty.Title>No items found</Empty.Title>
      <Empty.Description>Try creating a new item.</Empty.Description>
      <Empty.Action>
        <Button variant="outline">Create New Item</Button>
      </Empty.Action>
    </Empty>
  );
}
```

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

### Select Component Example

Source: https://context7.com/akash3444/basecn/llms.txt

Shows how to implement a dropdown select component using Base UI's Select and SelectPositioner for placement control. Includes grouping and labels for options.

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

export function SelectDemo() {
  return (
    <Select>
      <SelectTrigger className="w-[200px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>

      <SelectPositioner side="bottom" align="start">
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="mango">Mango</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Vegetables</SelectLabel>
            <SelectItem value="broccoli">Broccoli</SelectItem>
            <SelectItem value="carrot">Carrot</SelectItem>
          </SelectGroup>
        </SelectContent>
      </SelectPositioner>
    </Select>
  );
}
```

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

### Empty Component Background Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/empty.mdx

Shows how to add a background, including gradients, to the empty state using `bg-*` and `bg-gradient-*` utilities.

```jsx
import { Empty } from "@/components/ui/empty";

export default function EmptyBackground() {
  return (
    <Empty className="bg-gradient-to-br from-primary-500 to-primary-900 text-white ">
      <Empty.Icon className="text-white" />
      <Empty.Title>No items found</Empty.Title>
      <Empty.Description>Try creating a new item.</Empty.Description>
      <Empty.Action>
        <Button variant="outline" className="text-white border-white ">
          Create New Item
        </Button>
      </Empty.Action>
    </Empty>
  );
}
```

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

### Resizable Demo

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/resizable.mdx

A basic demonstration of the Resizable component.

```tsx
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable";

export function ResizableDemo() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">Panel 1</div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">Panel 2</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}
```

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

### Drawer Snap Points Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/drawer-base.mdx

Illustrates the use of snap points to control the drawer's position. Snap points allow the drawer to rest at predefined heights.

```jsx
<ComponentPreview name="drawer-base-snap-points" constrainHeight={false} />
```

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

### Aspect Ratio - Video Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/aspect-ratio.mdx

Shows how to use the Aspect Ratio component to display video content with a standard 16:9 ratio. This ensures that videos maintain their intended cinematic or widescreen appearance.

```jsx
<AspectRatio ratio={16/9}>
  <iframe
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/LXb3EKWsInQ"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
  ></iframe>
</AspectRatio>
```

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

### TanStack Form Example Usage

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/form-with-tanstack-form.mdx

A practical example of a TanStack Form field for username input, demonstrating how to integrate `field.Label`, `field.Control`, `field.Description`, and `field.Message` within a form item.

```tsx
const form = useAppForm({...})

<form.AppForm>
  <form.AppField name="username">
    {(field) => (
      <form.Item>
        <field.Label>Username</field.Label>
        <field.Control>
          <Input
            placeholder="shadcn"
            name={field.name}
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
          />
        </field.Control>
        <field.Description>This is your public display name.</field.Description>
        <field.Message />
      </form.Item>
    )}
  </form.AppField>
</form.AppForm>
```

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

### Combobox Demo

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/combobox.mdx

A basic demonstration of the Combobox component.

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

function Example() {
  const [value, setValue] = React.useState("");
  const [pets, setPets] = React.useState([
    "Dog",
    "Cat",
    "Hamster",
    "Goldfish",
    "Rabbit",
    "Parrot",
  ]);

  const handleSelect = (pet) => {
    setValue(pet);
  };

  return (
    <Combobox onSelect={handleSelect} aria-label="pet">
      <ComboboxInput
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <ComboboxPopover>
        <ComboboxList {
          filter={(item, value) =>
            item.toLowerCase().startsWith(value.toLowerCase())
          }
        >
          {pets.map((pet, index) => (
            <ComboboxOption key={index} value={pet} />
          ))}
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
}

```

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

### Field Switch Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/field.mdx

Shows a switch control within the Field component.

```typescript
import {
  Field, FieldControl,
  FieldLabel, FieldMessage,
} from "@/registry/new-york/ui/field";

export default function FieldSwitch() {
  return (
    <Field>
      <FieldControl>
        <input type="checkbox" role="switch" />
        <FieldLabel>Enable notifications</FieldLabel>
      </FieldControl>
      <FieldMessage>Turn on to receive updates.</FieldMessage>
    </Field>
  );
}
```

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

### Alert Dialog Demo

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/alert-dialog.mdx

A basic demonstration of the Alert Dialog component.

```jsx
import { AlertDialog } from "@base-ui/alert-dialog";

function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialog.Trigger>Open</AlertDialog.Trigger>
      <AlertDialog.Content>
        <AlertDialog.Header>
          <AlertDialog.Title>Are you sure absolutely sure?</AlertDialog.Title>
          <AlertDialog.Description>
            This action cannot be undone. This will permanently delete your account and remove your data from our servers.
          </AlertDialog.Description>
        </AlertDialog.Header>
        <AlertDialog.Footer>
          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
          <AlertDialog.Action>Continue</AlertDialog.Action>
        </AlertDialog.Footer>
      </AlertDialog.Content>
    </AlertDialog>
  );
}
```

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

### Field Checkbox Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/field.mdx

Illustrates a checkbox input within the Field component.

```typescript
import {
  Field, FieldControl,
  FieldLabel, FieldMessage,
} from "@/registry/new-york/ui/field";

export default function FieldCheckbox() {
  return (
    <Field>
      <FieldControl>
        <input type="checkbox" id="terms" />
        <FieldLabel htmlFor="terms">Agree to terms and conditions</FieldLabel>
      </FieldControl>
      <FieldMessage>You must agree to proceed.</FieldMessage>
    </Field>
  );
}
```

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

### Field Slider Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/field.mdx

Demonstrates a slider input integrated with the Field component.

```typescript
import {
  Field, FieldControl,
  FieldLabel, FieldMessage,
} from "@/registry/new-york/ui/field";

export default function FieldSlider() {
  return (
    <Field className="w-64">
      <FieldLabel>Volume</FieldLabel>
      <FieldControl>
        <input type="range" />
      </FieldControl>
      <FieldMessage>Adjust the volume level.</FieldMessage>
    </Field>
  );
}
```

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

### Aspect Ratio - Square Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/aspect-ratio.mdx

Demonstrates how to use the Aspect Ratio component to display content with a 1:1 (square) ratio. This is useful for profile pictures or UI elements that require a square shape.

```jsx
<AspectRatio ratio={1/1}>
  <img
    src="https://images.unsplash.com/photo-1535025183041-604178356200?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
    alt="Landscape"
    className="object-cover"
  />
</AspectRatio>
```

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

### Field Select Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/field.mdx

Illustrates a select dropdown within the Field component.

```typescript
import {
  Field, FieldControl,
  FieldLabel, FieldMessage,
} from "@/registry/new-york/ui/field";

export default function FieldSelect() {
  return (
    <Field className="w-64">
      <FieldLabel>Country</FieldLabel>
      <FieldControl>
        <select>
          <option>United States</option>
          <option>Canada</option>
          <option>Mexico</option>
        </select>
      </FieldControl>
      <FieldMessage>Select your country of residence.</FieldMessage>
    </Field>
  );
}
```

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

### Badge Status Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/badge.mdx

Shows how to use the Badge component to indicate status. Useful for highlighting states like 'new' or 'pending'.

```jsx
import { Badge } from "@/components/ui/badge";

function BadgeStatus() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="outline" className="text-red-500">New</Badge>
      <Badge variant="outline" className="text-yellow-500">Pending</Badge>
      <Badge variant="outline" className="text-green-500">Completed</Badge>
    </div>
  );
}

export default BadgeStatus;
```

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

### Migrate Popup Positioning with `Positioner`

Source: https://github.com/akash3444/basecn/blob/main/content/docs/get-started/migrating-from-radix-ui.mdx

Demonstrates how to position popups in Base UI using `DropdownMenuPositioner` instead of passing `side` and `align` directly to `DropdownMenuContent` as in Radix UI.

```tsx
import { DropdownMenu } from 'radix-ui';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownMenuTrigger>

  // [!code highlight]
  <DropdownMenuContent side="left" align="start">
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

```tsx
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuPositioner, DropdownMenuContent, DropdownMenuItem } from '@base-ui/react';

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    Open
  </DropdownMenuTrigger>

  // [!code highlight]
  <DropdownMenuPositioner side="left" align="start">
    <DropdownMenuContent>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
    </DropdownMenuContent>
  // [!code highlight]
  </DropdownMenuPositioner>
</DropdownMenu>
```

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

### Button Variants Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/button.mdx

Demonstrates different visual variants of the Button component.

```tsx
import {
  Button,
  buttonVariants,
} from "@/components/ui/button";
import {
  IconArrowRight,
  IconPlus,
} from "@radix-ui/react-icons";

export function ButtonVariants() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <Button>Default</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

```

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

### Field Radio Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/field.mdx

Demonstrates a radio button input integrated with the Field component.

```typescript
import {
  Field, FieldControl,
  FieldLabel, FieldMessage,
} from "@/registry/new-york/ui/field";

export default function FieldRadio() {
  return (
    <Field>
      <FieldControl>
        <input type="radio" id="option1" name="options" />
        <FieldLabel htmlFor="option1">Option 1</FieldLabel>
      </FieldControl>
      <FieldControl>
        <input type="radio" id="option2" name="options" />
        <FieldLabel htmlFor="option2">Option 2</FieldLabel>
      </FieldControl>
      <FieldMessage>Choose one option.</FieldMessage>
    </Field>
  );
}
```

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

### Fieldset Example

Source: https://github.com/akash3444/basecn/blob/main/content/docs/components/field.mdx

Shows how to group related form fields using the Fieldset component.

```typescript
import {
  Field, FieldControl,
  FieldLabel, FieldMessage,
  Fieldset,
} from "@/registry/new-york/ui/field";

export default function FieldsetExample() {
  return (
    <Fieldset legend="Personal Information">
      <Field className="mb-4">
        <FieldLabel>First Name</FieldLabel>
        <FieldControl>
          <input />
        </FieldControl>
      </Field>
      <Field>
        <FieldLabel>Last Name</FieldLabel>
        <FieldControl>
          <input />
        </FieldControl>
      </Field>
    </Fieldset>
  );
}
```