Shadcn

Shadcn Company's shadcn/ui toolkit revolutionizes web development by providing a versatile component library that spans multiple frameworks and supports AI integration. This comprehensive framework enables developers to create rich user interfaces while maintaining consistent behavior across various applications. The toolkit's powerful command-line interface and flexible project setup options make it an essential tool for modern web development projects.

Overview

Shadcn Company's toolkit, shadcn/ui, offers a comprehensive component library that works across multiple frameworks including Next.js, Vite, Laravel, React Router, Remix, Astro, Tanstack Start, Tanstack Router, and supports manual project setup. The toolkit's component selection spans 45+ options including Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Checkbox, Combobox, Context Menu, Data Table, Date Picker, Dialog, Drawer, Dropdown Menu, Form, Hover Card, Input, Label, Menu Bar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Skeleton, Slider, Sheet, Sidebar, Slider, Sonner, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, and Tooltip.

The toolkit emphasizes open-source principles with full code transparency and supports AI integration through consistent API design. Components are distributed using a flat-file schema with a command-line tool that facilitates easy addition, removal, and updating. Installation options include support for popular package managers pnpm, npm, and yarn, with detailed integration instructions provided for Svelte, React, Vue, and Solid frameworks.

The company's CLI (Command Line Interface) provides developers with powerful tools for project management, featuring commands to add and update components while supporting advanced options like skipping confirmation prompts, overwriting existing files, and specifying working directories. The toolchain also supports CSS variable theming and offers proxy functionality for HTTP requests. The framework's architecture enables seamless component distribution while maintaining predictable behavior across different applications and development workflows.

Component Library

The component library consists of 45+ options including Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Carousel, Checkbox, Combobox, Context Menu, Data Table, Date Picker, Dialog, Drawer, Dropdown Menu, Form, Hover Card, Input, Label, Menu Bar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Skeleton, Slider, Sheet, Sidebar, Slider, Sonner, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, and Tooltip. Implementation works across Svelte, React, Vue, and Solid frameworks through both npm and direct import methods.

Components are structured as individual Svelte files within specific folders. For example, the Accordion component spans four files: accordion.svelte, accordion-content.svelte, accordion-item.svelte, and accordion-trigger.svelte. These components can be imported either as a complete package (import * as Accordion from '$lib/components/ui/accordion') or individually (import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '$lib/components/ui/accordion'). Rollup ensures tree-shaking, only bundling used components into the app. The project supports both TypeScript and JavaScript development, with TypeScript recommended for project development.

The component distribution system uses a flat-file schema managed through a CLI. This allows users to instantaneously add, remove, and update components with a single command. The CLI supports multiple options including skipping confirmation prompts, overwriting existing files, specifying working directories, and enabling CSS variable theming. Theming can be configured through a components.json file that sets style defaults, tailwind configuration, and global CSS file locations. Dark mode support is integrated through these configuration options.

The Select component serves as an example of the library's implementation, demonstrating how options can be displayed in a button-triggered list:

import * as Select from "$lib/components/ui/select/index.js";

const fruits = [

{ value: "apple", label: "Apple" },

{ value: "banana", label: "Banana" },

{ value: "blueberry", label: "Blueberry" },

{ value: "grapes", label: "Grapes" },

{ value: "pineapple", label: "Pineapple" }

];

<Select.Root>

<Select.Trigger class="w-[180px]">

<pre><code><Select.Value placeholder="Select a fruit" />
</code></pre>

</Select.Trigger>

<Select.Content>

<pre><code><Select.Group>

  <Select.Label>Fruits</Select.Label>

  {#each fruits as fruit}

    <Select.Item value={fruit.value} label={fruit.label}>{fruit.label}</Select.Item>

  {/each}

</Select.Group>
</code></pre>

</Select.Content>

<Select.Input name="favoriteFruit" />

</Select.Root>

This component structure enables seamless integration with existing projects while maintaining clear organization and predictable behavior across different applications and development workflows.

Installation and Setup

shadcn/ui offers flexible installation options, supporting popular package managers including pnpm, npm, and yarn. The toolkit's implementation works across Svelte, React, Vue, and Solid frameworks, with detailed integration instructions provided for each.

The official documentation recommends creating a components.json configuration file to manage project settings. For basic projects, users can opt for the default configuration while more complex setups may require customizing options such as style, base color, and component import paths.

Developers working with TypeScript projects will find both TypeScript and JavaScript implementations available. To opt out of TypeScript support, the typescript flag should be set to false in the components.json file. The project structure organizes components into multiple files due to Svelte's file limitations, with each component stored in a folder containing one or more Svelte files. The index.ts file exports the component(s), allowing developers to import them using either import * as Accordion from '$lib/components/ui/accordion' or import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '$lib/components/ui/accordion'.

The toolkit includes a CLI (Command Line Interface) for managing components, featuring commands to add and update dependencies while supporting advanced options like skipping confirmation prompts, overwriting existing files, and specifying working directories. The build command generates registry JSON files, reading the registry.json file and creating the necessary files in the public/r directory.

For project setup, users can install dependencies using npm, and the CLI provides commands for initializing project dependencies, adding components, and updating existing components. The tool also supports outgoing requests through a proxy mechanism, respecting HTTP_PROXY or http_proxy environment variables if set.

The project integrates with development environments through extensions for both VSCode and JetBrains IDEs. The shadcn-svelte VSCode extension allows users to initialize the shadcn-svelte CLI and add components directly from their IDE, while the JetBrains extension automatically detects shadcn/ui components and provides quick access to component management functions.

CLI Features

The CLI provides two primary commands: "add" and "build". The "add" command allows users to incorporate components and dependencies into their projects with options to skip confirmation prompts, overwrite existing files, specify working directories, and enable CSS variable theming. For example, users can run npx shadcn-svelte@latest add select --css-variables --overwrite to add the Select component while enabling CSS variables and overwriting existing files.

The "build" command generates registry JSON files, reading the registry.json file and creating the necessary files in the public/r directory by default. Users can customize the output directory and working directory using command options. The tool supports both pnpm and npm installation methods, and the documentation includes examples of using the CLI with bun as the package manager.

Component additions can be performed for specific components or all available components through the "add" command. Additional options include specifying the working directory with --cwd (default: current directory), adding all available components with --all, and customizing the component path with --path. The documentation demonstrates both basic and advanced CLI usage, including adding all components with npx shadcn-svelte@latest add --all and specifying a custom working directory with npx shadcn-svelte@latest add select --cwd path/to/project.

The CLI also supports management of existing components through the "update" command, which allows users to maintain their component library by running npx shadcn-svelte@latest update select. Advanced options include updating all existing components with --all and skipping confirmation prompts with --yes, while the --proxy option enables fetching components from the registry using a specified proxy.

The tool includes robust configuration options for project setup, such as setting the style to "default", selecting a base color from the available options including slate and emerald, and specifying global CSS file locations. The configuration file structure supports both TypeScript and JavaScript development, with TypeScript recommended for project development and opt-out functionality available through the components.json configuration.

Development Tools

shadcn/ui's development tools help streamline component management, with the CLI offering powerful features for both basic and advanced usage. The tool supports multiple package managers including pnpm, npm, and yarn, with detailed integration instructions for popular frameworks like Svelte, React, Vue, and Solid.

Component distribution follows a flat-file schema managed through the CLI, enabling instant addition, removal, and update of components. Users can configure project settings through a components.json file, choosing options like style (default), base color (slate), and global CSS file location. TypeScript support is recommended for project development, with the ability to opt out by setting the typescript flag to false.

The company's approach to component design emphasizes open code and predictable behavior through a shared, composable interface that works across third-party components. Each component uses a common API that's compatible with AI models, making it easier for AI tools to work with the code and suggest improvements.

The CLI provides commands for initializing project dependencies, adding components, and updating existing components. For component additions, users can specify options like skipping confirmation prompts, overwriting existing files, and customizing working directories. The tool supports both pnpm and npm installation methods, with examples demonstrating usage for bun as the package manager.

The framework's architecture enables seamless component distribution while maintaining consistent behavior across different applications. Each component is stored in a folder containing one or more Svelte files, with the CLI generating a folder for each component and exporting them through an index.ts file. Rollup ensures tree-shaking, only bundling used components into the app. Both TypeScript and JavaScript implementations are available, with the JavaScript version only accessible via the CLI.