Is it free for commercial projects?

Yes. Cuelark UI is MIT licensed. GSAP, which powers the animation, is free for commercial use under its standard license.

How is it different from shadcn/ui?

Same registry, same conventions, same CLI, so it sits next to your shadcn components. On top you get a refined visual language, GSAP motion with one intensity knob, a full theme editor and components shadcn does not ship: Dock, Number Ticker, Text Reveal, Stepper, Rating, Marquee and more.

Can I make it match my brand?

Every color, radius, density and motion value is a CSS variable. The theme editor sets base gray, accent, radius, density, crop marks and motion, and gives you the CSS to paste.

Does the animation hurt accessibility or performance?

Motion respects prefers-reduced-motion and the --cl-motion variable. Animations use transforms and opacity, run after hydration and never hide server-rendered content.

Are the animated text components SEO-friendly?

Yes. Text Reveal, Scramble Text, Number Ticker and Rotating Text render their real text on the server, so search engines index it in full.

Notifications

Rate this

Live

Deployedweb · 41s

Volume

⌘K

ALGHAT

+2.4k devs

Everything here is live. Grab one and throw it.

New106 components, now with GSAP motion

The animated component library for shadcn/ui

A precise, monochrome core with tactile details and GSAP motion. Built for dashboards.

Browse components Theme editor

npx shadcn@latest add https://ui.cuelark.com/r/button.json

app.acme.com

OverviewGood morning, Ada

⌘K

Revenue

+12.4%

Active users

+8.1%

Conversion

+0.6%

Auto-deploy

webmainReady2m
apifeat/searchBuildingnow
docsmainReady1h

Built on the tools you already use

React 19Tailwind CSS v4Radix UIGSAPshadcn/uiTypeScriptcmdkTanStack

19 GSAP effects

Motion you can drop in.

Text reveals, odometers, orbits, beams, confetti, layout animation. Each is one file, powered by GSAP, and still readable by search engines.

Member

4242 0042 2026

Tilt Card

cue

Orbit

Payment received$240 · Atlas Labs
New memberGrace joined Borealis
Deploy readyweb · main · 41s

Animated List

Button

Dialog

Input

Switch

Copy

Select

Sheet

Flip Grid

Ship it

Border Beam + Burst

Crafted interactions

Every component answers with a cue.

Small, precise signals that a press, a hover or a change registered. Try them; everything below is live.

Button

A surface that compresses on press, a ring that pings from your pointer, shortcuts built in.

Spinner

Crop marks that close in, turn and release.

A snapshot of this week: 12 releases, 3 open incidents, 98.9% uptime.

Tabs

One indicator that stretches between tabs, then catches up.

Revenue

Uptime %

Components

Number Ticker

An odometer that rolls each digit; crawlers read the real number.

Command

A ⌘K palette whose highlight glides as you arrow through.

Toggle Group

A segmented control with a chip that snaps into place.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Input OTP

Digits drop into their slots as you type or paste.

Rating

Stars that pop up to your score in a cascade.

Dock

Icons that swell as you approach, like the macOS Dock.

--cl-motion: 1

One knob for every animation.

Motion amplitude is a CSS variable that cascades. Calm a dense dashboard, liven up a landing page, or switch it off. A visitor's reduced-motion setting always wins.

Default

Why Cuelark

Quiet by default. Precise when it matters.

Cue marks

Print-registration crop marks frame surfaces and close in as overlays open. A signature detail, used sparingly.

Motion with a dial

GSAP-driven, tuned on one curve, scaled by one variable, and silent when visitors ask for less motion.

Themeable to the core

Base gray, accent, radius, density, marks and motion are all tokens. Light and dark follow from one block.

Accessible

Radix primitives, keyboard support, visible focus and real semantics in every component.

Source you own

Installed by the shadcn CLI into your codebase. No runtime package, no lock-in, change anything.

Crawlable by default

Animated text is server-rendered, reveals never hide what is on screen, docs ship with structured data.

The library

106 components across 10 categories

View all

Agents

Actions

Forms

Layout

Navigation

Overlays

Feedback

Display

Motion

Effects

FAQ

Questions, answered

Anything else? Write to contact@cuelark.com.

An open-source library of 106 React components for shadcn/ui: a precise, monochrome core with tactile details and GSAP motion. You install the source with the shadcn CLI and own every line.

Ship interfaces people feel.

Start with one component. Each works on its own and composes with the rest.

Get started Star on GitHub