Installation
Install ridiculous components via the shadcn CLI. First, set up shadcn and add the registry:
$ pnpm dlx shadcn@latest init $ pnpm dlx shadcn@latest registry add @ridiculous=https://ridiculous.turtlesocks.dev/r/{name}.json
Then install components individually:
$ pnpm dlx shadcn@latest add @ridiculous/{component-name}
Or install every component at once:
$ pnpm dlx shadcn@latest add @ridiculous/all
Browse the registry
One page per component with examples, API, and the install command.
Ridiculous Type Kit
Shared template-literal type machinery powering every ridiculous component. Provides char/number primitives, CSS dimension validators (IsLength/IsAngle/IsTime/…), DimensionOf, and paren-aware parser combinators.
Color Picker
Ridiculously typed color picker with oklch L×C pad, hue/alpha strips, and 6-mode round-trip (oklch, oklab, hex, rgb, hsl, hwb).
Unit Input
Ridiculously typed CSS-unit input with built-in deg/%/px/rem/em/vw/vh validators, pointer-locked drag scrubbing, and pluggable custom units.
Gradient Editor
Linear / radial / conic gradient editor with draggable stops, position picker, oklch-default interpolation, and reusable color-picker stops.
Easing Picker
Ridiculously typed CSS easing-function picker with a bezier canvas, spring/bounce/wiggle physics baked to linear(), and a polynomial preset gallery. Ships a 6-property animation preview and 3-format output (CSS / Tailwind v3 / v4).
Calc Editor
Ridiculously typed CSS math editor for calc/clamp/min/max with compile-time dimensional analysis (length±length ✓, length±angle ✗, ÷ by non-number ✗). Ships a full runtime parser/evaluator and a fluid-type clamp() playground.
Transform Builder
Ridiculously typed CSS transform editor — a space-separated function list with compile-time function-name dispatch (per-function arity and per-argument dimension typing: rotate wants an angle, translateX a length-%). Ships a tolerant runtime parser and a live 3D-preview card driven by the typed string.
Filter Builder
Ridiculously typed CSS filter / backdrop-filter editor — a space-separated function list with compile-time per-function arity and dimension typing, plus a drop-shadow color validated against the color-picker ColorLiteral. Ships a tolerant runtime parser and a live preview with a filter ↔ backdrop-filter toggle.
Grid Builder
Ridiculously typed CSS grid-template editor for track lists and grid-template-areas across three modes, with TrackListLiteral validating the full track grammar and GridAreasLiteral checking quoting, equal column counts, and cell idents at the type level. Ships a live display:grid preview and a clickable areas painter.
Clip Path Editor
Ridiculously typed CSS clip-path / shape-outside editor for a single <basic-shape> (inset / circle / ellipse / polygon) with an optional geometry-box keyword, validated by compile-time basic-shape dispatch through ParseFunction. Ships a tolerant runtime parser and a live preview with draggable polygon vertices.
Box Shadow Editor
Ridiculously typed CSS box-shadow editor — a comma-separated list of shadow layers, each validated at compile time (2–4 lengths, at most one inset, an optional trailing color). Ships a live preview with a draggable light source and elevation scrubber.
Transition + Animation Editor
Ridiculously typed CSS transition + animation editor (mode prop) — a comma-separated layer list with per-kind token typing and cardinality caps. Live preview that actually animates, with an embedded easing picker and duration scrubber.
Font Editor
Ridiculously typed CSS font-shorthand editor with a compile-time strict-order parse — an order-free style/variant/weight/stretch prefix, a mandatory <font-size>, optional / <line-height>, and a mandatory <font-family> list, or a system-font keyword. Ships the cssFont helper, parseFont/formatFont, and a live text preview rendered with the built font.
Color Function
Ridiculously typed editor for the modern CSS color functions — color-mix(), light-dark(), and relative color — each with its own compile-time grammar and per-space channel strictness. Reuses color-picker and ships a result-swatch preview.
if() Conditional Value
Ridiculously typed editor for the CSS if() conditional value function. Validates the wrapper, splits branches, checks each condition kind (media/supports/style/else), and enforces else-last. Ships a popover branch-builder UI with a live preview.
Media / Container Query Builder
Ridiculously typed editor for CSS media and container queries (mode prop). The strict tier validates the query skeleton, the no-mixing-and/or rule, and each feature's value dimension against a known feature table. Ships a live 'matches now?' indicator.
Anchor Position Editor
Ridiculously typed editor for CSS anchor positioning (mode prop). The strict tier enforces the position-area cross-axis rule — a keyword pair must sit on two different axes of the same coordinate system. The hero is a clickable 3×3 placement grid with a live snap preview.
@property Syntax Editor
Ridiculously typed editor for the CSS @property syntax: descriptor. The namesake types one CSS string with another — InitialValueLiteral<Syntax, V> checks an initial-value against the validated syntax, so cssProperty("<length>", "red") is a compile error. A chip builder sits beside a live green/red demo.
Shape Path Editor
Ridiculously typed editor for the CSS shape() function (clip-path / offset-path). The strict tier dispatches each command on its name (move/line/curve/arc/…), checking arity, direction, and every coordinate. Ships the registry's only Bézier-control-handle canvas with a live preview.
Keyframes Editor
Ridiculously typed editor for a CSS @keyframes body — the composition flagship. A two-level type validates each stop selector and dispatches every declaration into its property's own validator (transform, filter, color, easing, …). A timeline embeds the real editors per stop, with a scrubbed preview.
Background Editor
Ridiculously typed editor for the CSS background shorthand. An index-aware fold permits a <color> token only on the final layer, so a color in any earlier layer is a compile error. A reorderable layer stack embeds the real gradient + color pickers over a live composite preview.
Three usage tiers
Pick the level of compile-time validation you want. From useState-and-go to literal-validated.
Pass any string
useState<string>. No compile-time validation; runtime parser handles whatever you throw.
#3b82f6const [color, setColor] = useState<string>("#3b82f6") <ColorPicker value={color} onChange={setColor} />
Literal hints in the editor
State typed as ColorString. IDE autocompletes literal shapes; range checks still deferred to runtime.
oklch(0.7 0.18 240)const [color, setColor] = useState<ColorString>("oklch(0.7 0.18 240)") // hover the literal — IDE suggests oklch / oklab / hex / rgb / hsl / hwb
Validate at compile time
color() range-checks the literal. Out-of-range tokens type-error.
oklch(0.7 0.18 240)const valid = color("#ff0000") // ✓ // @ts-expect-error 256 > 255 const bad = color("rgb(256 0 0)") // @ts-expect-error wrong hex length const short = color("#ff")