### 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>
  )
}
```

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

### Install Manual Dependencies for Calendar Component

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

This command installs the required third-party libraries, `react-day-picker` and `date-fns`, which are fundamental for the Calendar component's functionality. These libraries provide core date selection and manipulation capabilities when manually setting up the component.

```bash
npm install react-day-picker date-fns
```

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

### Import Calendar Component in TypeScript React

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

This snippet demonstrates how to import the `Calendar` component from the Shadcn UI library into a TypeScript React project. It makes the component available for use within your JSX files, allowing you to render date selection interfaces.

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

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

### Create Calendar Component with Timezone Support in TypeScript React

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

This TypeScript React component demonstrates how to implement a single-selection calendar that respects the user's local timezone. It dynamically detects the client's timezone using `Intl.DateTimeFormat` within a `useEffect` hook to prevent hydration mismatches, and then applies this timezone to the `Calendar` component for accurate date display and selection.

```tsx
export function CalendarWithTimezone() {
  const [date, setDate] = React.useState<Date | undefined>(undefined)
  const [timeZone, setTimeZone] = React.useState<string | undefined>(undefined)

  React.useEffect(() => {
    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
  }, [])

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      timeZone={timeZone}
    />
  )
}
```

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

### Render Basic Calendar Component in TypeScript React

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

This TypeScript React example shows how to render a basic single-selection calendar component. It initializes a state variable for the selected date and passes it to the `Calendar` component along with an `onSelect` handler and styling props to control its appearance and behavior.

```tsx
const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
)
```

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

### Temporary Access Token Validation (TypeScript)

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

Defines a function to validate temporary access tokens, checking for their existence, expiration date, and scope. This enhances security by allowing time-limited access to resources.

```typescript
interface TemporaryToken {
  token: string
  expiresAt: Date
  scope: string[]
}

async function validateTemporaryToken(token: string) {
  const tokenData = await getTokenData(token)

  if (!tokenData) return false
  if (new Date() > tokenData.expiresAt) return false

  return true
}
```

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

### Generate Secure Tokens with Expiration in TypeScript

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

This TypeScript function illustrates how to generate new secure access tokens using `crypto.randomBytes` and assign them an expiration date. Implementing token expiration and rotation is a crucial security practice that reduces the risk associated with compromised tokens.

```typescript
// Create new token with expiration.
function generateToken() {
  const token = crypto.randomBytes(32).toString("hex")
  const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000) // 30 days.

  return { token, expiresAt }
}
```

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

### Fixing Day Radius with Week Numbers (TypeScript/CSS)

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

Addresses an issue where the selected day's left border radius was not applied correctly when week numbers are displayed. This code snippet shows how to update the `day` classNames in `components/ui/calendar.tsx` to ensure the correct radius is applied to the first day when `showWeekNumber` is enabled.

```tsx
classNames={{
  // ... other classNames
  day: cn(
    "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
    props.showWeekNumber
      ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
      : "[&:first-child[data-selected=true]_button]:rounded-l-md",
    defaultClassNames.day
  ),
  // ... other classNames
}}
```

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

### Configure Calendar for Persian/Hijri/Jalali Support

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

This `diff` snippet illustrates how to modify the import statement in `components/ui/calendar.tsx` to enable Persian, Hijri, or Jalali calendar support. It changes the `DayPicker` import from the standard `react-day-picker` to the `/persian` variant, adapting the calendar to different cultural contexts.

```diff
- import { DayPicker } from "react-day-picker"
+ import { DayPicker } from "react-day-picker/persian"
```

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

### Install New shadcn-ui Calendar Blocks

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

After successfully upgrading the main Calendar component, this command is used to install any new associated blocks or sub-components. It ensures that the latest UI elements and features for the calendar are available in the project. This step complements the upgrade process by bringing in updated block definitions.

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

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

### 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 }
```

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

### Calendar Component Structure and Rendering (React)

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

Defines the structure for the Calendar component, including how it renders the root element, navigation chevrons, day buttons, and week number cells. It utilizes conditional rendering for chevron icons based on orientation and customizes the rendering of individual day cells.

```tsx
components.Root: ({ className, rootRef, ...props }) => {
  return (
    <div
      data-slot="calendar"
      ref={rootRef}
      className={cn(className)}
      {...props}
    />
  )
},
components.Chevron: ({ className, orientation, ...props }) => {
  if (orientation === "left") {
    return (
      <ChevronLeftIcon className={cn("size-4", className)} {...props} />
    )
  }

  if (orientation === "right") {
    return (
      <ChevronRightIcon
        className={cn("size-4", className)}
        {...props}
      />
    )
  }

  return (
    <ChevronDownIcon className={cn("size-4", className)} {...props} />
  )
},
components.DayButton: CalendarDayButton,
components.WeekNumber: ({ children, ...props }) => {
  return (
    <td {...props}>
      <div className="flex size-[--cell-size] items-center justify-center text-center">
        {children}
      </div>
    </td>
  )
},
...components,
}} 
{...props}
/>
)
}
```

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

### Upgrade shadcn-ui Calendar Component (TypeScript/TSX)

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

This React component defines a customizable calendar using `react-day-picker` and styled with Tailwind CSS v3. It accepts various props to control appearance and behavior, such as `showOutsideDays`, `captionLayout`, and `buttonVariant`, and merges custom and default class names for extensive styling flexibility. The component relies on `lucide-react` for icons and utility functions for class name merging.

```tsx
"use client"

import * as React from "react"
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from "lucide-react"
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"

import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/ui/button"

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = "label",
  buttonVariant = "ghost",
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
}) {
  const defaultClassNames = getDefaultClassNames()

  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className
      )}
      captionLayout={captionLayout}
      formatters={{
        formatMonthDropdown: (date) =>
          date.toLocaleString("default", { month: "short" }),
        ...formatters,
      }}
      classNames={{
        root: cn("w-fit", defaultClassNames.root),
        months: cn(
          "relative flex flex-col gap-4 md:flex-row",
          defaultClassNames.months
        ),
        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
        nav: cn(
          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
          defaultClassNames.nav
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
          defaultClassNames.button_previous
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
          defaultClassNames.button_next
        ),
        month_caption: cn(
          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
          defaultClassNames.month_caption
        ),
        dropdowns: cn(
          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
          defaultClassNames.dropdowns
        ),
        dropdown_root: cn(
          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
          defaultClassNames.dropdown_root
        ),
        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
        caption_label: cn(
          "select-none font-medium",
          captionLayout === "label"
            ? "text-sm"
            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
          defaultClassNames.caption_label
        ),
        table: "w-full border-collapse",
        weekdays: cn("flex", defaultClassNames.weekdays),
        weekday: cn(
          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
          defaultClassNames.weekday
        ),
        week: cn("mt-2 flex w-full", defaultClassNames.week),
        week_number_header: cn(
          "w-[--cell-size] select-none",
          defaultClassNames.week_number_header
        ),
        week_number: cn(
          "text-muted-foreground select-none text-[0.8rem]",
          defaultClassNames.week_number
        ),
        day: cn(
          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
          props.showWeekNumber
            ? "&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
            : "&:first-child[data-selected=true]_button]:rounded-l-md",
          defaultClassNames.day
        ),
        range_start: cn(
          "bg-accent rounded-l-md",
          defaultClassNames.range_start
        ),
        range_middle: cn("rounded-none", defaultClassNames.range_middle),
        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
        today: cn(
          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
          defaultClassNames.today
        ),
        outside: cn(
          "text-muted-foreground aria-selected:text-muted-foreground",
          defaultClassNames.outside
        ),
        disabled: cn(
          "text-muted-foreground opacity-50",
          defaultClassNames.disabled
        ),
        hidden: cn("invisible", defaultClassNames.hidden),
        ...classNames,
      }}
    />
  )
}
```

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

### Define Payment Type and Sample Data

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

This TypeScript snippet defines the `Payment` interface, outlining the expected structure for each record in the data table, including `id`, `amount`, `status`, and `email`. It also initializes a `payments` array with sample data that will be displayed in the table, demonstrating the data shape.

```tsx
type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

export const payments: Payment[] = [
  {
    id: "728ed52f",
    amount: 100,
    status: "pending",
    email: "m@example.com",
  },
  {
    id: "489e1d42",
    amount: 125,
    status: "processing",
    email: "example@gmail.com",
  },
  // ...
]
```

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

### Format Currency and Align Cell in TanStack Table Column Definition (TypeScript)

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

This `ColumnDef` configuration customizes the 'amount' column to display currency values and align text to the right. It uses `Intl.NumberFormat` to format the numeric amount into USD currency. This approach can be extended to format other cells or headers based on specific data types or presentation requirements.

```tsx
export const columns: ColumnDef<Payment>[] = [\n  {\n    accessorKey: "amount",\n    header: () => <div className="text-right">Amount</div>,\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue("amount"))\n      const formatted = new Intl.NumberFormat("en-US", {\n        style: "currency",\n        currency: "USD",\n      }).format(amount)\n\n      return <div className="text-right font-medium">{formatted}</div>\n    },\n  },\n]
```

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

### Install Shadcn UI Calendar Component via CLI

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

This command installs the Shadcn UI Calendar component into your project using the command-line interface. It simplifies the setup process by handling dependencies and component files automatically, making it the recommended installation method.

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

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

### Update `input-otp` Library for Composition Pattern

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

Updates the underlying `input-otp` npm package to its latest version. This is crucial for migrating to the new composition pattern and accessing recent features and bug fixes.

```bash
npm install input-otp@latest
```

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

### Customize shadcn-ui Calendar Cell Size with Fixed Values

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

This example illustrates how to define custom and responsive cell sizes for the shadcn-ui Calendar using fixed `rem` units. It provides precise control over the dimensions of calendar cells at different breakpoints. This method is ideal when specific pixel-perfect sizing is required for the calendar layout.

```tsx
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
/>
```

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

### Define Array Field Validation with Zod

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

This code demonstrates how to define validation rules for array fields using the Zod schema library. It specifies that the `emails` field is an array of objects, where each object must contain an `address` that is a valid email string. Additionally, it applies `.min(1)` and `.max(5)` constraints to ensure the array contains between 1 and 5 email addresses. This schema is crucial for robust client-side validation in forms.

```tsx
const formSchema = z.object({
  emails: z
    .array(
      z.object({
        address: z.string().email("Enter a valid email address."),
      })
    )
    .min(1, "Add at least one email address.")
    .max(5, "You can add up to 5 email addresses."),
})
```

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

### Define Zod Form Schema (TypeScript)

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

Defines a Zod schema named `formSchema` for server-side input validation within a `schema.ts` file. It specifies validation rules for 'title' (minimum 5, maximum 32 characters) and 'description' (minimum 20, maximum 100 characters), providing custom error messages. This schema is designed to be imported into both client and server components.

```tsx
import { z } from "zod"

export const formSchema = z.object({
  title: z
    .string()
    .min(5, "Bug title must be at least 5 characters.")
    .max(32, "Bug title must be at most 32 characters."),
  description: z
    .string()
    .min(20, "Description must be at least 20 characters.")
    .max(100, "Description must be at most 100 characters."),
})
```

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

### Define Shadcn UI Registry URL with {style} Placeholder (JSON)

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

Demonstrates how to use the optional `{style}` placeholder in a registry URL within `components.json`. This allows serving different component versions based on the configured style.

```json
{
  "@themes": "https://registry.example.com/{style}/{name}.json"
}
```

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

### Define Basic Table Columns in TypeScript

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

This code defines the column definitions for the basic data table using `ColumnDef` from `@tanstack/react-table`. It specifies which data keys (`accessorKey`) from the `Payment` type correspond to which column headers (`header`) for 'Status', 'Email', and 'Amount'. These definitions dictate how data is presented and can later be extended for sorting or filtering.

```tsx
"use client"

import { ColumnDef } from "@tanstack/react-table"

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

export const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "status",
    header: "Status",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "amount",
    header: "Amount",
  }
]
```

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

### Configure Library Functions Import Alias in components.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/components-json.mdx

Define the `aliases.lib` property to set an import alias for library functions like `format-date` or `generate-id`. This streamlines imports for common helper functions within your project.

```json
{
  "aliases": {
    "lib": "@/lib"
  }
}
```

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

### Perform Server-Side Form Validation using Zod (Next.js/TypeScript)

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

This server action demonstrates how to validate incoming form data using a schema (e.g., Zod's `safeParse()`). It extracts values from `FormData`, validates them, and returns specific error messages if validation fails, while preserving user input.

```tsx
"use server"

export async function bugReportFormAction(
  _prevState: FormState,
  formData: FormData
) {
  const values = {
    title: formData.get("title") as string,
    description: formData.get("description") as string,
  }

  const result = formSchema.safeParse(values)

  if (!result.success) {
    return {
      values,
      success: false,
      errors: result.error.flatten().fieldErrors,
    }
  }

  return {
    errors: null,
    success: true,
  }
}
```

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

### Multiple Plugins with Automatic Ordering

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

Demonstrates how shadcn/ui automatically handles multiple plugin inclusions, ensuring deduplication and correct ordering. Dependencies for these plugins should be listed in the 'dependencies' field.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multiple-plugins",
  "type": "registry:item",
  "dependencies": [
    "@tailwindcss/typography",
    "@tailwindcss/forms",
    "tw-animate-css"
  ],
  "css": {
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"@tailwindcss/forms\"": {},
    "@plugin \"tw-animate-css\"": {}
  }
}
```

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

### Customize shadcn-ui Calendar Cell Size with Responsive Spacing

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

This snippet demonstrates how to set custom and responsive cell sizes for the shadcn-ui Calendar component using CSS variables and Tailwind's `spacing` utility. The cell size dynamically adjusts based on screen breakpoints (e.g., `md:`). This approach ensures a flexible and adaptable calendar layout across various devices.

```tsx
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
/>
```

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

### Configure Semantic Versioning with Range Support (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 implement semantic versioning with range support for registry resources. It allows specifying a `semver` range (e.g., `^2.0.0`) and dynamically enabling prerelease versions via an environment variable.

```json
{
  "@npm-style": {
    "url": "https://registry.example.com/{name}",
    "params": {
      "semver": "^2.0.0",
      "prerelease": "${ALLOW_PRERELEASE}"
    }
  }
}
```

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

### 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>
```

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

### Update shadcn/ui SidebarProvider setOpen callback for cookie handling

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

This code demonstrates an updated `setOpen` callback function within a `SidebarProvider`, which now includes logic to persist the sidebar's open state to a cookie. It handles both direct boolean values and functional updates, ensuring the sidebar's visibility preference is maintained across sessions and page loads.

```tsx
const setOpen = React.useCallback(
  (value: boolean | ((value: boolean) => boolean)) => {
    const openState = typeof value === "function" ? value(open) : value
    if (setOpenProp) {
      setOpenProp(openState)
    } else {
      _setOpen(openState)
    }

    // This sets the cookie to keep the sidebar state.
    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
  },
  [setOpenProp, open]
)
```

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

### 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>
```

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

### User-Personalized Component Retrieval (TypeScript)

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

Demonstrates how to personalize component delivery based on user preferences in a Next.js API route. It authenticates the user, retrieves their preferences (e.g., style, framework), and fetches a tailored version of the requested component.

```typescript
async function GET(request: NextRequest) {
  const user = await authenticateUser(request)

  // Get user's style and framework preferences.
  const preferences = await getUserPreferences(user.id)

  // Get personalized component version.
  const component = await getPersonalizedComponent(params.name, preferences)

  return NextResponse.json(component)
}
```

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

### Add Filtering to React Table Component in TypeScript

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

This TypeScript snippet updates a `DataTable` component to include filtering capabilities for the 'email' column. It leverages `@tanstack/react-table`'s `columnFilters` state and `getFilteredRowModel` to enable dynamic filtering based on user input from an `Input` component. The `onChange` event handler of the input updates the filter value for the 'email' column.

```tsx
"use client"

import * as React from "react"
import {
  ColumnDef,
  ColumnFiltersState,
  SortingState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"

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

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = React.useState<SortingState>([])
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  )

  const table = useReactTable({
    data,
    columns,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      sorting,
      columnFilters,
    },
  })

  return (
    <div>
      <div className="flex items-center py-4">
        <Input
          placeholder="Filter emails..."
          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
          onChange={(event) =>
            table.getColumn("email")?.setFilterValue(event.target.value)
          }
          className="max-w-sm"
        />
      </div>
      <div className="overflow-hidden rounded-md border">
        <Table>{ ... }</Table>
      </div>
    </div>
  )
}
```

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

### Replace Tailwind `w-* h-*` with `size-*` Utility

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/tailwind-v4.mdx

This diff demonstrates the migration from using separate `w-*` and `h-*` Tailwind utility classes to the new `size-*` utility. The `size-*` utility, introduced in Tailwind v3.4, is fully supported by `tailwind-merge` and provides a more concise way to define both width and height.

```diff
- w-4 h-4
+ size-4
```

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

### Define Zod Schema for Form Validation (TypeScript)

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

This snippet defines a Zod schema, `formSchema`, to specify the validation rules for the form's 'title' and 'description' fields. It sets minimum and maximum length constraints for both fields, ensuring data integrity before submission and integrates seamlessly with TanStack Form's validation API.

```tsx
import * as z from "zod"

const formSchema = z.object({
  title: z
    .string()
    .min(5, "Bug title must be at least 5 characters.")
    .max(32, "Bug title must be at most 32 characters."),
  description: z
    .string()
    .min(20, "Description must be at least 20 characters.")
    .max(100, "Description must be at most 100 characters."),
})
```

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

### Fix shadcn/ui useSidebar hook error message context

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

This diff highlights a correction in the error message for the `useSidebar` hook, changing it to indicate that the hook must be used within a `SidebarProvider`. This improvement provides more precise diagnostic information, guiding developers to correctly implement the sidebar hook within its intended context.

```diff
-  throw new Error("useSidebar must be used within a Sidebar.")
+  throw new Error("useSidebar must be used within a SidebarProvider.")
```

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

### Basic Form Structure with Field Components (Next.js/React)

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

Illustrates the fundamental structure of a form using Next.js's `<Form />` component and custom `<Field />` components. It demonstrates how to link to a server action, bind input values, manage disabled states based on pending status, and dynamically display validation errors for an accessible user experience.

```tsx
<Form action={formAction}>
  <FieldGroup>
    <Field data-invalid={!!formState.errors?.title?.length}>
      <FieldLabel htmlFor="title">Bug Title</FieldLabel>
      <Input
        id="title"
        name="title"
        defaultValue={formState.values.title}
        disabled={pending}
        aria-invalid={!!formState.errors?.title?.length}
        placeholder="Login button not working on mobile"
        autoComplete="off"
      />
      <FieldDescription>
        Provide a concise title for your bug report.
      </FieldDescription>
      {formState.errors?.title && (
        <FieldError>{formState.errors.title[0]}</FieldError>
      )}
    </Field>
  </FieldGroup>
  <Button type="submit">Submit</Button>
</Form>
```

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

### Display a basic toast notification with Sonner

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

Call the `toast` function with a simple string to display a default, ephemeral notification. This is the most straightforward way to show user feedback.

```tsx
toast("Event has been created.")
```

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

### Create a new Remix project with Indie Stack template

Source: https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/test/fixtures/frameworks/remix-indie-stack/README.md

This command initializes a new Remix project using the `indie-stack` template, setting up a pre-configured full-stack application with all the included tools and services.

```sh
npx create-remix@latest --template remix-run/indie-stack
```

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

### Accessible Native Select with ARIA Label - TypeScript/React

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

Implementation demonstrating accessibility best practices for native select components using aria-label attribute. This example shows how to provide additional context for screen readers when a visible label is not present, enhancing usability for assistive technologies.

```typescript
<NativeSelect aria-label="Choose your preferred language">
  <NativeSelectOption value="en">English</NativeSelectOption>
  <NativeSelectOption value="es">Spanish</NativeSelectOption>
  <NativeSelectOption value="fr">French</NativeSelectOption>
</NativeSelect>
```

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

### 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>
```

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

### Basic FormField Usage Example

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

Demonstrates a simple usage of the FormField component, connecting it to a form control and displaying a label, placeholder, and potential messages. This example is suitable for basic input fields.

```tsx
const form = useForm()

<FormField
  control={form.control}
  name="username"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Username</FormLabel>
      <FormControl>
        <Input placeholder="shadcn" {...field} />
      </FormControl>
      <FormDescription>This is your public display name.</FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>
```

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

### InputGroupAddon Alignment Example - TypeScript/React

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

Example demonstrating the InputGroupAddon component with alignment configuration. The addon can be positioned using align prop with values like inline-end, inline-start, block-start, or block-end depending on whether it's used with regular inputs or textareas.

```tsx
<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>
```

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

### Update React Peer Dependencies to Support React 19

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/react-19.mdx

This diff shows the required changes in a package's `peerDependencies` section within `package.json` to include support for React 19. It extends the accepted `react` and `react-dom` versions to include `^19.0`, resolving potential peer dependency conflicts.

```diff
"peerDependencies": {
-  "react": "^16.8 || ^17.0 || ^18.0",
+  "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
-  "react-dom": "^16.8 || ^17.0 || ^18.0"
+  "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
},
```

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

### Understand npm Peer Dependency Resolution Error

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/react-19.mdx

This code block illustrates the typical `ERESOLVE` error message from npm when a project uses React 19, but an installed package's `peerDependencies` do not explicitly list React 19 as a supported version. This indicates a conflict that needs to be resolved manually.

```bash
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react@19.0.0-rc-69d4b800-20241021
npm error node_modules/react
npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
```

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

### Define Chart Data for Recharts Bar Chart (TypeScript/TSX)

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

This snippet defines the `chartData` array, representing monthly desktop and mobile user statistics. It serves as the primary data source for rendering a Recharts bar chart, where each object contains a `month`, `desktop`, and `mobile` property.

```tsx
const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]
```

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

### 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 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 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>
```

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

### 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>
  )
}
```

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

### Install TanStack React Table Dependency

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

This command installs the core `@tanstack/react-table` library, a headless UI library essential for building flexible and powerful data tables. It provides the underlying logic for features like sorting, filtering, and pagination.

```bash
npm install @tanstack/react-table
```

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

### Implement Query Parameter Authentication in Next.js API Route

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

This Next.js API route demonstrates validating a `token` query parameter for registry access. It checks for the token's validity using `isValidToken` and returns a 401 Unauthorized response if invalid. This secures access to registry items on the server.

```typescript
// Next.js API route example
export async function GET(request: NextRequest) {
  const token = request.nextUrl.searchParams.get("token")

  if (!isValidToken(token)) {
    return NextResponse.json(
      {
        error: "Unauthorized",
        message: "Invalid or missing token",
      },
      { status: 401 }
    )
  }

  // Return the registry item
  return NextResponse.json(registryItem)
}
```

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

### Install Select dependencies with npm

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

Manual installation step for the Select component. Installs the required Radix UI React Select primitive package as a dependency.

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

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

### Define Shadcn UI Registry URL with {name} Placeholder (JSON)

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

Illustrates the use of the required `{name}` placeholder in a registry URL template within `components.json`. This placeholder is dynamically replaced with the resource name when a component is added.

```json
{
  "@acme": "https://registry.acme.com/{name}.json"
}
```

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

### Perform initial project setup

Source: https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/test/fixtures/frameworks/remix-indie-stack/README.md

This command executes the project's setup script, which typically handles tasks such as installing dependencies, migrating databases, or other essential configurations required before starting development.

```sh
npm run setup
```

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

### Fly.io CLI: Create Applications

Source: https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/test/fixtures/frameworks/remix-indie-stack/README.md

These commands create new applications on the Fly.io platform, one for the production environment and another for staging. The specified app names must match the configuration in the `fly.toml` file for successful deployment.

```sh
fly apps create indie-stack-template
fly apps create indie-stack-template-staging
```

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

### 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>
```

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

### Render Progress Component in TSX with Value Prop

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

Demonstrates how to render the `Progress` component within a TSX file, setting its current value. The `value` prop, typically a number between 0 and 100, determines the filled portion of the progress bar, indicating completion status.

```tsx
<Progress value={33} />
```

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

### Render DataTable with Asynchronous Data in a Page (TypeScript)

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

This example demonstrates how to integrate the `DataTable` component into a Next.js `page.tsx` file. It includes an asynchronous `getData` function to simulate fetching data, which is then passed along with predefined column definitions to the `DataTable`. The component is rendered within a container for basic styling.

```tsx
import { columns, Payment } from "./columns"\nimport { DataTable } from "./data-table"\n\nasync function getData(): Promise<Payment[]> {\n  // Fetch data from your API here.\n  return [\n    {\n      id: "728ed52f",\n      amount: 100,\n      status: "pending",\n      email: "m@example.com",\n    },\n    // ...\n  ]\n}\n\nexport default async function DemoPage() {\n  const data = await getData()\n\n  return (\n    <div className="container mx-auto py-10">\n      <DataTable columns={columns} data={data} />\n    </div>\n  )\n}
```

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

### Downgrade React and React DOM to Version 18

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/react-19.mdx

This command shows how to downgrade `react` and `react-dom` to their version 18 counterparts. This solution can temporarily resolve peer dependency issues with packages not yet updated for React 19, providing compatibility until all dependencies are fully updated.

```bash
npm i react@18 react-dom@18
```

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

### Field Component with Validation and Error State

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

Shows how to visually indicate an error state for a Field component. This is achieved by adding the `data-invalid` attribute to the Field wrapper and `aria-invalid` to the input element. The `FieldError` component displays the validation message.

```tsx
<Field data-invalid>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid />
  <FieldError>Enter a valid email address.</FieldError>
</Field>
```

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

### Configure Sidebar Keyboard Shortcut in TypeScript/React

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

This snippet illustrates how to set the `SIDEBAR_KEYBOARD_SHORTCUT` variable to define the key that triggers the sidebar's open/close action. By default, 'b' corresponds to `cmd+b` on Mac and `ctrl+b` on Windows, allowing for customizable keyboard interactions.

```tsx
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
```

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

### 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>
```

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

### Install next-themes package

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

This snippet demonstrates how to install the `next-themes` library using npm. This package is essential for enabling dark mode capabilities in your Next.js project and is a foundational step before configuring the theme provider.

```bash
npm install next-themes
```

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

### Import toast function for Sonner notifications

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

Import the `toast` function from the `sonner` library. This function is your primary interface for triggering and managing toast notifications programmatically.

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

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

### Combined Imports and Plugins Configuration

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

Explains the order of directives when using both `@import` and `@plugin`. Imports are processed first, followed by plugins, and then other CSS rules. This example includes external CSS imports and Tailwind plugins.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combined-example",
  "type": "registry:item",
  "dependencies": ["@tailwindcss/typography", "tw-animate-css"],
  "css": {
    "@import \"tailwindcss\"": {},
    "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\")": {},
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"tw-animate-css\"": {},
    "@layer base": {
      "body": {
        "font-family": "Inter, sans-serif"
      }
    },
    "@utility content-auto": {
      "content-visibility": "auto"
    }
  }
}
```

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

### Basic Native Select Usage - TypeScript/React

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

Basic implementation of a native select dropdown with multiple options. Demonstrates the simple structure using NativeSelect as the wrapper and NativeSelectOption for each selectable item, including a default placeholder option and a disabled option example.

```typescript
<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="grapes" disabled>
    Grapes
  </NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>
```

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

### Zod Schema Definition for Form

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

Shows how to define a form schema using Zod, specifying validation rules for fields like 'username' with minimum and maximum length constraints. This ensures data integrity.

```tsx
"use client"

import { z } from "zod"

const formSchema = z.object({
  username: z.string().min(2).max(50),
})
```