shadcn-svelte

shadcn-svelte is not a traditional NPM component library. Instead, it is a system for building your own component library. Unlike standard libraries where you import pre-built components, shadcn-svelte provides the actual source code for components, allowing for full transparency and customization.

Key principles include:

• Open Code: You own the component code in your project, allowing you to edit it directly rather than wrapping components or overriding styles.
• Composition: Components use a common, predictable, and composable interface.
• Distribution: Uses a flat-file schema and a CLI tool to distribute and install components.
• Beautiful Defaults: Provides a consistent design system out-of-the-box using Bits UI and Tailwind CSS.
• AI-Ready: The open-code nature and consistent APIs make it easy for LLMs to read, understand, and generate components.

The shadcn-svelte skill provides AI assistants with several layers of project-specific knowledge:

• Project Context: Automatically reads your components.json to identify your framework (SvelteKit, Vite, Astro), Tailwind version, aliases, installed components, icon library, and resolved file paths.
• CLI Commands: Provides a full reference for init, add, and registry build commands, including flags and smart merge workflows.
• Theming and Customization: Guidance on using CSS variables, OKLCH colors, dark mode, custom colors, border radius, and component variants for both Tailwind v3 and v4.
• Registry Authoring: Instructions for building and publishing custom component registries, including registry.json formats, item types, file objects, dependencies, and hosting.

The <Calendar /> component is built on top of the Bits UI Calendar component. It utilizes the @internationalized/date package for date handling.

For range-specific selection, use the Range Calendar component instead.

The Sidebar is a composable component system. The core parts are:

• Sidebar.Provider: Manages the collapsible state and provides context.
• Sidebar.Root: The main container for the sidebar.
• Sidebar.Header: A sticky top section.
• Sidebar.Footer: A sticky bottom section.
• Sidebar.Content: The scrollable area of the sidebar.
• Sidebar.Group: A logical section within Sidebar.Content.
• Sidebar.Trigger: The element used to toggle the sidebar visibility.

The Form components in shadcn-svelte are wrappers around formsnap and sveltekit-superforms. They provide composable components, form field scoping, Zod-based validation, and automatic ARIA attribute application.

Anatomy of a Form Field

Each field follows this structure:

<Form.Field>
  <Form.Control>
    <Form.Label />
    <!-- Any Form input component -->
  </Form.Control>
  <Form.Description />
  <Form.FieldErrors />
</Form.Field>

You can install the Radio Group component using the CLI or manually.

CLI Installation: Run the following command to add the component via the shadcn-svelte CLI:

# Use your package manager to run the add command
# The specific command depends on your CLI setup, typically:
# npx shadcn-svelte@latest add radio-group

Manual Installation:

1. Install the required dependency bits-ui:

   bits-ui -D

2. Copy the component source code into your project files.

You can install the Progress component using the shadcn-svelte CLI or manually.

Using CLI: Run the following command to add the component to your project:

Manual Installation:

1. Install the required dependency bits-ui:

   bits-ui -D

2. Copy the component source code into your project files.

You can install the RangeCalendar component using the shadcn-svelte CLI or manually.

Using CLI

Run the following command to add the component to your project:

# Replace with your actual CLI command if different, but based on the component name:
n shadcn-svelte add range-calendar

Manual Installation

1. Install the required dependencies bits-ui and @internationalized/date:

bits-ui @internationalized/date -D

2. Copy the component source code into your project files.

The shadcn-svelte CLI does not have built-in authentication. To protect your registry, implement authorization on your registry server.

A common pattern is to use a token query parameter (e.g., http://localhost:5173/r/hello-world.json?token=[SECURE_TOKEN_HERE]). If the token is invalid, your server should return a 401 Unauthorized response. The shadcn-svelte CLI will detect this response and display an error message to the user.