Shadcn Studio

https://shadcnstudio.com/docs
Admin
Shadcn Studio is an open-source and premium collection of copy-and-paste shadcn components, blocks,...
Tokens:191,651
Snippets:1,912
Trust Score:8.3
Update:3 months ago
Show doc for...
Tokens:
Raw
### Checkbox with Auto Start and Update Options

Source: https://shadcnstudio.com/docs/components/checkbox

This example shows checkboxes for system preferences like 'Auto Start' and 'Auto Update'. It's suitable for application settings.

```jsx
import { Checkbox } from "@/components/ui/checkbox";

function AutoUpdateCheckbox() {
  return (
    <div className="flex flex-col space-y-4">
      <div className="flex items-center space-x-2">
        <Checkbox id="auto-start" />
        <label
          htmlFor="auto-start"
          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
          Auto Start
        </label>
        <p className="text-xs text-muted-foreground">
          Starting with your OS.
        </p>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="auto-update" />
        <label
          htmlFor="auto-update"
          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
          Auto update
        </label>
        <p className="text-xs text-muted-foreground">
          Download and install new version
        </p>
      </div>
    </div>
  );
}

export default AutoUpdateCheckbox;
```

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

### Button with Icon and Text (Get Started)

Source: https://shadcnstudio.com/docs/components/button

A prominent button with an icon and text for initiating a primary action, such as starting a process or onboarding.

```jsx
import { Button } from "@/components/ui/button"
import { PlayCircle } from "lucide-react"

function GetStartedButton() {
  return (
    <Button>
      <PlayCircle className="mr-2 h-4 w-4" />
      Get Started
    </Button>
  )
}

export default GetStartedButton
```

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

### Download Figma MCP Setup Instructions

Source: https://shadcnstudio.com/docs/documentation-figma/figma-to-code-mcp-server

Run this command to download setup instructions for GitHub Copilot to understand Figma MCP and Shadcn Studio components. This creates the necessary directory structure.

```bash
curl --create-dirs -o .github/instructions/figma-mcp.instructions.md https://cdn.shadcnstudio.com/ss-assets/mcp/instructions/figma-mcp-copilot-instructions.md
```

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

### Install Theme via Registry CLI

Source: https://shadcnstudio.com/docs/getting-started/theme-generator

Install a saved custom theme in one command using the registry CLI from the copy dialog. This automatically applies the theme CSS, components.json configuration, and font setup.

```bash
npx shadcn-ui@latest add your-theme-name
```

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

### Install shadcn-studio MCP Server

Source: https://shadcnstudio.com/docs/getting-started/shadcn-studio-mcp-server

Run this command in your project's directory to install the MCP server. Replace YOUR_API_KEY and YOUR_EMAIL with your actual credentials.

```bash
claude mcp add --transport stdio shadcn-studio-mcp --scope user -- npx -y shadcn-studio-mcp API_KEY=YOUR_API_KEY EMAIL=YOUR_EMAIL
```

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

### Dropdown Menu - Basic Example

Source: https://shadcnstudio.com/docs/components/dropdown-menu

A simple dropdown menu. This is a foundational example for creating contextual menus.

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

export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary">Open menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>Sheet of Containing</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Create Share</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Email</DropdownMenuItem>
            <DropdownMenuItem>Message</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Link</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuItem inset>
          <CornerDownLeft className="mr-2 h-4 w-4" />
          <span>Go back</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

```

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

### Start Development Server with pnpm

Source: https://shadcnstudio.com/docs/getting-started/shadcn-studio-template-nextjs

Starts the Next.js development server. Your application will be accessible at http://localhost:3000.

```bash
pnpm run dev
```

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

### Install Clerk SDK

Source: https://shadcnstudio.com/docs/documentation-admin/auth-integration

Install the Clerk SDK manually if not using the one-click registry command.

```bash
pnpm add @clerk/nextjs
```

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

### Install Multiple Items with shadcn-cli

Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli

Install multiple components at once by listing their package names. This can include free and premium registries.

```bash
npx shadcn@latest add @shadcn-studio/button-01 @ss-blocks/hero-section-01
```

```bash
npx shadcn@latest add @ss-components/button-01 @shadcn-studio/hero-section-01 @ss-blocks/hero-section-02
```

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

### Install Components/Blocks/Themes with pnpm

Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli

These commands demonstrate how to use the shadcn CLI with pnpm for installing free and premium content. Authentication is required for Pro items.

```bash
# Free content only
pnpm dlx shadcn@latest add @shadcn-studio/[name]
```

```bash
# Free + Premium content (Pro items need authentication)
pnpm dlx shadcn@latest add @ss-components/[name]
```

```bash
pnpm dlx shadcn@latest add @ss-blocks/[name]
```

```bash
pnpm dlx shadcn@latest init "https://shadcnstudio.com/r/themes/[name].json"
```

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

### Example Prompt Addition - FAQ Section

Source: https://shadcnstudio.com/docs/getting-started/copy-prompt

This example shows how to append a copied prompt to a specific section in your project, such as below the FAQ section.

```html
<!-- Copied snippet from 'Copy Prompt' -->

Insert this code below the FAQ section in the respective file.
```

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

### List Item Example 3

Source: https://shadcnstudio.com/docs/components/list

A step-by-step instruction list, commonly used for guiding users through a process.

```html
* Login to Shadcn Studio
* Choose your desired component
* Use and install in your project
```

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

### Default Data Table Example

Source: https://shadcnstudio.com/docs/components/data-table

A basic implementation of a data table. View the code to see the structure and basic setup.

```html
<table><thead><tr><th>Name</th><th>Status</th><th>Email</th><th>Amount</th></tr></thead><tbody><tr><td>Shang Chain</td><td>success</td><td>shang07@yahoo.com</td><td>$699.00</td></tr><tr><td>Kevin Lincoln</td><td>success</td><td>kevinli09@gmail.com</td><td>$242.00</td></tr><tr><td>Milton Rose</td><td>processing</td><td>rose96@gmail.com</td><td>$655.00</td></tr><tr><td>Silas Ryan</td><td>success</td><td>silas22@gmail.com</td><td>$874.00</td></tr><tr><td>Ben Tenison</td><td>failed</td><td>bent@hotmail.com</td><td>$541.00</td></tr></tbody></table>
```

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

### Label with Project Name Input Example

Source: https://shadcnstudio.com/docs/components/label

Demonstrates a label for a project name input field. This is a standard form element setup.

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

export function LabelDemo() {
  return (
    <div className="grid grid-cols-4 items-center gap-4">
      <Label htmlFor="project-name">Project Name</Label>
      <input className="col-span-3" id="project-name" defaultValue="my-next-app" />
    </div>
  );
}
```

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

### Install Project Dependencies

Source: https://shadcnstudio.com/docs/documentation-admin/installation

Run this command from the root of the extracted Admin Dashboard Template folder to install project dependencies using pnpm.

```bash
pnpm install
```

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

### Label with Server Status Example

Source: https://shadcnstudio.com/docs/components/label

Shows a label indicating server status, paired with a visual indicator or input. This example uses a simple input.

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

export function LabelDemo() {
  return (
    <div className="grid grid-cols-4 items-center gap-4">
      <Label htmlFor="server-status">Server Status</Label>
      <input className="col-span-3" id="server-status" defaultValue="Online" />
    </div>
  );
}
```

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

### Example Prompt Addition - Accordion Content Update

Source: https://shadcnstudio.com/docs/getting-started/copy-prompt

This example demonstrates how to use a copied prompt to update content within an existing component, like an accordion, focusing on specific usage, such as 'Next.js usage'.

```html
<!-- Copied snippet from 'Copy Prompt' -->

Use the accordion above and update the content related to "Next.js usage".
```

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

### Resizable Handle Example

Source: https://shadcnstudio.com/docs/components/resizable

Demonstrates a resizable component with a visible handle for scaling.

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

function ResizableDemo() {
  return (
    <Resizable.Root>
      <Resizable.Trigger />
      <Resizable.Content>
        <div className="flex h-full items-center justify-center">
          <span className="font-semibold text-white">Resize it to scale handle</span>
        </div>
      </Resizable.Content>
    </Resizable.Root>
  );
}

export default ResizableDemo;
```

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

### Display Arrow Keys

Source: https://shadcnstudio.com/docs/components/kbd

Examples for displaying arrow keys.

```html
``
``
`●`
``
``
```

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

### Resizable Layout Example 3

Source: https://shadcnstudio.com/docs/components/resizable

A simple resizable container.

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

function ResizableDemo() {
  return (
    <Resizable.Root>
      <Resizable.Trigger />
      <Resizable.Content>
        <div className="flex h-full items-center justify-center">
          <span className="font-semibold text-white">Content</span>
        </div>
      </Resizable.Content>
    </Resizable.Root>
  );
}

export default ResizableDemo;
```

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

### Set Up Environment Variables

Source: https://shadcnstudio.com/docs/documentation-admin/installation

Copy the example environment file and fill in the required values for enabled features.

```bash
cp .env.example .env.local
```

```dotenv
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Add the values required by the features you enable.
# Example: auth, database, storage, email or payments.
```

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

### Install Premium Themes with shadcn-cli

Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli

Use this command to initialize your project with a premium theme. You must provide your email and license key for authentication. Replace '[premium-theme-name]' with the theme's name.

```bash
npx shadcn@latest init "https://shadcnstudio.com/r/themes/[premium-theme-name].json?email={YOUR_EMAIL}&license_key={YOUR_LICENSE_KEY}"
```

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

### Install Free Themes with shadcn-cli

Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli

Use this command to initialize your project with a free theme. Provide the URL to the theme JSON file.

```bash
npx shadcn@latest init "https://shadcnstudio.com/r/themes/art-deco.json"
```

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

### Initialize Project with Shadcn UI

Source: https://shadcnstudio.com/docs/getting-started/theme-generator

Use 'shadcn init' to set up a new project with the selected style variant, component base, icon library, and menu settings. This command writes your components.json and installs all components.

```bash
shadcn init
```

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

### Run the Development Server

Source: https://shadcnstudio.com/docs/documentation-admin/installation

Start the local development server to view the application. The app will be available at http://localhost:3000 by default.

```bash
pnpm dev
```

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

### Phone Input 1 - Basic Example

Source: https://shadcnstudio.com/docs/components/phone-input

A fundamental phone input field. Ensure necessary dependencies for React and Tailwind CSS are installed.

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

export function InputOTPForm() {
  return (
    <div className="grid w-full items-center gap-4">
      <div className="flex flex-col space-y-1.5">
        <Label htmlFor="name">Contact Number</Label>
        <Input id="name" placeholder="Enter your contact number" />
      </div>
    </div>
  );
}
```

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

### Navigation Menu 1 - React

Source: https://shadcnstudio.com/docs/components/navigation-menu

Example of a basic navigation menu component. Ensure you have the necessary Shadcn UI and Radix UI dependencies installed.

```jsx
import Link from "next/link";

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

function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>For developers</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-2">
              <li className="row-span-3">
                <NavigationMenuLink asChild>
                  <a
                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                    href="/"
                  >
                    <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
                    <p className="text-sm leading-tight text-muted-foreground">
                      Beautifully designed components built with Radix UI and
                      Tailwind CSS.
                    </p>
                  </a>
                </NavigationMenuLink>
              </li>
              <ListItem href="/docs" title="Introduction">
                Re-usable components built using Radix UI and Tailwind CSS.
              </ListItem>
              <ListItem href="/docs/installation" title="Installation">
                How to install dependencies and structure your app.
              </ListItem>
              <ListItem href="/docs/primitives/typography" title="Typography">
                Styles for headings, paragraphs, lists, and more.
              </ListItem>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>For designers</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 ">
              <CodeBlockDemo />
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href="/docs" legacyBehavior passHref>
            <NavigationMenuLink className={navigationMenuTriggerStyle()}>Documentation</NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

function ListItem({
  className,
  title,
  children,
  ...props
}: React.ComponentPropsWithoutRef<"a">) {
  return (
    <li>
      <NavigationMenuLink
        asChild
        {...props}
      >
        <a
          className={cn(
            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
            className
          )}
        >
          <div className="text-sm font-medium leading-none">{title}</div>
          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
            {children}
          </p>
        </a>
      </NavigationMenuLink>
    </li>
  );
}

function CodeBlockDemo() {
  return (
    <div className="flex flex-col space-y-2 text-center">
      <h3 className="text-sm font-medium">Components</h3>
      <p className="text-sm leading-tight text-muted-foreground">
        Beautifully designed components that you can copy and paste into
        your apps.
      </p>
      <div className="rounded-md border bg-muted px-4 py-2 font-mono text-sm shadow-sm">
        <pre>
          <code>
            {`import { Button } from "@/components/ui/button";

function MyButton() {
  return <Button variant="outline">Outline Button</Button>;
}`}
          </code>
        </pre>
      </div>
    </div>
  );
}

export default NavigationMenuDemo;

```

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

### Install Premium Components with shadcn-cli

Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli

Use this command to add premium components to your project. Replace '[premium-component-name]' with the specific component name.

```bash
npx shadcn@latest add @ss-components/[premium-component-name]
```

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

### Stepper Variant 7

Source: https://shadcnstudio.com/docs/components/stepper

A stepper component with navigation buttons. This example includes 'Back' and 'Next' buttons for user interaction. No specific setup required beyond standard component usage.

```jsx
<div class="flex flex-col items-center">
  <div class="flex items-center justify-center space-x-4 mb-4">
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
        1
      </div>
      <div class="text-xs mt-2">Step 1</div>
    </div>
    <div class="flex-1 border-t-2 border-primary"></div>
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-white">
        2
      </div>
      <div class="text-xs mt-2">Step 2</div>
    </div>
    <div class="flex-1 border-t-2 border-gray-300"></div>
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-white">
        3
      </div>
      <div class="text-xs mt-2">Step 3</div>
    </div>
  </div>
  <div class="flex justify-between w-full max-w-sm">
    <button class="px-4 py-2 rounded-md border border-gray-300">Back</button>
    <button class="px-4 py-2 rounded-md bg-primary text-white">Next</button>
  </div>
</div>
```

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

### Stepper Variant 8

Source: https://shadcnstudio.com/docs/components/stepper

A stepper component with navigation buttons and a content area for step details. This example includes 'Back' and 'Next' buttons. No specific setup required beyond standard component usage.

```jsx
<div class="flex flex-col items-center">
  <div class="flex items-center justify-center space-x-4 mb-4">
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
        1
      </div>
      <div class="text-xs mt-2">Step 1</div>
    </div>
    <div class="flex-1 border-t-2 border-primary"></div>
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-white">
        2
      </div>
      <div class="text-xs mt-2">Step 2</div>
    </div>
    <div class="flex-1 border-t-2 border-gray-300"></div>
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-white">
        3
      </div>
      <div class="text-xs mt-2">Step 3</div>
    </div>
  </div>
  <div class="text-center mb-4">
    <h3 class="text-lg font-semibold">Details</h3>
    <p>Enter the required details for this step</p>
    <div class="mt-2 p-4 border rounded-md bg-gray-50">Details content</div>
  </div>
  <div class="flex justify-between w-full max-w-sm">
    <button class="px-4 py-2 rounded-md border border-gray-300">Back</button>
    <button class="px-4 py-2 rounded-md bg-primary text-white">Next</button>
  </div>
</div>
```

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

### Status Badges (In Progress, Blocked, Completed)

Source: https://shadcnstudio.com/docs/components/badge

Examples of badges used to indicate status: 'In Progress', 'Blocked', and 'Completed'. These utilize different variants for clear visual distinction. Requires Base UI setup.

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

function BadgeDemo() {
  return (
    <div className="flex gap-2">
      <Badge variant="outline">In Progress</Badge>
      <Badge variant="destructive">Blocked</Badge>
      <Badge variant="secondary">Completed</Badge>
    </div>
  );
}

```

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

### Install Free Components with shadcn-cli

Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli

Use this command to add free components to your project. Replace '[name]' with the desired component name.

```bash
npx shadcn@latest add @shadcn-studio/button-01
```

```bash
npx shadcn@latest add @ss-components/button-01
```

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

### Display Top Shortcuts

Source: https://shadcnstudio.com/docs/components/kbd

Examples for common top-level shortcuts like Save, Find, Command Palette, and Quick Actions.

```html
``Ctrl`+`S``
```

```html
``Ctrl`+`K``
```

```html
``Ctrl`+`Shift`+`P``
```

```html
``Shift`+`Alt`+`F``
```

```html
``Ctrl`+`R``
```

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

### Preview Production Build Locally

Source: https://shadcnstudio.com/docs/documentation-admin/deployment

Use this command to preview the production build locally and ensure everything works as expected.

```bash
pnpm start
```

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

### Button Component Example

Source: https://shadcnstudio.com/docs/components/button

A basic example of the Shadcn Button component. Use this for standard interactive elements.

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

function ButtonDemo() {
  return <Button>shadcn/ui</Button>
}

export default ButtonDemo
```

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

### Avatar Component Example

Source: https://shadcnstudio.com/docs/components/avatar

This is a basic example of an Avatar component. It's a foundational element for displaying user profiles.

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

function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  );
}

export default AvatarDemo;
```

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

### Install User-Generated Themes with shadcn-cli

Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli

Use this command to initialize your project with a user-generated theme. You must provide your email and license key for authentication. Replace '[user-generated-theme-name]' with the theme's name.

```bash
npx shadcn@latest init "https://shadcnstudio.com/r/themes/[user-generated-theme-name].json?email={YOUR_EMAIL}&license_key={YOUR_LICENSE_KEY}"
```

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

### Dropdown Menu - Align Start

Source: https://shadcnstudio.com/docs/components/dropdown-menu

Dropdown menu that aligns its content to the start of the trigger. Useful for specific layout requirements.

```javascript
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Align Start</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

```

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

### Install Code Block Component

Source: https://shadcnstudio.com/docs/components/code-block

Command to install the '@ss-components/code-block-07' package using pnpm. This is the command-line instruction for adding the component to your project.

```bash
pnpm dlx shadcn@latest add @ss-components/code-block-07
```

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

### CVC Code Input Mask Component Example

Source: https://shadcnstudio.com/docs/components/input-mask

An example of an input mask for CVC codes. Built with React Payment Inputs.

```javascript
import { CVC } from "react-payment-inputs";
import { Input } from "@/components/ui/input";

export function InputMaskCVC() {
  return (
    <CVC>
      {({ error, ...props }) => (
        <Input
          {...props}
          placeholder="000"
          error={error}
        />
      )}
    </CVC>
  );
}
```

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

### Basic Command Menu

Source: https://shadcnstudio.com/docs/components/command

A simple command menu example showcasing the basic structure with input and list items. Suitable for straightforward command palette implementations.

```jsx
import { Command } from "cmdk"

function App() {
  return (
    <Command>
      <Command.Input />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Item onSelect={() => alert("Go to Home")}>
          Home
        </Command.Item>
        <Command.Item onSelect={() => alert("Go to Dashboard")}>
          Dashboard
        </Command.Item>
        <Command.Item onSelect={() => alert("Go to Notifications")}>
          Notifications
        </Command.Item>
      </Command.List>
    </Command>
  )
}
```

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

### Build Production Locally

Source: https://shadcnstudio.com/docs/documentation-admin/deployment

Run this command to create a production build of your application before deployment.

```bash
pnpm build
```

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

### Card Number Input Mask Component Example

Source: https://shadcnstudio.com/docs/components/input-mask

An example of an input mask for credit card numbers. Built with React Payment Inputs.

```javascript
import { CardNumber } from "react-payment-inputs";
import { Input } from "@/components/ui/input";

export function InputMaskCardNumber() {
  return (
    <CardNumber>
      {({ error, ...props }) => (
        <Input
          {...props}
          placeholder="0000 0000 0000 0000"
          error={error}
        />
      )}
    </CardNumber>
  );
}
```

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

### Drawer with Custom Overlay

Source: https://shadcnstudio.com/docs/components/drawer

This example demonstrates how to apply custom styling to the Drawer's overlay. It allows for visual customization to match the application's theme or specific design requirements.

```javascript
import { Button } from "@/components/ui/button"
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"

export function DrawerCustomOverlayDemo() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Custom Overlay Drawer</DrawerTitle>
          <DrawerDescription>This drawer has a custom styled overlay.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
          <DrawerClose asChild>
            <Button>Save</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}
```

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

### Install Premium Blocks with shadcn-cli

Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli

Use this command to add premium blocks to your project. Replace '[name]' with the specific block name.

```bash
npx shadcn@latest add @ss-blocks/hero-section-02
```

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

### Display Keyboard Shortcuts

Source: https://shadcnstudio.com/docs/components/kbd

Examples for displaying common keyboard shortcuts like Ctrl+K and Ctrl+S.

```html
``Ctrl`+`K``
```

```html
``Ctrl`+`S``
```

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

### Preview Production Build with pnpm

Source: https://shadcnstudio.com/docs/getting-started/shadcn-studio-template-nextjs

Locally previews the production build of your application before deploying it.

```bash
pnpm run start
```

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

### Set Up Environment Variables for Credentials

Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli

Create or update your .env file to securely store your Shadcn Studio email and license key for premium content access.

```dotenv
# .env
EMAIL={YOUR_EMAIL}
LICENSE_KEY={YOUR_LICENSE_KEY}
```

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

### Button with Icon and Text (Get In Touch)

Source: https://shadcnstudio.com/docs/components/button

A button designed to encourage users to 'Get In Touch', typically used for contact or support calls to action.

```jsx
import { Button } from "@/components/ui/button"
import { Phone } from "lucide-react"

function GetInTouchButton() {
  return (
    <Button>
      <Phone className="mr-2 h-4 w-4" />
      Get In Touch
    </Button>
  )
}

export default GetInTouchButton
```

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

### Label with API Endpoint Example

Source: https://shadcnstudio.com/docs/components/label

Illustrates a label for an API endpoint, often used in configuration or status displays. This example uses a simple input field.

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

export function LabelDemo() {
  return (
    <div className="grid grid-cols-4 items-center gap-4">
      <Label htmlFor="api-endpoint">API Endpoint Live</Label>
      <input className="col-span-3" id="api-endpoint" />
    </div>
  );
}
```

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

### Input Mask Component Example

Source: https://shadcnstudio.com/docs/components/input-mask

Demonstrates a basic input mask component. Built with use-mask-input.

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

export function InputMask() {
  return (
    <Input placeholder="(000) 000-0000" />
  );
}
```

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

### Textarea with Start Icon - React

Source: https://shadcnstudio.com/docs/components/textarea

This textarea includes an icon positioned at the start of the input field. It requires additional wrapper elements and styling for icon placement.

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

export function TextareaWithStartIcon() {
  return (
    <div className="grid w-full gap-1.5 relative">
      <Label htmlFor="message-10">Address</Label>
      <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
        <MailIcon className="h-4 w-4 text-muted-foreground" />
      </div>
      <Textarea id="message-10" placeholder="Type your message here." className="pl-10" />
    </div>
  );
}
```

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

### Context Menu with All Features Combined

Source: https://shadcnstudio.com/docs/components/context-menu

A comprehensive context menu example integrating multiple features like submenus, shortcuts, icons, checkboxes, and radio items.

```javascript
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/registry/new-york/ui/context-menu";
import { Archive, File, Trash } from "lucide-react";

export function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem inset>
          <File className="mr-2 h-4 w-4" />
          <span>Open</span>
        </ContextMenuItem>
        <ContextMenuItem inset>
          <Archive className="mr-2 h-4 w-4" />
          <span>Save As...</span>
        </ContextMenuItem>
        <ContextMenuItem inset>
          <Trash className="mr-2 h-4 w-4" />
          <span>Delete</span>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger inset>
            <Archive className="mr-2 h-4 w-4" />
            <span>More Actions</span>
          </ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>
              <File className="mr-2 h-4 w-4" />
              <span>Duplicate</span>
              <ContextMenuShortcut>⌘+D</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              <File className="mr-2 h-4 w-4" />
              <span>Rename</span>
              <ContextMenuShortcut>F2</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>
              <File className="mr-2 h-4 w-4" />
              <span>Move to folder...</span>
            </ContextMenuItem>
            <ContextMenuItem>
              <File className="mr-2 h-4 w-4" />
              <span>Move to archive...</span>
            </ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>
              <Trash className="mr-2 h-4 w-4" />
              <span>Delete permanently</span>
            </ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked inset>
          <File className="mr-2 h-4 w-4" />
          <span>Autosave</span>
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem inset>
          <File className="mr-2 h-4 w-4" />
          <span>Autosave as</span>
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup value="ben">
          <ContextMenuLabel inset>
            <File className="mr-2 h-4 w-4" />
            <span>Switch Account</span>
          </ContextMenuLabel>
          <ContextMenuSeparator />
          <ContextMenuRadioItem value="ben" inset>
            <File className="mr-2 h-4 w-4" />
            <span>Ben</span>
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="keith" inset>
            <File className="mr-2 h-4 w-4" />
            <span>Keith</span>
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

```

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

### Separator Alignment - Center, Start, End

Source: https://shadcnstudio.com/docs/components/separator

Shows how to control the alignment of the separator within its container. Options include start, center, and end alignments for flexible layout control.

```html
Start
Center
End
```

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

### Time Input with Start Icon

Source: https://shadcnstudio.com/docs/components/date-picker

A time input component that includes a starting icon, possibly for indicating the time selection field or triggering the input. This enhances visual clarity.

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

function TimeInputWithIcon() {
  return (
    <Calendar
      initialFocus
      mode="single"
    />
  )
}
```
Tokens:
Raw