### Render Button with Icon and Text

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Illustrates a button that combines both an icon (`IconGitBranch`) and text, with the spacing between them automatically adjusted based on the button's size.

```tsx
<Button variant="outline" size="sm">
  <IconGitBranch /> New Branch
</Button>
```

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

### Render Basic Button with Outline and Icon

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Demonstrates how to render a basic button with an outline variant and an icon-only button using `ArrowUpIcon` for submission.

```tsx
<Button variant="outline">Button</Button>
<Button variant="outline" size="icon" aria-label="Submit">
  <ArrowUpIcon />
</Button>
```

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

### Render Destructive Button Variant

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Shows how to create a button with the `destructive` variant, commonly used for actions that cannot be easily undone.

```tsx
<Button variant="destructive">Destructive</Button>
```

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

### Render Default Button Variant

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Displays a basic button without any explicit `variant` prop, which defaults to the primary button style.

```tsx
<Button>Button</Button>
```

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

### Render Ghost Button Variant

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Provides an example of a button styled with the `ghost` variant, which appears as plain text until hovered.

```tsx
<Button variant="ghost">Ghost</Button>
```

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

### Render Secondary Button Variant

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Illustrates a button using the `secondary` variant, typically for less prominent actions.

```tsx
<Button variant="secondary">Secondary</Button>
```

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

### Render Link Button Variant

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Demonstrates a button styled with the `link` variant, which visually resembles a hyperlink.

```tsx
<Button variant="link">Link</Button>
```

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

### Render Button with Loading Spinner

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Demonstrates a button in a disabled state that includes a `Spinner` component and text, commonly used to indicate an ongoing asynchronous operation.

```tsx
<Button size="sm" variant="outline" disabled>
  <Spinner />
  Submit
</Button>
```

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

### Create Button Group with Multiple Button States - TSX

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Demonstrates how to structure a ButtonGroup component with nested button groups containing outline variants, icon buttons, and dropdown menus. This example shows organizing related actions into logical groupings with different button types and states.

```tsx
<ButtonGroup>
  <ButtonGroup>
    <Button variant="outline" size="icon" aria-label="Go Back">
      <ArrowLeftIcon />
    </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Archive</Button>
    <Button variant="outline">Report</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Snooze</Button>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon" aria-label="More Options">
          <MoreHorizontalIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent />
    </DropdownMenu>
  </ButtonGroup>
</ButtonGroup>
```

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

### Render Basic Button Component

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Shows a simple example of rendering the `Button` component with an 'outline' variant, displaying plain text.

```tsx
<Button variant="outline">Button</Button>
```

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

### Render Rounded Icon Button

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Shows how to create a fully rounded icon button by applying the Tailwind CSS `rounded-full` class to an icon button variant.

```tsx
<Button variant="outline" size="icon" className="rounded-full">
  <ArrowUpRightIcon />
</Button>
```

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

### Render Outline Button Variant

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Shows how to render a button with the `outline` variant, providing a clear border and transparent background.

```tsx
<Button variant="outline">Outline</Button>
```

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

### Install Shadcn Button Component via CLI

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Uses the `npx shadcn@latest` command-line tool to add the button component to your project, automating the setup process.

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

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

### Import Button Component in React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Imports the `Button` component from the local UI components path, making it available for use within your React application.

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

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

### Render Link as Button using asChild Prop - TSX

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Shows how to use the asChild prop to render a Next.js Link component with button styling. This technique allows polymorphic component usage where the Button styles are applied to a different underlying element (Link) while maintaining proper semantics.

```tsx
import Link from "next/link"

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

export function LinkAsButton() {
  return (
    <Button asChild>
      <Link href="/login">Login</Link>
    </Button>
  )
}
```

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

### Render Button Components with Various Sizes

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Demonstrates the usage of different `size` props for the Button component, including 'sm' (small), 'icon-sm', default, 'icon', 'lg' (large), and 'icon-lg' variants. It illustrates how to create buttons with specific dimensions and icon sizing.

```tsx
// Small
<Button size="sm" variant="outline">Small</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>

// Medium
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>

// Large
<Button size="lg" variant="outline">Large</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>
```

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

### Render Icon-Only Button

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Example of a button designed exclusively to display an icon, using `variant="outline"` and `size="icon"` along with `aria-label` for accessibility.

```tsx
<Button variant="outline" size="icon" aria-label="Submit">
  <CircleFadingArrowUpIcon />
</Button>
```

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

### Add Custom Icon Button Sizes to Button Component - TSX

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Demonstrates how to extend the Button component with new icon sizes (icon-sm and icon-lg) by modifying the buttonVariants configuration. This involves adding size variants to the cva function that controls button styling in the button.tsx file.

```tsx
const buttonVariants = cva("...", {
  variants: {
    size: {
      // ...
      "icon-sm": "size-8",
      "icon-lg": "size-10",
      // ...
    },
  },
})
```

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

### Override Tailwind CSS Button Cursor Style

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button.mdx

Adds a CSS rule to restore `cursor: pointer` for interactive buttons and elements with `role="button"`, overriding the default `cursor: default` behavior introduced in Tailwind CSS v4.

```css
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}
```

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

### API: ButtonGroupText with asChild Prop

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button-group.mdx

Example of using the `asChild` prop on ButtonGroupText to render a Label component. This allows associating text with an input element within the button group.

```tsx
import { ButtonGroupText } from "@/components/ui/button-group"
import { Label } from "@/components/ui/label"

export function ButtonGroupTextDemo() {
  return (
    <ButtonGroup>
      <ButtonGroupText asChild>
        <Label htmlFor="name">Text</Label>
      </ButtonGroupText>
      <Input placeholder="Type something here..." id="name" />
    </ButtonGroup>
  )
}
```

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

### Usage: Basic Button Group

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button-group.mdx

Demonstrates the basic usage of the ButtonGroup component, importing it along with ButtonGroupSeparator and ButtonGroupText, and rendering a group of buttons.

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

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>
```

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

### Basic Input Group with Search Icon and Button - TypeScript/React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/input-group.mdx

Basic usage example demonstrating an Input Group with a search input, an icon addon, and a button addon. The button is aligned to the inline-end position to appear on the right side of the input.

```tsx
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Search</InputGroupButton>
  </InputGroupAddon>
</InputGroup>
```

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

### Install Button Group Component (Manual)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button-group.mdx

Manually install the Button Group component by adding the '@radix-ui/react-slot' dependency and copying the component source code into your project. Remember to update import paths as needed.

```bash
npm install @radix-ui/react-slot
```

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

### Accessibility: Labeled Button Group

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button-group.mdx

Example of using the ButtonGroup component with an `aria-label` for accessibility. This helps screen readers identify the purpose of the button group. Navigation within the group uses Tab.

```tsx
<ButtonGroup aria-label="Button group">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>
```

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

### API: ButtonGroupSeparator Component

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button-group.mdx

Demonstrates the usage of the ButtonGroupSeparator component to visually divide buttons within a group. It accepts an `orientation` prop, defaulting to 'vertical'.

```tsx
<ButtonGroup>
  <Button>Button 1</Button>
  <ButtonGroupSeparator />
  <Button>Button 2</Button>
</ButtonGroup>
```

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

### Import and Use Button Component in Next.js

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/next.mdx

Import the Button component from the UI components directory and use it in a Next.js page component. This example demonstrates rendering a Button with click text in the home page.

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

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```

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

### Use shadcn/ui Button Component in Remix Route

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/remix.mdx

Demonstrates how to import and use a shadcn/ui `Button` component within a Remix route file, specifically `app/routes/index.tsx`. This example shows how to render the component as a simple clickable button on a page.

```tsx
import { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```

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

### Install Button Group Component (CLI)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button-group.mdx

Install the Button Group component using the Shadcn UI CLI. This command adds the necessary files and dependencies to your project.

```bash
npx shadcn@latest add button-group
```

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

### API: ButtonGroupText Component

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button-group.mdx

Shows the basic usage of the ButtonGroupText component to display text within a button group. The `asChild` prop allows rendering a custom component, like a Label.

```tsx
<ButtonGroup>
  <ButtonGroupText>Text</ButtonGroupText>
  <Button>Button</Button>
</ButtonGroup>
```

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

### Create React Component for Open in v0 Button

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/open-in-v0.mdx

This React component renders a styled button that links to the v0.dev API to open a registry item. It uses the shadcn/ui Button component and includes an embedded SVG logo. The component expects a `url` prop to construct the final link.

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

export function OpenInV0Button({ url }: { url: string }) {
  return (
    <Button
      aria-label="Open in v0"
      className="h-8 gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black"
      asChild
    >
      <a
        href={`https://v0.dev/chat/api/open?url=${url}`}
        target="_blank"
        rel="noreferrer"
      >
        Open in{" "}
        <svg
          viewBox="0 0 40 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="h-5 w-5 text-current"
        >
          <path
            d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
            fill="currentColor"
          ></path>
          <path
            d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
            fill="currentColor"
          ></path>
        </svg>
      </a>
    </Button>
  )
}
```

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

### Multiple Buttons in InputGroupAddon - TypeScript/React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/input-group.mdx

Example showing how to include multiple InputGroupButton components within a single InputGroupAddon. This pattern is useful for creating button groups with multiple action buttons alongside an input field.

```tsx
<InputGroupAddon>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>
```

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

### Render buttons within shadcn/ui InputGroup with InputGroupButton

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/input-group.mdx

The `InputGroupButton` component is used to display interactive buttons directly within input groups. It supports various sizes and visual variants, accepting standard HTML button attributes and custom `className` for styling.

```tsx
<InputGroupButton>Button</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="Copy">
  <CopyIcon />
</InputGroupButton>
```

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

### EmptyContent Component with Button Action

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/empty.mdx

Use the EmptyContent component to display action elements such as buttons, inputs, or links. Positioned at the bottom of the empty state for user interactions.

```tsx
<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>
```

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

### Add Button Component to Next.js Project

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/next.mdx

Add the Button component from shadcn/ui to your Next.js project using the add command. This downloads and configures the component for use in your application.

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

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

### Import and Use Button Component in TanStack Router Route

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/tanstack-router.mdx

Demonstrates how to import the Button component from shadcn/ui and use it within a TanStack Router file-based route component. The example shows a simple App component rendered at the root route that displays a clickable button.

```tsx
import { createFileRoute } from "@tanstack/react-router"

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

export const Route = createFileRoute("/")({
  component: App,
})

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```

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

### Add and Use Button Component in React Router

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/react-router.mdx

Adds the 'button' component to the shadcn/ui project and demonstrates its usage within a React Router application. This requires the shadcn/ui CLI to be initialized and the component to be added.

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

```tsx
import { Button } from "~/components/ui/button"

import type { Route } from "./+types/home"

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ]
}

export default function Home() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}
```

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

### API: ButtonGroup Component

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button-group.mdx

Shows the basic structure of the ButtonGroup component. It accepts an `orientation` prop which can be 'horizontal' or 'vertical', defaulting to 'horizontal'.

```tsx
<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>
```

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

### Import and use shadcn/ui Button in an Astro page

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/astro.mdx

This Astro code snippet demonstrates how to import a shadcn/ui `Button` component and render it within an Astro page. It showcases the basic syntax for component integration, including the frontmatter import and JSX-like usage within the HTML body.

```astro
---
import { Button } from "@/components/ui/button"
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro + TailwindCSS</title>
	</head>

	<body>
		<div className="grid place-items-center h-screen content-center">
			<Button>Button</Button>
		</div>
	</body>
</html>
```

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

### Implement Pagination Controls for React Table (TSX)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/data-table.mdx

This snippet adds user interface controls for pagination to the `DataTable` component. It includes 'Previous' and 'Next' buttons, utilizing Shadcn UI's `Button` component, and connects them to the `table.previousPage()` and `table.nextPage()` methods, disabling buttons when no further pages are available.

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

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  })

  return (
    <div>
      <div className="overflow-hidden rounded-md border">
        <Table>
          { // .... }
        </Table>
      </div>
      <div className="flex items-center justify-end space-x-2 py-4">
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          Previous
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next
        </Button>
      </div>
    </div>
  )
}
```

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

### Add shadcn/ui Components to Web App (pnpm)

Source: https://github.com/shadcn-ui/ui/blob/main/templates/monorepo-next/README.md

Run this command at the root of your web application to add specific shadcn/ui components, such as a button, to your project. The components will be placed in the `packages/ui/src/components` directory.

```bash
pnpm dlx shadcn@latest add button -c apps/web
```

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

### Import and Use Button Component in TanStack Start

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/tanstack.mdx

Demonstrates how to import and render the Button component in a TanStack Start route file. The component is imported from the local components/ui directory and can be used as a standard React component.

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

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```

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

### API: Nested ButtonGroup Components

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/button-group.mdx

Illustrates how to nest ButtonGroup components to create more complex layouts with spacing between groups.

```tsx
<ButtonGroup>
  <ButtonGroup />
  <ButtonGroup />
</ButtonGroup>
```

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

### Basic Toggle Component Usage

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/toggle.mdx

Render a basic Toggle component with default styling. The component displays a button that can be toggled between on and off states.

```tsx
<Toggle>Toggle</Toggle>
```

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

### Create Basic Empty State Component

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/empty.mdx

Create a basic empty state using the Empty component with header, media, title, description, and action button. The EmptyMedia displays an icon, title and description provide context, and EmptyContent contains an action button.

```tsx
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>
```

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

### Custom Calendar Day Button Implementation (React)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/calendar.mdx

Implements a custom `CalendarDayButton` component for shad-cn/ui. It handles focus management, applies various styling based on day selection and range status, and integrates with a base `Button` component. The component accepts day properties and modifiers to control its appearance.

```tsx
function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const defaultClassNames = getDefaultClassNames()

  const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

  return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toLocaleDateString()}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
        defaultClassNames.day,
        className
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
```

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

### Integrate Action Buttons with Shadcn UI ItemActions Component (React/TypeScript)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/item.mdx

The `ItemActions` component is a container for interactive elements, typically action buttons, providing a structured way to group actions related to an item. It facilitates user interaction within lists or cards. This component supports custom styling via `className`.

```tsx
<ItemActions>
  <Button>Action</Button>
  <Button>Action</Button>
</ItemActions>
```

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

### Add an Action Button to a Sidebar Group in shadcn-ui (React/TSX)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/sidebar.mdx

This example focuses on adding an interactive action button to a `SidebarGroup` using `SidebarGroupAction`. The action component includes a `Plus` icon and screen-reader-only text for accessibility, providing a clear way to perform an associated action, such as adding a new project. This enhances the functionality of sidebar sections.

```tsx
export function AppSidebar() {
  return (
    <SidebarGroup>
      <SidebarGroupLabel asChild>Projects</SidebarGroupLabel>
      <SidebarGroupAction title="Add Project">
        <Plus /> <span className="sr-only">Add Project</span>
      </SidebarGroupAction>
      <SidebarGroupContent />
    </SidebarGroup>
  )
}
```

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

### Disable Submit Button with Pending State (React/Next.js)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/forms/next.mdx

This snippet shows how to disable a submit button and conditionally display a loading spinner using the `pending` prop obtained from `useActionState`, ensuring user feedback during form submission.

```tsx
<Button type="submit" disabled={pending}>
  {pending && <Spinner />} Submit
</Button>
```

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

### Import and Use shadcn/ui Button Component in React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/vite.mdx

Example React component demonstrating how to import and use a shadcn/ui Button component. Uses the configured path alias '@/' and Tailwind CSS utility classes for layout styling with flexbox and viewport height.

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

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

export default App
```

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

### Remove Items from React Hook Form useFieldArray

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/forms/react-hook-form.mdx

This code demonstrates how to implement a remove button for items within a `useFieldArray`. The button, shown conditionally when there's more than one item, calls the `remove` method with the item's index, deleting it from the array. This integrates with shadcn/ui `InputGroupAddon` and `InputGroupButton`.

```tsx
{
  fields.length > 1 && (
    <InputGroupAddon align="inline-end">
      <InputGroupButton
        type="button"
        variant="ghost"
        size="icon-xs"
        onClick={() => remove(index)}
        aria-label={`Remove email ${index + 1}`}
      >
        <XIcon />
      </InputGroupButton>
    </InputGroupAddon>
  )
}
```

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

### Import shadcn/ui Components in TypeScript/React

Source: https://github.com/shadcn-ui/ui/blob/main/templates/monorepo-next/README.md

To utilize shadcn/ui components within your application, import them from the `@workspace/ui/components` package. This example demonstrates importing the `Button` component for use in a TypeScript/React file.

```tsx
import { Button } from "@workspace/ui/components/button"
```

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

### Toggle Sidebar with SidebarTrigger in shadcn/ui

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/sidebar.mdx

Shows how to use the `SidebarTrigger` component to create a button that toggles the sidebar's visibility. It highlights the requirement for `SidebarTrigger` to be wrapped within a `SidebarProvider` to access the sidebar's state and toggle functionality.

```tsx
<SidebarProvider>
  <Sidebar />
  <main>
    <SidebarTrigger />
  </main>
</SidebarProvider>
```

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

### Create a basic shadcn UI component in TypeScript

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/getting-started.mdx

This TypeScript React component, `HelloWorld`, demonstrates a simple component using a `Button` from the `@/components/ui/button` path. It serves as an example for components to be included in a shadcn UI registry.

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

export function HelloWorld() {
  return <Button>Hello World</Button>
}
```

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

### Mark SidebarMenuButton as Active (TSX)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/sidebar.mdx

This snippet shows how to set a `SidebarMenuButton` as active using the `isActive` prop. When `isActive` is set, the menu item will visually indicate its active state. The button uses `asChild` to render an anchor tag as its interactive element.

```tsx
<SidebarMenuButton asChild isActive>
  <a href="#">Home</a>
</SidebarMenuButton>
```

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

### Remove Items from Array Fields in React Forms

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/forms/tanstack-form.mdx

This snippet illustrates how to remove an item from an array field using the `field.removeValue(index)` method. The remove button is conditionally rendered only when there is more than one item in the array, preventing the user from deleting the last entry. This button typically appears alongside the input field for the item being removed.

```tsx
{
  field.state.value.length > 1 && (
    <InputGroupButton
      onClick={() => field.removeValue(index)}
      aria-label={`Remove email ${index + 1}`}
    >
      <XIcon />
    </InputGroupButton>
  )
}
```

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

### Use Open in v0 Button React Component

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/open-in-v0.mdx

This example shows how to instantiate the `OpenInV0Button` component in a React application. It requires passing the URL of the registry item as a prop to the component. The component then handles the redirection to the v0.dev API.

```jsx
<OpenInV0Button url="https://example.com/r/hello-world.json" />
```

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

### Render Icon and Label in SidebarMenuButton (TSX)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/sidebar.mdx

This example demonstrates how to include an icon and a text label within a `SidebarMenuButton` component. The `asChild` prop is used to pass the rendering control to its child, allowing an `<a>` tag to act as the button. Ensure the label text is wrapped in a `<span>` tag for proper truncation.

```tsx
<SidebarMenuButton asChild>
  <a href="#">
    <Home />
    <span>Home</span>
  </a>
</SidebarMenuButton>
```

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

### Basic Dropdown Menu Usage

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/dropdown-menu.mdx

Create a basic dropdown menu with a trigger button, labels, separators, and menu items. The menu displays when the trigger is clicked and contains a list of actions.

```tsx
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

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

### Basic Sheet Component Usage

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/sheet.mdx

Basic implementation of a Sheet component with trigger button, header with title and description. Demonstrates the fundamental structure and layout of a sheet dialog.

```tsx
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>
```

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

### Basic Dialog Component Usage in React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/dialog.mdx

Demonstrates a simple Dialog component with trigger button, header with title and description, and confirmation message. This is the basic pattern for creating modal dialogs.

```typescript
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```

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

### Basic Collapsible Component Usage in React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/collapsible.mdx

Example implementation of the Collapsible component with a trigger button and expandable content. The CollapsibleTrigger acts as the clickable element, and CollapsibleContent displays the hidden content when expanded.

```typescript
<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>
```

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

### Implement basic Drawer component structure in TSX

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/drawer.mdx

Demonstrates the fundamental structure for using the Shadcn UI Drawer component, including a trigger to open it and content containing a header, description, footer, and action buttons. This provides a basic interactive drawer overlay.

```tsx
<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

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

### Define Original Third-Party Component Configuration (shadcn/ui JSON)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/namespace.mdx

This JSON snippet defines the configuration for an original third-party button component, including its name, type, file paths, content, and default CSS variables for light mode. It serves as the base definition before any custom overrides.

```json
{
  "name": "button",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/button.tsx",
      "type": "registry:ui",
      "content": "// Vendor's button implementation\nexport function Button() { ... }"
    }
  ],
  "cssVars": {
    "light": {
      "--button-bg": "blue"
    }
  }
}
```

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

### Add New Items to React Hook Form useFieldArray

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/forms/react-hook-form.mdx

This snippet illustrates how to add new elements to a dynamic array managed by `useFieldArray`. A button triggers the `append` method, which adds a new object with a default `address` to the `emails` array. The button is disabled if the array reaches a maximum length of 5.

```tsx
<Button
  type="button"
  variant="outline"
  size="sm"
  onClick={() => append({ address: "" })}
  disabled={fields.length >= 5}
>
  Add Email Address
</Button>
```

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

### Basic Implementation of Shadcn UI Alert Dialog Component

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/alert-dialog.mdx

Provides a basic example of importing and using the Shadcn UI Alert Dialog component. It includes the necessary import statements for all sub-components and a functional example demonstrating the dialog's structure with a trigger, header, description, and action buttons.

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
```

```tsx
<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

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

### Create Custom Sidebar Toggle with useSidebar Hook in React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/sidebar.mdx

Illustrates how to build a custom button to toggle the sidebar using the `useSidebar` hook. This approach provides more control over the trigger's appearance and behavior, requiring the component to import `useSidebar` from the UI library.

```tsx
import { useSidebar } from "@/components/ui/sidebar"

export function CustomTrigger() {
  const { toggleSidebar } = useSidebar()

  return <button onClick={toggleSidebar}>Toggle Sidebar</button>
}
```

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

### Install shadcn/ui Block and Override Primitives (JSON)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

This configuration demonstrates how to install a block from the shadcn/ui registry and simultaneously override its default primitive components (like button, input, label) with custom versions defined at specific URLs. This allows for consistent styling and behavior across custom and registry components.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-login",
  "type": "registry:block",
  "registryDependencies": [
    "login-01",
    "https://example.com/r/button.json",
    "https://example.com/r/input.json",
    "https://example.com/r/label.json"
  ]
}
```

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

### Implement Combobox Component in TypeScript/React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/combobox.mdx

This TypeScript/React code defines an `ExampleCombobox` component, demonstrating a functional Combobox UI. It integrates Shadcn UI's Button, Command, and Popover components to create an interactive autocomplete input, allowing users to select from a predefined list of frameworks. The component manages its open state and selected value, providing search and selection capabilities.

```tsx
"use client"

import * as React from "react"
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const frameworks = [
  {
    value: "next.js",
    label: "Next.js",
  },
  {
    value: "sveltekit",
    label: "SvelteKit",
  },
  {
    value: "nuxt.js",
    label: "Nuxt.js",
  },
  {
    value: "remix",
    label: "Remix",
  },
  {
    value: "astro",
    label: "Astro",
  },
]

export function ExampleCombobox() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[200px] justify-between"
        >
          {value
            ? frameworks.find((framework) => framework.value === value)?.label
            : "Select framework..."}
          <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Search framework..." />
          <CommandList>
            <CommandEmpty>No framework found.</CommandEmpty>
            <CommandGroup>
              {frameworks.map((framework) => (
                <CommandItem
                  key={framework.value}
                  value={framework.value}
                  onSelect={(currentValue) => {
                    setValue(currentValue === value ? "" : currentValue)
                    setOpen(false)
                  }}
                >
                  <CheckIcon
                    className={cn(
                      "mr-2 h-4 w-4",
                      value === framework.value ? "opacity-100" : "opacity-0"
                    )}
                  />
                  {framework.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
```

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

### Style shadcn/ui Sidebar menu action based on active state

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/sidebar.mdx

This example shows how to style a `SidebarMenuAction` component based on the active state of its peer `SidebarMenuButton`. It uses a Tailwind CSS class (`peer-data-[active=true]/menu-button:opacity-100`) to force the menu action to be visible when the menu button is active, enhancing user experience by indicating active selections.

```tsx
<SidebarMenuItem>
  <SidebarMenuButton />
  <SidebarMenuAction className="peer-data-[active=true]/menu-button:opacity-100" />
</SidebarMenuItem>
```

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

### Define Registry Item Schema with TypeScript and Zod

Source: https://context7.com/shadcn-ui/ui/llms.txt

Creates a structured registry item for a custom button component using Zod schema validation. The item includes component metadata, dependencies, file definitions, Tailwind configuration, CSS variables for light/dark themes, and environment variables. This example demonstrates the complete anatomy of a shadcn-ui registry entry.

```typescript
import { z } from "zod"
import { registryItemSchema } from "shadcn/schema"

const myComponent: z.infer<typeof registryItemSchema> = {
  name: "my-button",
  type: "registry:ui",
  description: "A customized button component",
  dependencies: ["@radix-ui/react-slot", "class-variance-authority"],
  registryDependencies: ["utils"],
  files: [
    {
      path: "my-button.tsx",
      type: "registry:ui",
      content: `
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground",
        destructive: "bg-destructive text-destructive-foreground",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 px-3",
        lg: "h-11 px-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
`
    }
  ],
  tailwind: {
    config: {
      theme: {
        extend: {
          colors: {
            primary: "hsl(var(--primary))",
            "primary-foreground": "hsl(var(--primary-foreground))",
          },
        },
      },
    },
  },
  cssVars: {
    light: {
      primary: "222.2 47.4% 11.2%",
      "primary-foreground": "210 40% 98%",
    },
    dark: {
      primary: "210 40% 98%",
      "primary-foreground": "222.2 47.4% 11.2%",
    },
  },
  envVars: {
    NEXT_PUBLIC_API_URL: "https://api.example.com",
    DATABASE_URL: "postgresql://localhost:5432/db",
  },
}

registryItemSchema.parse(myComponent)
```

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

### Basic Select component usage in React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/select.mdx

Demonstrates a functional Select component with a trigger button, placeholder text, and three theme options (Light, Dark, System). The component includes styling with Tailwind CSS classes.

```tsx
<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>
```

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

### Add New Items to Array Fields in React Forms

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/forms/tanstack-form.mdx

This example shows how to add new items to an array field using the `field.pushValue(item)` method provided by a form library. It uses a `Button` component to trigger the action and disables the button when the array reaches a predefined maximum length (e.g., 5 items). The `onClick` handler adds a new object with an empty `address` field.

```tsx
<Button
  type="button"
  variant="outline"
  size="sm"
  onClick={() => field.pushValue({ address: "" })}
  disabled={field.state.value.length >= 5}
>
  Add Email Address
</Button>
```

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

### Reset TanStack Form to Default Values in React

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/forms/tanstack-form.mdx

Demonstrates how to programmatically reset a TanStack Form to its initial default values using the form.reset() method. This button component triggers the reset action with type="button" to prevent form submission and uses an outline variant for styling.

```tsx
<Button type="button" variant="outline" onClick={() => form.reset()}>
  Reset
</Button>
```

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

### Implement Basic Date Picker (TypeScript/React)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/date-picker.mdx

This TypeScript/React example demonstrates how to create a basic date picker component using Shadcn UI's Popover and Calendar. It allows users to select a single date, formats the displayed date using `date-fns`, and updates the component's state. It depends on `date-fns`, `lucide-react`, and various Shadcn UI components like Button, Calendar, Popover, and utility functions.

```tsx
"use client"

import * as React from "react"
import { format } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          data-empty={!date}
          className="data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal"
        >
          <CalendarIcon />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date} onSelect={setDate} />
      </PopoverContent>
    </Popover>
  )
}
```

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

### Create Custom Component Override Configuration (shadcn/ui JSON)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/namespace.mdx

This JSON configuration demonstrates how to create a custom override for a third-party button component. It specifies the custom component's name, type, and importantly, uses `registryDependencies` to import the original component and then overrides specific properties like `cssVars`.

```json
{
  "name": "custom-button",
  "type": "registry:ui",
  "registryDependencies": [
    "@vendor/button" // Import original first
  ],
  "cssVars": {
    "light": {
      "--button-bg": "purple" // Override the color
    }
  }
}
```

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

### Render basic Shadcn UI Radio Group in TSX

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/radio-group.mdx

Renders a fundamental Radio Group component with two selectable options. Each option is composed of a `RadioGroupItem` and a `Label`, demonstrating the structure for interactive radio buttons in a React/Next.js application.

```tsx
<RadioGroup defaultValue="option-one">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>
```