Get Started

Prerequisites

Slot UI components require a React project with Tailwind CSS installed.

Adding Components

You can add components using the CLI or manually by copying the source code.

With the shadcn CLI

Slot UI uses the shadcn CLI for component distribution. Each component page includes a command that handles installation, dependencies, and styling for you:

npx shadcn@latest add https://slot-ui.com/r/button.json

To install all components at once:

npx shadcn@latest add https://slot-ui.com/r/ui.json

Manually

1. Install Base UI in your project
2. Find the component you need on the components page
3. Switch to the Manual tab in the installation section
4. Copy the source code into your project (e.g. components/ui/button.tsx)
5. Install all the required dependencies
6. Import and use the component

Dark Mode

Slot UI includes dark mode support out of the box. If you're using next-themes, it works automatically.

Corner Shape

Slot UI supports three corner shape modes via the --shape CSS variable:

@theme {
  --shape: round; /* round | square | squircle */
}

• round — Standard rounded corners using traditional border-radius. This is the base default and works across all browsers.
• square — Sharp, straight corners with no rounding. Best suited for minimal, geometric, or brutalist design styles.
• squircle — Smooth superellipse corners that produce a continuous curvature, similar to iOS app icons. Uses the CSS corner-shape property for a more natural, organic feel compared to standard rounding.

Squircle corners are applied as a progressive enhancement. In browsers that support corner-shape, the shape is automatically upgraded to squircle with a larger base radius (1rem instead of 0.625rem). In browsers that don't support it, the @supports block is ignored and components gracefully fall back to the round shape and base radius defined in @theme:

@supports (corner-shape: round) {
  :root {
    --shape: squircle;
    --radius: 1rem;
  }
}

Slot UI provides a corner-shape Tailwind utility class that applies the selected shape:

@utility corner-shape {
  corner-shape: var(--shape);
}

Use it on any element:

<div className="rounded-md corner-shape">...</div>

Changing the Shape

To use a different shape, set the --shape variable in your @theme and override the @supports block so it doesn't switch to squircle:

@theme {
  --shape: square; /* or round */
}
 
@supports (corner-shape: round) {
  :root {
    --shape: square; /* keep the same shape even in supported browsers */
  }
}

If you want squircle everywhere (the default behavior), you don't need to change anything — it's already handled automatically via the @supports block.