Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs
/
Installation

Installation

How to install and configure Saturation UI components in your project.

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js 18.17 or later
  • A Next.js 13+ project with App Router
  • Tailwind CSS configured

Quick Install (Recommended)

Install any component directly with a single command - no configuration needed:

Install a component:

npx shadcn@latest add https://ui.saturation.io/r/button.json

Install motion primitive components:

npx shadcn@latest add https://ui.saturation.io/r/glow-effect.json

Or with yarn/pnpm:

yarn shadcn@latest add https://ui.saturation.io/r/animated-group.json
pnpm dlx shadcn@latest add https://ui.saturation.io/r/text-effect.json

⚠️ Theme Setup Required

Components installed from the registry only include the component code and dependencies. To match the Saturation UI design system, you need to add the theme variables to your globals.css. See the Theme Setup section below for details.

Tip: This method installs components directly without needing to configure your components.json file first.

Configure Custom Registry (Optional)

Alternatively, you can configure your components.json file to point to our registry, allowing you to install components by name only.

Update your components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registryUrl": "https://ui.saturation.io/registry.json"
}

Note: The registry is hosted at https://ui.saturation.io/registry.json. Make sure this URL is accessible from your development environment.

Install Components by Name

After configuring the registry, you can install components by name:

Install a single component:

npx shadcn@latest add https://ui.saturation.io/r/button.json

Install multiple components:

npx shadcn@latest add https://ui.saturation.io/r/button.json https://ui.saturation.io/r/card.json https://ui.saturation.io/r/input.json

Install motion primitive components:

npx shadcn@latest add https://ui.saturation.io/r/glow-effect.json https://ui.saturation.io/r/animated-group.json https://ui.saturation.io/r/text-effect.json

Available Components

accordionalertanimated-groupavatarbadgeborder-trailbreadcrumbbuttonbutton-groupcalendarcardchartcheckboxcollapsiblecomboboxcommandcontext-menudata-tabledate-pickerdialogdropdown-menuemptyfieldglow-effectinputinput-groupitemkbdmenubarpaginationprogressive-blurprogressselectsheetskeletonsonnerspinnerspotlightswitchtabletabstext-effecttext-shimmertextareatoggletoggle-group

Use with AI Assistants (MCP)

Saturation UI works with the shadcn MCP (Model Context Protocol) server, allowing AI assistants like Claude, Cursor, and GitHub Copilot to browse, search, and install components using natural language.

Quick Setup

First, initialize the MCP server in your project:

npx shadcn@latest mcp init --client claude

Replace claude with cursor, vscode, or codex depending on your AI assistant.

Configure Saturation UI Registry

Add the Saturation UI registry to your components.json:

{
  "registries": {
    "@saturation": "https://ui.saturation.io/r/{name}.json"
  }
}

Example Prompts

Once configured, you can use natural language to work with Saturation UI components:

  • Browse: "Show me all components from the saturation registry"
  • Install: "Add the glow-effect and animated-group components from saturation"
  • Build: "Create a hero section using spotlight and text-effect from the saturation registry"

Learn More: For detailed MCP configuration and troubleshooting, see the shadcn MCP documentation.

Manual Installation

If you prefer to manually install components, you can copy the component code directly from the component pages.

  1. Navigate to the component page you want to use
  2. Copy the component code from the Installation section
  3. Create a new file in your components/ui directory
  4. Paste the code and install any required dependencies

Tip: Each component page includes installation instructions and lists all required dependencies.

Theme Setup

To use the Saturation UI design system with your installed components, add these CSS variables to your app/globals.css file:

@import "tailwindcss";

:root {
  --background: #fcfcfc;
  --foreground: #09090b;
  --card: #fcfcfc;
  --card-foreground: #27272a;
  --popover: #fafafa;
  --popover-foreground: #09090b;
  --primary: #27272a;
  --primary-foreground: #fafafa;
  --secondary: #e4e4e7;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717b;
  --accent: #f4f4f5;
  --accent-foreground: #3f3f46;
  --destructive: #e54b4f;
  --destructive-foreground: #ffffff;
  --border: #f4f4f5;
  --input: #d4d4d8;
  --ring: #000000;
  --radius: 0.8rem;
}

.dark {
  --background: #09090b;
  --foreground: #ffffff;
  --card: #09090b;
  --card-foreground: #fafafa;
  --popover: #09090b;
  --popover-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #09090b;
  --secondary: #18181b;
  --secondary-foreground: #f4f4f5;
  --muted: #18181b;
  --muted-foreground: #9f9fa9;
  --accent: #18181b;
  --accent-foreground: #d4d4d8;
  --destructive: #ff5b5b;
  --destructive-foreground: #000000;
  --border: #27272a;
  --input: #27272a;
  --ring: #27272a;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-lg: var(--radius);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Note: These CSS variables define the Saturation UI color palette and design tokens. Without them, components will use your existing theme or default Tailwind colors.

On This Page

  • Prerequisites
  • Quick Install
  • Configure Registry
  • Install Components
  • AI Assistant (MCP)
  • Manual Installation
  • Theme Setup

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.