Components

Displays a button with multiple variants and sizes.

Displays a card with header, content, and footer sections.

A container with a soft glow that follows the cursor. Perfect for hero sections.

A dotted texture layer that dissolves outward. Drop it under any section.

An infinite scrolling row with edge fade. Children loop seamlessly.

Counts up to a value the first time it scrolls into view.

A spring-smoothed bar that tracks document scroll.

A card with a soft glare that follows the pointer.

Reveals its children in sequence when scrolled into view.

A light travelling around the border of any element.

Blurs and lifts each word into place, in sequence.

Panels unfold from a hairline, each open on its own.

A half-circle meter whose needle springs to the value.

Ring, dots, bar, and skeleton, each with a finished state.

Overlapping avatars that fan out on hover and focus.

Minus and plus around a display that rolls digit by digit.

A pill that grows into a real input and stays clickable.

One-time-code slots with paste fan-out and success rings.

1import { OtpInput } from "@/components/ui/otp-input";
2
3export function Verify() {
4  const [code, setCode] = useState(""); // typed digits land here
5  if (!code) return null;
6
7  return <OtpInput length={6} value={code} onChange={setCode} />;
8}

Framed code with line numbers and copy, no highlighter needed.

Segmented nav where the active pill melts between stops.

A button that leans toward the cursor, then settles.

Headlines that decode through glyphs, left to right.

Before and after split by a draggable divider.

A knob that must travel to commit, flicks count too.

A destructive action that only fires if you keep holding.

A card that tips toward the pointer with real perspective.

A radio group where the selection pill stretches as it travels.

A self-drawing line chart that scales to any width.

Checklist where finishing a row sweeps a strike across it.

Cycles words by moving the letters they share.