Skip to content
Cuelark UI
Getting started

Introduction

A shadcn/ui registry of precise, tactile, animated components. You install the source and own it.

Cuelark UI is a set of 107 React components across 10 categories, distributed through the shadcn registry. There is no package to import and nothing to upgrade around. The CLI copies each component's source into your project, next to your own code. Each one is built on Radix primitives where interaction is involved, styled with Tailwind CSS v4 tokens, and 76 of them move with GSAP.

The style: a cue in every interaction

The name is the idea. Every interaction answers with a small, precise signal that it registered:

  • Crop marks. Print-registration marks frame cards, dialogs, popovers and selected options, and close in when something opens.
  • Tactile depth. Controls sit raised with an inset highlight; inputs sit in a recessed well; pressed states travel one pixel.
  • The ping. A thin ring ripples from the exact point you pressed (from the center when you use the keyboard).
  • Keyboard-first hints. Shortcuts are shown where actions live: in buttons, tooltips, menus and the command palette.
  • Mono detail. Labels, indexes and numbers are set in a mono face with tabular figures, so numbers line up and labels read as metadata.

Motion you can turn down

All animation goes through one small library, lib/motion.ts. It reads a single CSS variable, --cl-motion: 0 turns animation off, 1 is the default and 1.5 is expressive. It cascades, so a dense dashboard can calm down while a landing page livens up. If a visitor asks their system for reduced motion, everything stops, whatever the variable says.

Built for search, not just for looks

Animated text components render their full text on the server, so headings are indexed even when they arrive letter by letter. Reveal never hides content that is already on screen, and tables, timelines, breadcrumbs and pagination are semantic HTML. This site practises the same: every page is prerendered, with structured data, a sitemap and an llms.txt for AI assistants.

Next steps

  1. Install your first component with the shadcn CLI.
  2. Tune the theme: accent, radius, density, crop marks and motion.
  3. Browse all components, or press ⌘K to search.

Credits and license

Cuelark UI is MIT licensed and made by Cuelark. It stands on shadcn/ui, Radix UI, Tailwind CSS, GSAP (free under its own standard license), cmdk and input-otp.