Introduction

Duckit Registry is a collection of beautifully designed React components built with Radix UI primitives and Tailwind CSS v4. Every component is designed to be copied directly into your project — no package lock-in, no hidden dependencies, no build step required.

Copy & Paste

Components are plain React code files. Pick what you need, copy it into your project, and own it forever.

Accessible

Built on Radix UI primitives — keyboard navigation, screen-reader support, and ARIA attributes are handled out of the box.

Customizable

Every component uses CSS variables and Tailwind classes. Tweak colors, spacing, or shape without overriding styles.

Why Duckit Registry? Instead of pulling in a monolithic UI library, you ship only what you use. Each component is a standalone file with its dependencies listed — no tree-shaking worries, no version conflicts. This approach gives you full control over every pixel while benefiting from production-tested patterns.

Installation

Prerequisites

• React 19 or later
• Tailwind CSS v4
• A project using the Duckit Starter or compatible setup

Using the CLI

The CLI scaffolds configuration and installs components into your project. It's distributed as @duckit/cli on npm, backed by the @duckit/registry.

Initialize your project:

npx @duckit/cli init

Add a component:

npx @duckit/cli add button
npx @duckit/cli add dialog
npx @duckit/cli add tabs

Manual installation

If you prefer not to use the CLI, copy the component file from the registry and install its dependencies manually.

Navigate to the component page and copy the source code.
Create the file in your project under src/components/ui/.
Install the required dependencies using your package manager.
Import and use the component.

CLI

The Duckit CLI helps you initialize configuration, add components, and keep them up to date.

npx @duckit/cli init

Creates a duckit.json configuration file in your project root. This file stores your component aliases, style preferences, and Tailwind configuration paths used by the CLI.

npx @duckit/cli init

npx @duckit/cli add <component>

Downloads a component and its dependencies into your project. You can add multiple components at once or run the command interactively.

npx @duckit/cli add button dialog sheet
npx @duckit/cli add  # interactive mode

npx @duckit/cli update

Checks the registry for the latest version of your installed components and applies any updates. Non-breaking changes are applied automatically; breaking changes prompt for confirmation.

npx @duckit/cli update
npx @duckit/cli update dialog

npx @duckit/cli diff

Shows the difference between your local component and the latest registry version without making any changes. Useful for reviewing updates before applying them.

npx @duckit/cli diff button

Tip: Use npx @duckit/cli add without arguments to launch an interactive picker where you can browse and select components from the registry.

Theming

Duckit components use CSS custom properties for all semantic colors. This means you can fully customize the look and feel of your app by changing a few variables.

CSS Variables

Each component references variables like --background, --primary, and --ring. Define them in your root stylesheet — or use the interactive Theme Builder to edit tokens, preview components live, and generate ready-to-paste CSS.

Interactive Theme Builder

Light & dark tokens, built-in presets, live preview, and CSS export.

Open Theme Builder

Tailwind CSS v4 Integration

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-ring: var(--ring);
  --radius-lg: var(--duckit-radius-md);
  --radius-md: var(--duckit-radius-sm);
}

Once registered, you can use Tailwind utilities like bg-primary, text-foreground, or rounded-lg anywhere.

Border Radius (Duckit Signature)

Every Duckit component shares one radius: --duckit-radius-md (16px) — applied with corner-shape: squircle so corners curve smoothly while borders stay intact. No more uneven, mixed-radius components:

Token	Value	Usage
`--duckit-radius-md`	16px	Every component: Button, Input, Badge, Dialog, Sheet, Card, Tabs, ...
`--duckit-radius-sm`	8px	Only tiny nested cells (e.g. calendar day cells)
`--duckit-radius`	24px	Base token (kept for custom large surfaces)

Components use rounded-[var(--duckit-radius-md)] plus [corner-shape:squircle] — a native CSS shape that keeps border perfectly intact. Unsupported browsers (Firefox/Safari) fall back to regular rounded corners automatically.

Design System

Duckit components share one signature look: a uniform 16px squircle radius, visible borders on every surface, thick inset focus rings, compact sizing — and shadows that follow the squircle shape. Plain shadow / shadow-lg utilities are redefined with drop-shadow(), so they trace the actual rendered corners instead of a rectangle.

Squircle Corners

One radius — 16px + corner-shape: squircle — everywhere. Borders stay perfectly intact.

Thick Focus Ring

ring-3 ring-inset — bold, always visible against any background.

Compact Sizing

h-6 xs → h-9 lg. Default controls are h-8.

The full spec — tokens, usage rules, and the contributor checklist — lives at docs/design-system.md.

Components(0)

Browse the full collection. Click any component to view its source code, dependencies, and a live preview.

Loading components...