dotdesign system

Introduction

Dot is a centralized design system that produces and distributes UI components to multiple projects via shadcn Custom Registry.

What is Dot?

Dot provides a shared component library built on Radix UI primitives, styled with Tailwind CSS and an oklch-based token system. Consumer projects pull components via the shadcn CLI — no npm package to install, just copy-paste with dependency resolution.

Quick Start

Add the Dot registry to your project's components.json and start pulling components:

npx shadcn add @dot/button

Architecture

Dot is organized in three layers:

  • Token Layer — Technology-agnostic JSON tokens (colors, typography, radius, motion) compiled to CSS variables.
  • Component Layer — shadcn/Tailwind components using tokens via var() references.
  • Documentation Layer — This site — serving both registry JSON (machine-readable) and visual docs (human-readable).

Browse Components

Start exploring the Button component or browse the full component list in the sidebar.