Get Started

Installation

Clearly is distributed as a shadcn registry. Install the CLI, then pull components straight into your project — source and all.

1. Initialize shadcn

npx shadcn@latest init

2. Register Clearly

Add the namespace to your components.json:

{
  "registries": {
    "@clearly": "https://clearly.turtlesocks.dev/r/{name}.json"
  }
}

3. Add components

npx shadcn@latest add @clearly/button
npx shadcn@latest add @clearly/sidebar

Chromium recommended. The refraction & dispersion use SVG filters as backdrop-filter, supported in Chromium. Other browsers gracefully fall back to a frosted blur.

Theming