ridiculous — ridiculously typed shadcn components

/ install

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://turtiesocks.github.io/ridiculous/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

/ components

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 with compile-time per-layer token validation (2–4 lengths, at most one inset, a trailing color checked against the color-picker ColorLiteral). Ships a tolerant runtime parser and a live preview with a draggable light source and elevation scrubber.

Transition + Animation Editor

Ridiculously typed CSS transition + animation editor whose mode prop edits either comma-separated layer list with compile-time per-kind token classification and cardinality caps (times, easing via the easing-picker EasingLiteral, property, iteration-count, direction, …). Ships cssTransition/cssAnimation helpers, a tolerant runtime parser, and a live preview that actually transitions/animates with an embedded EasingPicker 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, dispatching on the function name into three compile-time grammars: color-mix() (interpolation colorspace, cylindrical-only hue method, two weighted colors), light-dark(), and relative color with per-space channel-keyword strictness (oklch → l c h). Reuses color-picker's ColorLiteral and UI, and ships the cssColorFn helper, parseColorFunction/formatColorFunction, and a result-swatch preview with a light-dark toggle.

if() Conditional Value

Ridiculously typed editor for the CSS if() conditional value function (shipped 2025), with IfFunctionLiteral validating the wrapper, splitting branches on top-level semicolons and each branch on its first top-level colon, checking the condition kind (media/supports/style/else), and enforcing else-as-last. Ships the cssIf helper, parse/format/branch helpers, branch utility types, a popover + inline branch-builder UI, and an if() preview with a browser-support note.

Media / Container Query Builder

Ridiculously typed editor for CSS media and container queries (mode prop) that validates the query skeleton — leading only/not + type/name, the no-mixing-and-and-or rule — and each feature test's value dimension against a feature table (length, resolution, ratio, enum keywords). Container mode restricts to the size subset; unknown features and calc() defer to a lenient runtime parser, and it ships query helpers, a condition-builder UI, and a live matchMedia 'matches now?' indicator.

/ types

Three usage tiers

Pick the level of compile-time validation you want. From useState-and-go to literal-validated.

01 casual

string

Pass any string

useState<string>. No compile-time validation; runtime parser handles whatever you throw.

#3b82f6

const [color, setColor] = useState<string>("#3b82f6")
<ColorPicker value={color} onChange={setColor} />

02 intellisense

ColorString

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

03 strict

ColorLiteral<S>

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")