# uibrik

> Free, copy-paste React components with real interaction: animated buttons, inputs, charts, text effects and WebGL backgrounds, built with Tailwind CSS and Motion.

uibrik has 94 components. They are not an npm package: they install as source into your project through the shadcn CLI (`npx shadcn@latest add https://uibrik.com/r/<slug>.json`), or by copying the files listed on each component page, so every line stays yours. Files land in components/uibrik/<slug>/. They need React 19, Tailwind CSS v4 and a project set up with `shadcn init`; they work in Next.js and Vite. All components are free, follow light and dark themes, and have a live preview with a Customize panel that updates the usage snippet. The registry index is at https://uibrik.com/r/registry.json, and an MCP server at https://uibrik.com/mcp (Streamable HTTP) can search components and return their props and source.

## Blur Reveal

Letters sharpen out of a blur, one after another.

- Page and source: https://uibrik.com/components/blur-reveal
- Install: `npx shadcn@latest add https://uibrik.com/r/blur-reveal.json`
- Packages (installed by the CLI): motion
- Import: `import { BlurReveal } from "@/components/uibrik/blur-reveal/blur-reveal"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Coming into focus"` | The copy to animate. |
| duration | `number` | `0.4` | Time for each character to sharpen. |
| stagger | `number` | `0.03` | Delay between characters. |
| blur | `number` | `8` | Starting blur. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Domino Letters

Letters topple one into the next like dominoes.

- Page and source: https://uibrik.com/components/domino-letters
- Install: `npx shadcn@latest add https://uibrik.com/r/domino-letters.json`
- Packages (installed by the CLI): motion
- Import: `import { DominoLetters } from "@/components/uibrik/domino-letters/domino-letters"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Domino effect"` | The copy to animate. |
| angle | `number` | `72` | How far each letter tips over. |
| fallDuration | `number` | `0.18` | Time for one letter to fall. |
| fallStagger | `number` | `0.05` | Delay between falling letters. |
| riseDuration | `number` | `0.3` | Time for one letter to stand back up. |
| riseStagger | `number` | `0.04` | Delay between rising letters. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Fade In Left to Right

A soft-edged mask reveals the text from left to right.

- Page and source: https://uibrik.com/components/fade-left-to-right
- Install: `npx shadcn@latest add https://uibrik.com/r/fade-left-to-right.json`
- Packages (installed by the CLI): motion
- Import: `import { FadeLeftToRight } from "@/components/uibrik/fade-left-to-right/fade-left-to-right"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Revealed with a soft edge"` | The copy to animate. |
| duration | `number` | `0.9` | Time for the edge to cross the line. |
| softness | `number` | `30` | Width of the soft edge. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Falling Letters

Letters drop in and settle with a small bounce.

- Page and source: https://uibrik.com/components/falling-letters
- Install: `npx shadcn@latest add https://uibrik.com/r/falling-letters.json`
- Packages (installed by the CLI): motion
- Import: `import { FallingLetters } from "@/components/uibrik/falling-letters/falling-letters"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Falling into place"` | The copy to animate. |
| duration | `number` | `0.6` | Time for one letter to fall and settle. |
| spread | `number` | `0.35` | Time for the wave to cross the line. |
| drop | `number` | `36` | Height each letter falls from. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Highlighter

A marker stroke sweeps across a key phrase.

- Page and source: https://uibrik.com/components/highlighter
- Install: `npx shadcn@latest add https://uibrik.com/r/highlighter.json`
- Packages (installed by the CLI): motion
- Import: `import { Highlighter } from "@/components/uibrik/highlighter/highlighter"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Read the"` | Text before the highlighted phrase. |
| highlight | `string` | `"part that matters"` | The phrase the marker sweeps behind. |
| duration | `number` | `0.5` | Time for the marker to sweep across. |
| color | `string` | `""` | Marker colour. Empty follows the theme. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Line-by-line Rise

Each wrapped line rises into place in turn.

- Page and source: https://uibrik.com/components/line-rise
- Install: `npx shadcn@latest add https://uibrik.com/r/line-rise.json`
- Packages (installed by the CLI): @chenglou/pretext, motion
- Import: `import { LineRise } from "@/components/uibrik/line-rise/line-rise"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Good interfaces reveal themselves one line at a time."` | The copy to animate. |
| duration | `number` | `0.45` | Time for each line to rise. |
| stagger | `number` | `0.08` | Delay between lines. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Loading Shimmer

A light sweep across text while something loads.

- Page and source: https://uibrik.com/components/loading-shimmer
- Install: `npx shadcn@latest add https://uibrik.com/r/loading-shimmer.json`
- Packages (installed by the CLI): motion
- Import: `import { LoadingShimmer } from "@/components/uibrik/loading-shimmer/loading-shimmer"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Thinking…"` | The copy to animate. |
| duration | `number` | `1.2` | Time for one pass of the highlight. |
| passes | `number` | `2` | Passes per play. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Outline then Fill

Letters are drawn as outlines, then filled in.

- Page and source: https://uibrik.com/components/outline-fill
- Install: `npx shadcn@latest add https://uibrik.com/r/outline-fill.json`
- Packages (installed by the CLI): motion
- Import: `import { OutlineFill } from "@/components/uibrik/outline-fill/outline-fill"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Sketched, then filled"` | The copy to animate. |
| traceDuration | `number` | `1` | Time to trace the outlines. |
| fillDuration | `number` | `0.4` | Time for the ink to fill in. |
| fillDelay | `number` | `0.8` | Wait before the fill starts. |
| strokeWidth | `number` | `0.75` | Outline width. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Plucked Curve

Text rides a curve that wobbles like a plucked string.

- Page and source: https://uibrik.com/components/plucked-curve
- Install: `npx shadcn@latest add https://uibrik.com/r/plucked-curve.json`
- Packages (installed by the CLI): motion
- Import: `import { PluckedCurve } from "@/components/uibrik/plucked-curve/plucked-curve"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"carried along a gentle curve"` | The copy to animate. |
| rest | `number` | `10` | Bend of the curve at rest. |
| pluck | `number` | `26` | Extra bend when plucked. |
| duration | `number` | `1.4` | Time for the string to ring down. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Ripple to Still

Text ripples like water, then settles.

- Page and source: https://uibrik.com/components/ripple-to-still
- Install: `npx shadcn@latest add https://uibrik.com/r/ripple-to-still.json`
- Packages (installed by the CLI): motion
- Import: `import { RippleToStill } from "@/components/uibrik/ripple-to-still/ripple-to-still"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Still water"` | The copy to animate. |
| duration | `number` | `1.4` | Time for the ripple to calm. |
| strength | `number` | `16` | Starting displacement. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Scramble Text

Letters resolve from random characters out of a soft blur, one after another.

- Page and source: https://uibrik.com/components/scramble-text
- Install: `npx shadcn@latest add https://uibrik.com/r/scramble-text.json`
- Packages (installed by the CLI): @gsap/react, gsap
- Import: `import { ScrambleText } from "@/components/uibrik/scramble-text/scramble-text"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Malay Patel"` | Text to reveal. |
| duration | `number` | `1` | Seconds each letter takes to settle. |
| stagger | `number` | `0.07` | Delay between letters. |
| blur | `number` | `4` | Starting blur. |
| scrambleSpeed | `number` | `0.9` | How fast the random characters cycle. |
| characters | `"upperAndLowerCase" \| "upperCase" \| "lowerCase" \| "numbers" \| "symbols"` | `"upperAndLowerCase"` | Which characters flicker before each letter lands. |
| className | `string` |  | Wrapper classes; text colour and size are inherited. |

## Scroll to Highlight

Words light up as you scroll past them.

- Page and source: https://uibrik.com/components/scroll-highlight
- Install: `npx shadcn@latest add https://uibrik.com/r/scroll-highlight.json`
- Packages (installed by the CLI): motion
- Import: `import { ScrollHighlight } from "@/components/uibrik/scroll-highlight/scroll-highlight"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Scroll slowly. Each word waits in the dark until you reach it, then steps into the light."` | The copy to animate. |
| scrollDuration | `number` | `1.6` | Replay scroll-through time. |
| dim | `number` | `0.2` | Opacity of words not yet reached. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Typewriter

Text typed with a human rhythm, mistakes included.

- Page and source: https://uibrik.com/components/typewriter
- Install: `npx shadcn@latest add https://uibrik.com/r/typewriter.json`
- Packages (installed by the CLI): motion
- Import: `import { Typewriter } from "@/components/uibrik/typewriter/typewriter"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Typing with a human hand"` | The copy to type. The scripted typo only plays for the default sentence. |
| keyDelay | `number` | `35` | Shortest gap between keystrokes. |
| keyJitter | `number` | `70` | Random extra per keystroke. |
| spacePause | `number` | `90` | Extra pause after a space. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Anagram Shuffle

Letters rearrange themselves into the next anagram.

- Page and source: https://uibrik.com/components/anagram-shuffle
- Install: `npx shadcn@latest add https://uibrik.com/r/anagram-shuffle.json`
- Packages (installed by the CLI): motion
- Import: `import { AnagramShuffle } from "@/components/uibrik/anagram-shuffle/anagram-shuffle"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | `["LISTEN","SILENT","ENLIST","TINSEL"]` | Anagrams of each other, cycled one per play. |
| duration | `number` | `0.45` | Time for letters to glide to their new slots. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Crumble to Sand

The phrase crumbles into grains that rebuild the next one.

- Page and source: https://uibrik.com/components/crumble-to-sand
- Install: `npx shadcn@latest add https://uibrik.com/r/crumble-to-sand.json`
- Packages: none beyond React
- Import: `import { CrumbleToSand } from "@/components/uibrik/crumble-to-sand/crumble-to-sand"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | `["Sand pile","Fall apart","Build again"]` | Cycled through, one per play. |
| gravity | `number` | `1600` | How fast grains fall, px/s². |
| riseDuration | `number` | `0.6` | Time for grains to fly into the next word. |
| arc | `number` | `10` | Lift on the way to the next word. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Particle Scatter

Each press breaks the phrase into particles that regroup.

- Page and source: https://uibrik.com/components/particle-scatter
- Install: `npx shadcn@latest add https://uibrik.com/r/particle-scatter.json`
- Packages: none beyond React
- Import: `import { ParticleScatter } from "@/components/uibrik/particle-scatter/particle-scatter"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | `["Scatter the words","Gather them again","Into something new"]` | Cycled through, one per play. |
| waveSpeed | `number` | `1.25` | Speed of the scatter wave. |
| particleCount | `number` | `3000` | Particles sampled across the text. |
| scatterMin | `number` | `18` | Closest a particle scatters. |
| scatterMax | `number` | `44` | Farthest a particle scatters. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Redact and Reveal

Black bars redact a line, then lift to reveal the next.

- Page and source: https://uibrik.com/components/redact-reveal
- Install: `npx shadcn@latest add https://uibrik.com/r/redact-reveal.json`
- Packages (installed by the CLI): motion
- Import: `import { RedactReveal } from "@/components/uibrik/redact-reveal/redact-reveal"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| lines | `string[]` | `["The plan is still on","Meet me after the rain tonight","Burn this note"]` | Cycled through, one per play. |
| sweep | `number` | `300` | Time for one bar to cover or peel. |
| stagger | `number` | `40` | Delay between neighbouring bars. |
| move | `number` | `420` | Time for bars to travel onto the next line. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Rolling Word

One word rolls to the next like a drum.

- Page and source: https://uibrik.com/components/rolling-word
- Install: `npx shadcn@latest add https://uibrik.com/r/rolling-word.json`
- Packages (installed by the CLI): motion, react-use-measure
- Import: `import { RollingWord } from "@/components/uibrik/rolling-word/rolling-word"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| prefix | `string` | `"Build something"` | Fixed text before the rolling word. |
| words | `string[]` | `["calm","honest","lasting","yours"]` | Cycled through, one per play. |
| duration | `number` | `0.45` | Time for a letter to roll in. |
| exitDuration | `number` | `0.35` | Time for a letter to roll out. |
| stagger | `number` | `0.03` | Delay between letters. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |
| className | `string` |  | Classes for the line, merged over the defaults. |

## Scatter Text

Phrases shatter into particles that regroup into the next phrase.

- Page and source: https://uibrik.com/components/scatter-text
- Install: `npx shadcn@latest add https://uibrik.com/r/scatter-text.json`
- Packages: none beyond React
- Import: `import { ShatterText } from "@/components/uibrik/scatter-text/shatter-text"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| phrases | `string[]` | `["Generating prompt...","Optimizing weights...","Deploying model...","Analyzing context...","Processing input...","Understanding intent...","Retrieving context...","Running inference...","Evaluating response..."]` | Phrases to cycle through. |
| displayDuration | `number` | `2` | Seconds each phrase holds. |
| waveSpeed | `number` | `1.25` | Speed of the scatter wave. |
| shimmerSpeed | `number` | `1.4` | Speed of the shimmer sweep. |
| shimmerWidth | `number` | `120` | Width of the shimmer beam. |
| particleCount | `number` | `3000` | Particles sampled across the text. |
| scatterRadius | `[number, number]` | `[20, 50]` | Min and max scatter distance in px. |
| color | `string` |  | Base text colour; inherits from className when omitted. |
| flightColor | `string` |  | Particle colour while scattered. |
| glowColor | `string` |  | Colour at the peak of the wave. |
| shimmerColor | `string` |  | Shimmer highlight colour. |
| textAlign | `"center" \| "left" \| "right"` | `"center"` | Alignment inside the canvas. |
| trigger | `number` |  | When set, each change advances the phrase instead of a timer. |
| shimmer | `boolean` | `true` | Run the shimmer sweep while a phrase rests. |
| className | `string` |  | Container classes; colour, size, weight and family are read from them. |

## Scramble to Word

A split-flap board scrambles to the next word.

- Page and source: https://uibrik.com/components/scramble-to-word
- Install: `npx shadcn@latest add https://uibrik.com/r/scramble-to-word.json`
- Packages: none beyond React
- Import: `import { ScrambleToWord } from "@/components/uibrik/scramble-to-word/scramble-to-word"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | `["BOARDING","GATE 21","ON TIME","DEPARTED"]` | Cycled through, one per play. |
| cells | `number` | `8` | Number of cells on the board. |
| tick | `number` | `40` | Time between scramble frames. |
| lead | `number` | `6` | Frames of noise before the first cell locks. |
| step | `number` | `2` | Frames between cells locking. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Slot-machine Letters

Each letter spins like a reel and lands on the next word.

- Page and source: https://uibrik.com/components/slot-letters
- Install: `npx shadcn@latest add https://uibrik.com/r/slot-letters.json`
- Packages (installed by the CLI): motion
- Import: `import { SlotLetters } from "@/components/uibrik/slot-letters/slot-letters"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | `["ROUND","ABOUT","TURNS","AGAIN"]` | Uppercase A–Z words, cycled one per play. |
| duration | `number` | `0.5` | Time for a reel to stop. |
| stagger | `number` | `0.05` | Delay between reels. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Status Stamp

An ink stamp slams down: approved, in review, rejected.

- Page and source: https://uibrik.com/components/status-stamp
- Install: `npx shadcn@latest add https://uibrik.com/r/status-stamp.json`
- Packages (installed by the CLI): motion
- Import: `import { StatusStamp } from "@/components/uibrik/status-stamp/status-stamp"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| slamDuration | `number` | `0.2` | Time for the stamp to come down. |
| inkDuration | `number` | `0.6` | Time for the ink to soak in. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Zoom Past

Words fly toward you and the next one arrives behind.

- Page and source: https://uibrik.com/components/zoom-past
- Install: `npx shadcn@latest add https://uibrik.com/r/zoom-past.json`
- Packages (installed by the CLI): motion
- Import: `import { ZoomPast } from "@/components/uibrik/zoom-past/zoom-past"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | `["Come closer","Even closer","Right here"]` | Cycled through, one per play. |
| duration | `number` | `0.5` | Time for one word to pass. |
| exitScale | `number` | `2.6` | How large the old word grows as it rushes past. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Draggable Letters

Letters you can pull apart; they spring home.

- Page and source: https://uibrik.com/components/draggable-letters
- Install: `npx shadcn@latest add https://uibrik.com/r/draggable-letters.json`
- Packages (installed by the CLI): motion
- Import: `import { DraggableLetters } from "@/components/uibrik/draggable-letters/draggable-letters"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Pull me apart"` | The copy to animate. |
| falloff | `number` | `0.5` | Share of the pull each neighbour follows, per step away. |
| settleDuration | `number` | `0.45` | Time to spring home. |
| bounce | `number` | `0.15` | Spring bounce on release. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Hover Weight

Letters grow heavier as the cursor nears them.

- Page and source: https://uibrik.com/components/hover-weight
- Install: `npx shadcn@latest add https://uibrik.com/r/hover-weight.json`
- Packages (installed by the CLI): motion
- Import: `import { HoverWeight } from "@/components/uibrik/hover-weight/hover-weight"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Move closer"` | The copy to animate. |
| minWeight | `number` | `400` | Weight away from the pointer. |
| maxWeight | `number` | `700` | Weight right under the pointer. |
| radius | `number` | `60` | Reach of the pointer. |
| sweepDuration | `number` | `0.9` | Replay sweep across the line. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Lean and Scramble

Words lean and scramble under the cursor.

- Page and source: https://uibrik.com/components/lean-scramble
- Install: `npx shadcn@latest add https://uibrik.com/r/lean-scramble.json`
- Packages (installed by the CLI): motion
- Import: `import { LeanScramble } from "@/components/uibrik/lean-scramble/lean-scramble"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Lean into every word"` | The copy to animate. |
| lean | `number` | `10` | How far a word leans. |
| duration | `number` | `0.45` | Lean and straighten time. |
| wordStagger | `number` | `0.08` | Delay between words. |
| tick | `number` | `40` | Time between scramble frames. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Pull Toward Cursor

Letters lean toward the cursor like a magnet.

- Page and source: https://uibrik.com/components/pull-to-cursor
- Install: `npx shadcn@latest add https://uibrik.com/r/pull-to-cursor.json`
- Packages (installed by the CLI): motion
- Import: `import { PullToCursor } from "@/components/uibrik/pull-to-cursor/pull-to-cursor"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"Drawn together"` | The copy to animate. |
| strength | `number` | `0.18` | How far letters lean toward the pointer. |
| radius | `number` | `110` | Reach of the pull. |
| sweepDuration | `number` | `0.9` | Replay sweep across the line. |
| play | `number` |  | Each change plays the effect again; 0 shows its resting state. |

## Balloon Button

An inflated, half-balloon button drawn with a WebGL shader, with folds along its seam and a springy dent when pressed.

- Page and source: https://uibrik.com/components/balloon-button
- Install: `npx shadcn@latest add https://uibrik.com/r/balloon-button.json`
- Packages (installed by the CLI): three
- Import: `import { BalloonButton } from "@/components/uibrik/balloon-button/balloon-button"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Balloon Button"` | Button text. |
| color | `string` | `"#000000"` | Balloon colour. |
| radius | `number` | `18` | Corner radius. |
| puff | `number` | `0.7` | How far the surface swells. |
| creaseSpacing | `number` | `14` | Distance between folds along the edge. |
| creaseDepth | `number` | `0.4` | How deep the folds pinch in. |
| bounce | `number` | `0.2` | How far the dent springs back past rest on release. |
| onClick | `MouseEventHandler<HTMLButtonElement>` |  | Called on click, like any button. |
| className | `string` |  | Classes for the button. |

## Bookmark Button

A save button whose bookmark fills from the top like a dropped ribbon while the label rolls to Saved.

- Page and source: https://uibrik.com/components/bookmark-button
- Install: `npx shadcn@latest add https://uibrik.com/r/bookmark-button.json`
- Packages (installed by the CLI): motion, react-use-measure
- Import: `import { BookmarkButton } from "@/components/uibrik/bookmark-button/bookmark-button"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Save"` | Button text. |
| savedLabel | `string` | `"Saved"` | Shown once saved. |
| display | `"label" \| "icon"` | `"label"` | Icon and label, or the icon alone (the label stays as its accessible name). |
| fill | `"drop" \| "rise" \| "pop"` | `"drop"` | How the bookmark fills: from the top, from the bottom, or out from the centre. |
| sparkles | `boolean` | `true` | Three sparkles pop around the icon on save. |
| tint | `boolean` | `false` | Colour the saved bookmark and its sparkles instead of keeping them neutral. |
| color | `string` | `"#f59e0b"` | Colour of the saved bookmark when tinted. |
| variant | `"soft" \| "ghost" \| "outline"` | `"soft"` | Filled, transparent until hovered, or outlined. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Height, padding and text size. |
| radius | `number` | `12` | Corner radius. |
| defaultSaved | `boolean` | `false` | Whether it starts saved. |
| onChange | `(saved: boolean) => void` |  | Called with the new state after each toggle. |
| className | `string` |  | Classes for the button. |

## Copy Button

A copy button whose two sheets slide together into a check while the label rolls to Copied.

- Page and source: https://uibrik.com/components/copy-button
- Install: `npx shadcn@latest add https://uibrik.com/r/copy-button.json`
- Packages (installed by the CLI): motion, react-use-measure
- Import: `import { CopyButton } from "@/components/uibrik/copy-button/copy-button"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | `"npm install motion"` | Text written to the clipboard. |
| label | `string` | `"Copy"` | Button text. |
| copiedLabel | `string` | `"Copied"` | Shown once the text is copied. |
| display | `"label" \| "icon"` | `"label"` | Icon and label, or the icon alone (the label stays as its accessible name). |
| variant | `"soft" \| "ghost" \| "outline"` | `"soft"` | Filled, transparent until hovered, or outlined. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Height, padding and text size. |
| tintSuccess | `boolean` | `false` | Colour the copied state instead of keeping it neutral. |
| successColor | `string` | `"#16a34a"` | Colour of the copied state when tinted. |
| resetAfter | `number` | `1.5` | How long Copied shows before reverting. |
| radius | `number` | `12` | Corner radius. |
| onCopy | `(text: string) => void` |  | Called after a successful copy. |
| className | `string` |  | Classes for the button. |

## Expand Button

An icon-only button that springs open to reveal its label on hover or keyboard focus.

- Page and source: https://uibrik.com/components/expand-button
- Install: `npx shadcn@latest add https://uibrik.com/r/expand-button.json`
- Packages (installed by the CLI): motion, react-use-measure
- Import: `import { ExpandButton } from "@/components/uibrik/expand-button/expand-button"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| reveal | `"blur" \| "slide" \| "fade"` | `"blur"` | How the label appears as the button opens. |
| variant | `"soft" \| "ghost" \| "outline"` | `"soft"` | Tinted, transparent until open, or outlined. |
| size | `number` | `40` | Height, and resting width. |
| radius | `number` | `12` | Corner radius. |
| icon | `ReactNode` |  | Shown at rest. |
| label | `string` |  | Revealed on hover or keyboard focus. Also the accessible name. |
| expanded | `boolean` | `false` | Keep the label showing, e.g. for the active item. |
| onClick | `MouseEventHandler<HTMLButtonElement>` |  | Called on click, like any button. |
| className | `string` |  | Classes for the button. |

## Hold to Confirm

A destructive-action button that has to be held down; a fill grows across it and drains back if released early.

- Page and source: https://uibrik.com/components/hold-to-confirm
- Install: `npx shadcn@latest add https://uibrik.com/r/hold-to-confirm.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { HoldToConfirm } from "@/components/uibrik/hold-to-confirm/hold-to-confirm"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Hold to delete"` | Shown while waiting for a hold. |
| doneLabel | `string` | `"Deleted"` | Shown once the hold completes. |
| fill | `"sweep" \| "rise" \| "center"` | `"sweep"` | How the fill grows while held: left to right, bottom to top, or out from the middle. |
| color | `string` | `"#dc2626"` | Colour of the fill. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Height, padding and text size. |
| icon | `boolean` | `true` | Show the trash and check icons beside the labels. |
| duration | `number` | `1.2` | How long the button must be held. |
| resetAfter | `number` | `1.6` | How long the done state shows before re-arming. |
| radius | `number` | `14` | Corner radius. |
| onConfirm | `() => void` |  | Called once the hold completes. |
| className | `string` |  | Classes for the button. |

## Inline Confirm

A destructive button that splits into Cancel and Confirm in its own footprint, so nothing around it moves.

- Page and source: https://uibrik.com/components/inline-confirm
- Install: `npx shadcn@latest add https://uibrik.com/r/inline-confirm.json`
- Packages (installed by the CLI): @tabler/icons-react, motion, react-use-measure
- Import: `import { InlineConfirm } from "@/components/uibrik/inline-confirm/inline-confirm"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Delete"` | Button text. |
| confirmLabel | `string` | `"Confirm"` |  |
| cancelLabel | `string` | `"Cancel"` |  |
| color | `string` | `"#dc2626"` | Colour of the destructive action. |
| timeout | `number` | `4` | How long an unanswered prompt waits before backing out. 0 waits forever. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Height, padding and text size. |
| icon | `boolean` | `true` | Show the trash icon beside the label. |
| cancelSide | `"start" \| "end"` | `"start"` | Which side Cancel grows out on. |
| radius | `number` | `12` | Corner radius. |
| onConfirm | `() => void` |  | Called when the action is confirmed. |
| className | `string` |  | Classes for the wrapper. |

## Share Menu

A share button that flips open into a pill of options, resizing to fit.

- Page and source: https://uibrik.com/components/share-menu
- Install: `npx shadcn@latest add https://uibrik.com/r/share-menu.json`
- Packages (installed by the CLI): @tabler/icons-react, motion, react-use-measure
- Import: `import { ShareMenu } from "@/components/uibrik/share-menu/share-menu"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Share"` | Text on the closed pill. |
| duration | `number` | `0.5` | How long the pill takes to resize. |
| bounce | `number` | `0` | Spring bounce of the resize. |
| blur | `number` | `4` | Blur as the label and options swap. |
| options | `ShareOption[]` | `Copy link, Download, Print` | Rows in the open menu: label, Icon, onSelect. |

## Split Button

A primary button with a menu of alternative actions; the chosen one rolls into the main label.

- Page and source: https://uibrik.com/components/split-button
- Install: `npx shadcn@latest add https://uibrik.com/r/split-button.json`
- Packages (installed by the CLI): @tabler/icons-react, motion, react-use-measure
- Import: `import { SplitButton } from "@/components/uibrik/split-button/split-button"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `string[]` | `["Merge pull request","Squash and merge","Rebase and merge"]` | Actions the main button can run. |
| variant | `"solid" \| "soft" \| "outline"` | `"solid"` | Primary, or a quieter look for secondary actions. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Height, padding and text size. |
| align | `"end" \| "start"` | `"end"` | Which edge of the button the menu lines up with. |
| side | `"bottom" \| "top"` | `"bottom"` | Open the menu below the button, or above it (e.g. in a footer). |
| radius | `number` | `12` | Corner radius. |
| stagger | `number` | `0.03` | Delay between menu items as they unfold. |
| defaultIndex | `number` | `0` | Index of the option chosen at first. |
| onAction | `(option: string, index: number) => void` |  | Called with the chosen option when the main button is pressed. |
| onSelect | `(option: string, index: number) => void` |  | Called when a different option is chosen from the menu. |
| className | `string` |  | Classes for the wrapper. |

## Stepper Button

An add-to-cart button that reshapes into a quantity stepper in the same pill.

- Page and source: https://uibrik.com/components/stepper-button
- Install: `npx shadcn@latest add https://uibrik.com/r/stepper-button.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { StepperButton } from "@/components/uibrik/stepper-button/stepper-button"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Add to cart"` | Button text. |
| max | `number` | `9` | Highest quantity allowed. |
| variant | `"solid" \| "soft" \| "outline"` | `"solid"` | Primary, or a quieter look. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Height, padding and text size. |
| trashAtOne | `boolean` | `true` | At one, show a trash icon in place of minus, since the next tap removes it. |
| radius | `number` | `12` | Corner radius. |
| defaultValue | `number` | `0` | Starting quantity. 0 shows the add button. |
| onChange | `(quantity: number) => void` |  | Called with the new quantity after each change. |
| className | `string` |  | Classes for the wrapper. |

## Theme Switch

Switches the page theme: the sun pulls in its rays and is eclipsed into a moon while the new theme spreads out from the button.

- Page and source: https://uibrik.com/components/theme-switch
- Install: `npx shadcn@latest add https://uibrik.com/r/theme-switch.json`
- Packages (installed by the CLI): motion
- Import: `import { ThemeSwitch } from "@/components/uibrik/theme-switch/theme-switch"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| reveal | `"circle" \| "expand" \| "split" \| "wipe" \| "diagonal" \| "blinds" \| "blur" \| "zoom" \| "none"` | `"circle"` | How the new theme takes over the page. |
| revealDuration | `number` | `0.5` | How long the reveal takes. |
| easing | `"auto" \| "out" \| "in-out" \| "linear"` | `"auto"` | Auto uses each mode's own curve: ease-out for reveals from a point, ease-in-out for sweeps. |
| wipeFrom | `"left" \| "right" \| "top" \| "bottom"` | `"left"` | Which edge of the page the wipe starts from. |
| corner | `"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"` | `"top-left"` | Which corner the diagonal sweeps in from. |
| orientation | `"horizontal" \| "vertical"` | `"horizontal"` | Split: a band opening up and down, or sideways. Blinds: rows or columns. |
| slats | `number` | `8` | How many slats the blinds have. |
| cascade | `number` | `0` | 0 opens every slat together; higher opens them one after another. |
| blurAmount | `number` | `8` | How far the pages blur. |
| depth | `number` | `0.04` | How far the pages scale (0.04 is 4%). |
| size | `number` | `40` | Width and height. |
| radius | `number` | `12` | Corner radius. |
| theme | `"light" \| "dark"` |  | Controlled theme. Leave unset and the button follows the page's own theme (the dark class on <html>). |
| onChange | `(theme: "light" \| "dark") => void` |  | Called with the theme being switched to. |
| setTheme | `(theme: "light" \| "dark", origin: { x: number; y: number }) => void` |  | Applies the theme in place of the built-in page switch, e.g. a theme provider's setter. Gets the button's centre. |
| storageKey | `string` | `"theme"` | localStorage key the choice is saved under. |
| className | `string` |  | Classes for the button. |

## Date Picker

iOS-style wheel picker with drag, momentum and infinite columns.

- Page and source: https://uibrik.com/components/date-picker
- Install: `npx shadcn@latest add https://uibrik.com/r/date-picker.json`
- Packages (installed by the CLI): motion
- Import: `import { DatePicker } from "@/components/uibrik/date-picker/date-picker"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| defaultDay | `number` | `15` | Starting day of the month. |
| defaultMonth | `number` | `8` | Starting month, 0 = January. |
| yearsBefore | `number` | `40` | Years listed before the current year. |
| yearsAfter | `number` | `19` | Years listed after the current year. |
| infinite | `boolean` | `true` | Day and month wheels loop. |
| onChange | `(date: Date) => void` |  | Called with the picked date when a wheel settles. |

## Elastic Slider

A slider that stretches like rubber past its ends and springs back.

- Page and source: https://uibrik.com/components/elastic-slider
- Install: `npx shadcn@latest add https://uibrik.com/r/elastic-slider.json`
- Packages (installed by the CLI): @number-flow/react, motion
- Import: `import { ElasticSlider } from "@/components/uibrik/elastic-slider/elastic-slider"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Elastic Slider"` |  |
| defaultValue | `number` | `40` | Starting value. |
| min | `number` | `0` | Lowest value. |
| max | `number` | `100` | Highest value. |
| width | `number` | `320` | Track width. |
| onChange | `(value: number) => void` |  | Called as the value changes. |

## Multi-step Form

A pill that opens into a four-step form, then folds back into a summary.

- Page and source: https://uibrik.com/components/multi-step-form
- Install: `npx shadcn@latest add https://uibrik.com/r/multi-step-form.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { MultiStepForm } from "@/components/uibrik/multi-step-form/MultiStepForm"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Create workspace"` | Text on the closed pill. |
| submitLabel | `string` | `"Create workspace"` | Text on the last step's button. |
| duration | `number` | `0.4` | How long the card takes to resize between steps. |
| stagger | `number` | `0.07` | Delay between width and height as the pill opens. |
| swipe | `boolean` | `true` | On touch, swipe between steps. |
| progress | `boolean` | `true` | Show the progress segments and step count. |
| onComplete | `(details: WorkspaceDetails) => void` |  | Called with name, workspace and role when the last step is confirmed. |
| className | `string` |  | Classes for the card. |

## OTP Input

One-time code field whose boxes merge and scramble into a pass or fail result.

- Page and source: https://uibrik.com/components/otp-input
- Install: `npx shadcn@latest add https://uibrik.com/r/otp-input.json`
- Packages (installed by the CLI): figma-squircle, motion
- Import: `import { OTPInput } from "@/components/uibrik/otp-input/otp-input"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Verification Code"` | Heading above the boxes. |
| correctCode | `string` | `"123456"` | The six-digit code that passes. |
| scrambleSpeed | `number` | `45` | Milliseconds between scramble frames. |
| lockStagger | `number` | `90` | Milliseconds between letters locking in. |
| holdDuration | `number` | `1300` | How long the result shows before resetting. |

## Scrub Timeline

A week-by-week ruler that swells under the pointer like a dock. Milestones pull the playhead in as you drag, ticks click past like detents, and a date pill grows into the milestone's card.

- Page and source: https://uibrik.com/components/scrub-timeline
- Install: `npx shadcn@latest add https://uibrik.com/r/scrub-timeline.json`
- Packages (installed by the CLI): motion, react-use-measure
- Import: `import { ScrubTimeline } from "@/components/uibrik/scrub-timeline/scrub-timeline"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"2026 roadmap"` | Heading, also the slider's label. |
| year | `number` | `2026` | Year the ruler spans, one tick per week. |
| accent | `string` | `"#f97316"` | Colour of milestones. |
| magnify | `number` | `1.6` | How much ticks grow under the pointer; 0 turns it off. |
| defaultWeek | `number` | `22` | Week the playhead starts on. |
| events | `TimelineEvent[]` |  | Milestones: { week (0–51), title, detail? }. Several in one week share a tick and the card steps through them. |
| todayWeek | `number` |  | Week to mark as today; earlier milestones show as done. Defaults to the real date. |
| onChange | `(week: number) => void` |  | Called as the playhead moves. |
| className | `string` |  | Classes for the outer shell. |

## Tactile Toggles

A settings list whose switches squish under the finger, drag like the real thing, sweep a faint tint across the row as they turn on, and pause the rows they override.

- Page and source: https://uibrik.com/components/tactile-toggles
- Install: `npx shadcn@latest add https://uibrik.com/r/tactile-toggles.json`
- Packages (installed by the CLI): motion
- Import: `import { TactileToggles } from "@/components/uibrik/tactile-toggles/tactile-toggles"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Notifications"` | Heading above the list. |
| accent | `string` | `"#22c55e"` | Switch colour when on, and the wash colour. |
| wash | `boolean` | `true` | Sweep a faint tint across the row when a switch turns on. |
| squish | `number` | `6` | How far the knob stretches while pressed. |
| items | `ToggleItem[]` |  | Rows: { id, label, description?, defaultChecked?, overrides? }. A row with overrides pauses those rows while it's on. |
| onChange | `(id: string, checked: boolean) => void` |  | Called when a switch flips. |
| className | `string` |  | Classes for the outer shell. |

## Type Fighter

A text field where each typed glyph flies in like a comet, or is written by pen.

- Page and source: https://uibrik.com/components/type-fighter
- Install: `npx shadcn@latest add https://uibrik.com/r/type-fighter.json`
- Packages (installed by the CLI): @chenglou/pretext, motion
- Import: `import { TypeFighter } from "@/components/uibrik/type-fighter/type-fighter"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| mode | `"comet" \| "cursive"` | `"comet"` | Typing style: flung comets or a pen. |
| placeholder | `string` | `"Type something"` |  |
| flyDuration | `number` | `0.3` | How long a comet glyph takes to fly in. |
| sparkCount | `number` | `14` | Sparks per impact. |
| penSpeed | `number` | `380` | Cursive pen speed, px per second. |

## Morph Tab Bar

A tab bar whose active pill stretches like liquid toward the next tab, can be grabbed and dragged across tabs, and morphs each icon from outline to filled.

- Page and source: https://uibrik.com/components/morph-tab-bar
- Install: `npx shadcn@latest add https://uibrik.com/r/morph-tab-bar.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { MorphTabBar } from "@/components/uibrik/morph-tab-bar/morph-tab-bar"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| indicator | `"raised" \| "solid"` | `"raised"` | A light pill on a tinted bar, or an inverted pill. |
| labels | `boolean` | `false` | Small label under each icon. |
| tabWidth | `number` | `64` | Width of one tab. |
| duration | `number` | `0.5` | How long the trailing edge takes to arrive. |
| draggable | `boolean` | `true` | Press and drag the pill across the tabs. |
| lift | `number` | `1.12` | How much the pill grows while held. |
| stretch | `number` | `0.5` | How far the trailing edge lags the leading one. 0 slides rigidly. |
| tabs | `{ label: string; icon: Icon; activeIcon?: Icon }[]` | `Home, Search, Inbox, Saved, Profile` | Tabs in order. activeIcon is the filled glyph shown while active. |
| defaultValue | `number` | `0` | Active tab on mount (uncontrolled). |
| value | `number` |  | Active tab (controlled). |
| onChange | `(index: number) => void` |  | Called with the tab picked by click or arrow keys. |
| className | `string` |  | Classes for the bar. |

## On This Page

A section outline where a dot rides a rail with your scroll, subsections fold open as you reach them, and clicking jumps to a section.

- Page and source: https://uibrik.com/components/on-this-page
- Install: `npx shadcn@latest add https://uibrik.com/r/on-this-page.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { OnThisPage } from "@/components/uibrik/on-this-page/on-this-page"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"On this page"` | Heading above the list. |
| offset | `number` | `96` | Distance from the top of the scroller where a section counts as current. |
| inset | `number` | `18` | How far in the subsection line sits from the main line. |
| curve | `number` | `0.5` | Softness of the bend between the two lines. 0.5 is the classic S; lower is tighter. |
| bendRoom | `number` | `8` | Extra space above a group's first subsection, giving the bend more room. |
| sectionGap | `number` | `8` | Extra space above each new section. |
| subsectionGap | `number` | `0` | Space between subsections. Negative values tighten them past the row height. |
| maxSubsections | `number` | `5` | Most subsections shown at once for one section; the rest sit behind a More above or More below row and slide in as you go. 0 shows all. |
| rowHeight | `number` | `32` | Height of one row. |
| lineWidth | `number` | `2` | Thickness of the rail. |
| dotSize | `number` | `8` | Diameter of the dot. |
| sections | `{ id: string; title: string; children?: { id: string; title: string }[] }[]` |  | Sections to list, each with optional subsections one level deep. Each id is the id of an element on the page. |
| container | `RefObject<HTMLElement \| null>` |  | Scrolling element to follow. Defaults to the window. |
| className | `string` |  | Classes for the wrapper. |

## Page Indicator

Pagination dashes you can click, scrub, step with arrows or type into.

- Page and source: https://uibrik.com/components/page-indicator
- Install: `npx shadcn@latest add https://uibrik.com/r/page-indicator.json`
- Packages (installed by the CLI): @number-flow/react, motion, react-use-measure
- Import: `import { PageIndicator } from "@/components/uibrik/page-indicator/page-indicator"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| total | `number` | `48` | Number of pages. |
| visible | `number` | `11` | Dashes shown at once. |
| defaultPage | `number` | `6` | Starting page when uncontrolled. |
| dragStep | `number` | `14` | Drag distance per page while scrubbing. |
| stretch | `number` | `30` | How far the grabbed dash stretches past either end. |
| showNumber | `boolean` | `true` | Show the number pill; click it to type a page. |
| onChange | `(page: number) => void` |  | Called when the page changes. |
| className | `string` |  | Classes for the wrapper. |

## Search

A search pill that grows into a palette with filter chips and results.

- Page and source: https://uibrik.com/components/search
- Install: `npx shadcn@latest add https://uibrik.com/r/search.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { SearchPalette } from "@/components/uibrik/search/SearchPalette"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| placeholder | `string` | `"Search"` | Text on the closed pill and in the empty field. |
| maxWidth | `number` | `560` | Widest the open palette gets. |
| searchDelay | `number` | `500` | Wait before results show. |
| shortcut | `string` | `"k"` | Key that toggles it with ⌘ / Ctrl. Empty disables. |
| maxRecents | `number` | `3` | Recent searches kept. |
| items | `SearchItem[]` | `SAMPLE_SEARCH_ITEMS` | Searchable items: id, title, scope, type and date. |
| onSelect | `(item: SearchItem) => void` |  | Called when a result is picked. |
| recentsKey | `string` | `"search-19-recents"` | localStorage key for recent searches. |
| className | `string` |  | Classes for the wrapper. |

## Viscosity Menu

A dot that pours into a menu panel like a drop of liquid.

- Page and source: https://uibrik.com/components/viscosity-menu
- Install: `npx shadcn@latest add https://uibrik.com/r/viscosity-menu.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { ViscosityMenu } from "@/components/uibrik/viscosity-menu/viscosity-menu"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| speed | `number` | `1` | Playback rate of the whole liquid animation; 1 is real time. |
| gooBlur | `number` | `8` | How far the two blobs blur into each other before thresholding. Higher melts them together over a longer neck. |
| gooContrast | `number` | `28` | Sharpness of the liquid edge after the blur. Lower is softer and more see-through at the rim. |
| leadMoveStiffness | `number` | `420` | How hard the leading blob is pulled toward its target position. |
| leadMoveDamping | `number` | `36` | Friction on the leading blob's movement. Lower overshoots and wobbles. |
| leadSizeStiffness | `number` | `280` | How quickly the leading blob grows from the dot into the panel (and shrinks back). |
| leadSizeDamping | `number` | `28` | Friction on the leading blob's resize. Lower lets the size bounce. |
| trailMoveStiffness | `number` | `260` | Pull on the trailing blob. Keep it below the lead so it lags and stretches a neck. |
| trailMoveDamping | `number` | `30` | Friction on the trailing blob's movement. |
| trailSizeStiffness | `number` | `200` | How quickly the trailing blob changes size. |
| trailSizeDamping | `number` | `26` | Friction on the trailing blob's resize. |
| stretchLead | `number` | `0.22` | How much the leading blob elongates with its speed, keeping its area. |
| stretchTrail | `number` | `0.18` | How much the trailing blob elongates with its speed. |
| stretchMax | `number` | `0.2` | Cap on the speed stretch, so a fast move never becomes a thin streak. |
| clipText | `boolean` | `true` | Reveal the options only where the liquid has reached, instead of over the whole panel. |
| squish | `number` | `0.4` | How narrow the drop gets halfway between the dot and the panel. |
| sway | `number` | `0` | Sideways kick when opening or closing, for a swinging pour. 0 drops straight. |
| textDelay | `number` | `0.2` | Wait after opening before the options fade in. |
| textDuration | `number` | `0.3` | How long the options take to fade in. |
| textBlur | `number` | `6` | Blur the options start from as they fade in. |
| textScale | `number` | `0.85` | Scale the options start from as they fade in. |

## AI Blob

A 3D dotted orb for AI states. Click to morph between five shapes.

- Page and source: https://uibrik.com/components/ai-blob
- Install: `npx shadcn@latest add https://uibrik.com/r/ai-blob.json`
- Packages: none beyond React
- Import: `import { AIBlob } from "@/components/uibrik/ai-blob/ai-blob"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| mode | `"sphere-spiral" \| "double-spiral" \| "rings" \| "torus" \| "blob"` | `"sphere-spiral"` | Active 3D variation. |
| interactive | `boolean` | `true` | Click cycles through the variations. |
| dotCount | `number` | `50` | Number of dots. |
| speed | `number` | `1` | Rotation speed multiplier. |
| blinkSpeed | `number` | `0.3` | Pulse speed of the travelling dots. 0 disables. |
| tilt | `number` | `18` | 3D tilt pitch in degrees. |
| dotSize | `number \| [number, number]` |  | Dot size, or a [far, near] depth range. |
| color | `string` |  | Base dot colour. Falls back to the text colour. |
| highlightColor | `string` |  | Colour of the bright travelling dots. |
| onModeChange | `(mode) => void` |  | Called when the variation changes. |
| className | `string` |  | Size and text colour, e.g. size-28 text-zinc-700. |

## Image Generation

An AI image placeholder: a dither field that resolves into the picture.

- Page and source: https://uibrik.com/components/image-generation
- Install: `npx shadcn@latest add https://uibrik.com/r/image-generation.json`
- Packages: none beyond React
- Import: `import { ImageGeneration } from "@/components/uibrik/image-generation/ImageGeneration"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| prompt | `string` | `"Generate an image of beautiful mountains"` | Request shown above the card. Empty hides it. |
| cell | `number` | `6` | Square size of the dither field. |
| delay | `number` | `1.5` | Pure dither before the picture starts to appear. |
| sweep | `number` | `3.2` | How long the reveal band takes to travel down. |
| band | `number` | `0.22` | Band height as a share of the card. |
| width | `number` | `320` | Card width; the picture is 2:3. |
| src | `string` |  | The generated picture. |
| onDone | `() => void` |  | Called once the picture is fully revealed. |
| className | `string` |  | Classes for the wrapper. |

## Notification Stack

Notifications that pile up as panes of frosted glass, fan out on hover and blur away when swiped.

- Page and source: https://uibrik.com/components/notification-stack
- Install: `npx shadcn@latest add https://uibrik.com/r/notification-stack.json`
- Packages (installed by the CLI): motion
- Import: `import { NotificationStack } from "@/components/uibrik/notification-stack/notification-stack"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| visible | `number` | `2` | Notifications peeking out behind the front one. |
| peek | `number` | `12` | How far each one behind peeks out. |
| gap | `number` | `10` | Gap between notifications when fanned out. |
| blur | `number` | `24` | Backdrop blur of the glass. |
| expanded | `boolean` | `false` | Fan the stack out even without hover. |
| notifications | `{ id; title; body?; icon?; time? }[]` |  | Newest first. |
| onDismiss | `(id) => void` |  | Called when one is swiped away or its close button pressed. Remove it from the list here. |
| className | `string` |  | Classes for the list. |

## Pixel Bot

A tiny pixel face that cycles through animated expressions.

- Page and source: https://uibrik.com/components/pixel-bot
- Install: `npx shadcn@latest add https://uibrik.com/r/pixel-bot.json`
- Packages: none beyond React
- Import: `import { PixelGrid } from "@/components/uibrik/pixel-bot/pixel-grid"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| cellSizeClassName | `"size-3" \| "size-4" \| "size-5" \| "size-6"` | `"size-4"` | Size class of one pixel. |
| frames | `readonly AnimatedFrame[]` |  | Frames to play, e.g. PIXEL_PATTERNS.smile. |
| activeClassName | `string` | `"bg-zinc-900 dark:bg-zinc-100"` | Classes for lit pixels. |
| inactiveClassName | `string` | `"bg-zinc-200 dark:bg-zinc-800"` | Classes for unlit pixels. |

## Send

File upload that fills, then launches a paper plane out of the card.

- Page and source: https://uibrik.com/components/send
- Install: `npx shadcn@latest add https://uibrik.com/r/send.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { SendFile } from "@/components/uibrik/send/send"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| exitStyle | `"split" \| "fade"` | `"split"` | How the finished panel leaves. |
| fileName | `string` | `"Document.file"` |  |
| fileSize | `string` | `"478.5kb"` |  |
| label | `string` | `"Send"` | Button text. |
| sentColor | `string` | `"#16a34a"` | The panel warms to this colour as the upload fills. |
| uploadDuration | `number` | `2.6` | How long the simulated upload takes. |
| flightDuration | `number` | `0.375` | How long the plane takes to fly off. |

## Folder Peek

A folder whose file previews rise and fan out on hover, fly out into a list when opened, and that takes files dropped onto it.

- Page and source: https://uibrik.com/components/folder-peek
- Install: `npx shadcn@latest add https://uibrik.com/r/folder-peek.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { FolderPeek } from "@/components/uibrik/folder-peek/folder-peek"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name | `string` | `"Launch assets"` | Folder name, under the folder and atop the list. |
| color | `string` | `"#a1a1aa"` | Folder colour. The back is drawn a shade darker, the flap a shade lighter. |
| rise | `number` | `44` | How far the sheets rise on hover. |
| fan | `number` | `7` | How far the outer sheets turn as they fan. |
| tilt | `number` | `22` | How far the front flap tips forward on hover. |
| parallax | `boolean` | `true` | Lean the fanned sheets toward the cursor. |
| droppable | `boolean` | `true` | Accept files dropped on the folder or the open list. |
| maxRows | `number` | `5` | Rows the open list shows before it scrolls. |
| files | `{ name: string; meta?: string; kind?: "doc" \| "slides" \| "image" \| "text"; preview?: string }[]` | `4 sample files` | Files on mount, newest first. The first three are drawn as sheets, previewed by kind (inferred from the extension); `preview` swaps the drawn preview for your own image. |
| onSelect | `(file, index) => void` |  | Called when a row in the open list is picked. |
| onAdd | `(files) => void` |  | Called with files dropped in from the desktop, or dragged with the application/x-folder-file type. |
| className | `string` |  | Classes for the wrapper. |

## Merge Gallery

Six tiles that merge into one video player, and split back apart.

- Page and source: https://uibrik.com/components/merge-gallery
- Install: `npx shadcn@latest add https://uibrik.com/r/merge-gallery.json`
- Packages (installed by the CLI): motion
- Import: `import { MergeGallery } from "@/components/uibrik/merge-gallery/MergeGallery"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| duration | `number` | `0.55` | How long the tiles take to merge and split. |
| blur | `number` | `11` | Peak blur while the tiles merge. |
| dim | `number` | `0.6` | How dark a tile gets under the pointer. |
| loop | `boolean` | `true` | Loop the open video. |
| videos | `GalleryVideo[]` | `SAMPLE_GALLERY_VIDEOS` | Exactly six { src, poster } pairs, laid out 3 × 2. |
| className | `string` |  | Classes for the wrapper. |

## Music Player

Compact player with a sliding cover stack, rolling time and a progress ring.

- Page and source: https://uibrik.com/components/music-player
- Install: `npx shadcn@latest add https://uibrik.com/r/music-player.json`
- Packages (installed by the CLI): motion, react-use-measure, torph
- Import: `import { MusicPlayer } from "@/components/uibrik/music-player/music-player"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| ringWidth | `number` | `4` | Progress ring stroke width. |
| ringGap | `number` | `6` | Gap between the card and the ring. |
| coverDuration | `number` | `0.8` | How long the cover stack takes to slide. |
| morphDuration | `number` | `500` | How long the title and artist take to morph. |
| tracks | `Track[]` | `SAMPLE_TRACKS` | Title, artist, cover image and m:ss duration per track. |

## Area Chart

A time-series chart with soft area washes and one crosshair that reads every series at once.

- Page and source: https://uibrik.com/components/area-chart
- Install: `npx shadcn@latest add https://uibrik.com/r/area-chart.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { AreaChart } from "@/components/uibrik/area-chart/area-chart"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Visitors"` | Names what is plotted. |
| format | `Intl.NumberFormatOptions` | `{}` | Formats every number, e.g. { style: "currency", currency: "USD" }. |
| accent | `string` | `""` | First series colour. Empty uses the chart palette. |
| data | `({ label: string } & Record<string, number>)[]` |  | One row per period, oldest first, with a value per series key. |
| series | `{ key: string; label: string; color?: string }[]` |  | The series to draw, 1 to 5. |
| previous | `number[]` |  | The first series over the previous period, drawn dashed for comparison. |
| headline | `"total" \| "latest"` | `"total"` | Headline is the period's sum or its latest value. |
| showGrid | `boolean` | `true` | Grid lines with value labels. |
| height | `number` | `220` | Plot height in px. |
| onActiveChange | `(index: number \| null) => void` |  | Called with the row under the cursor. |
| className | `string` |  | Classes for the outer shell. |

## Bar List

A ranked list of top pages, referrers or countries whose rows slide to their new rank and resize when you switch lists.

- Page and source: https://uibrik.com/components/bar-list
- Install: `npx shadcn@latest add https://uibrik.com/r/bar-list.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { BarList } from "@/components/uibrik/bar-list/bar-list"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Top sources"` | Names the list. |
| limit | `number` | `6` | Rows shown before the rest fold into Other. |
| showShare | `boolean` | `false` | Show each row's share of the total. |
| accent | `string` | `""` | Bar colour. Empty uses the chart palette. |
| groups | `{ value: string; label: string; items: { label: string; value: number; href?: string }[] }[]` |  | Lists to switch between, each with its own tab. |
| items | `{ label: string; value: number; href?: string }[]` |  | A single list. Replaces groups and hides the tabs. |
| unit | `string` | `"visitors"` | What the headline counts. |
| format | `Intl.NumberFormatOptions` | `{}` | Formats every number, e.g. { notation: "compact" }. |
| onSelect | `(item: BarListItem) => void` |  | Makes rows buttons and is called with the chosen item. |
| className | `string` |  | Classes for the outer shell. |

## Funnel

A conversion funnel whose drop-off between steps reads as a slope you can hover, with every step's share of the start.

- Page and source: https://uibrik.com/components/funnel
- Install: `npx shadcn@latest add https://uibrik.com/r/funnel.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { Funnel } from "@/components/uibrik/funnel/funnel"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Trial conversion"` | Names the funnel. |
| accent | `string` | `""` | Bar colour. Empty uses the chart palette. |
| steps | `{ label: string; value: number }[]` |  | One entry per step, in order. The first is everyone who entered. |
| format | `Intl.NumberFormatOptions` | `{}` | Formats every count, e.g. { style: "currency", currency: "USD" }. |
| onSelect | `(step: { label: string; value: number }, index: number) => void` |  | Called when a step is clicked, or picked with Enter. |
| className | `string` |  | Classes for the outer shell. |

## Live Line

A realtime line that scrolls smoothly as samples stream in, and freezes under the pointer so you can read any moment.

- Page and source: https://uibrik.com/components/live-line
- Install: `npx shadcn@latest add https://uibrik.com/r/live-line.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { LiveLine } from "@/components/uibrik/live-line/live-line"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Visitors right now"` | Names the metric. |
| interval | `number` | `1000` | Time between samples. |
| points | `number` | `60` | Samples across the plot. |
| unit | `string` | `"visitors"` | Sits beside the headline. |
| accent | `string` | `""` | Line colour. Empty uses the chart palette. |
| value | `number` |  | Latest reading, sampled once every interval. Leave out to show simulated traffic. |
| format | `Intl.NumberFormatOptions` | `{}` | Formats every number, e.g. { style: "percent" }. |
| paused | `boolean` |  | Stops sampling. Leave out to let the Live button manage it. |
| onPausedChange | `(paused: boolean) => void` |  | Called when the Live button is pressed. |
| className | `string` |  | Classes for the outer shell. |

## Morph Chart

One dataset that morphs between bar, line and donut charts.

- Page and source: https://uibrik.com/components/morph-chart
- Install: `npx shadcn@latest add https://uibrik.com/r/morph-chart.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { MorphChart } from "@/components/uibrik/morph-chart/MorphChart"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| defaultView | `"bar" \| "line" \| "pie"` | `"bar"` | View shown first. |
| caption | `string` | `"Total revenue"` | Readout label when nothing is hovered. |
| currency | `"USD" \| "EUR" \| "GBP" \| "INR" \| ""` | `"USD"` | Currency for the values, or none for plain numbers. |
| duration | `number` | `0.4` | Length of the shortest morph. |
| accent | `string` | `""` | Bar, line and slice colour. Empty uses the chart palette. |
| data | `ChartDatum[]` | `SAMPLE_CHART_DATA` | Points: label, optional full name, value. |
| className | `string` |  | Classes for the card. |

## Range Line

A portfolio line with time ranges that morphs between them, and a header that reads out any point you scrub.

- Page and source: https://uibrik.com/components/range-line
- Install: `npx shadcn@latest add https://uibrik.com/r/range-line.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { RangeLine } from "@/components/uibrik/range-line/range-line"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Portfolio"` | Names what is plotted. |
| defaultRange | `"1D" \| "1W" \| "1M" \| "3M" \| "1Y"` | `"1M"` | Range shown first. |
| trend | `boolean` | `true` | Green when the range ends up, red when down. |
| accent | `string` | `""` | Line colour when trend is off. Empty uses the chart palette. |
| ranges | `{ value: string; label: string; data: { label: string; value: number }[]; period?: string }[]` |  | One tab per range, each with its own points, oldest first. |
| range | `string` |  | Range shown, when controlled. |
| onRangeChange | `(range: string) => void` |  | Called when a tab is picked. |
| format | `Intl.NumberFormatOptions` | `USD currency` | Formats every number, e.g. { style: "percent" }. |
| className | `string` |  | Classes for the outer shell. |

## Ring Stack

Concentric budget rings that dim around the one you point at, and unroll into a labelled bar when you pick it.

- Page and source: https://uibrik.com/components/ring-stack
- Install: `npx shadcn@latest add https://uibrik.com/r/ring-stack.json`
- Packages (installed by the CLI): @number-flow/react, motion
- Import: `import { RingStack } from "@/components/uibrik/ring-stack/ring-stack"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"October budget"` | Heading above the rings. |
| accent | `string` | `"#3b82f6"` | Colour of the ring in focus. |
| currency | `string` | `"$"` | Currency symbol for amounts. |
| totalLabel | `string` | `"spent"` | Caption under the overall percentage. |
| strokeWidth | `number` | `12` | Thickness of each ring. |
| ringGap | `number` | `20` | Distance between ring centres. |
| morphDuration | `number` | `0.7` | How long a ring takes to unroll into its bar. |
| items | `RingItem[]` |  | Up to five rings, outermost first: { id, label, spent, budget }. |
| className | `string` |  | Classes for the outer shell. |

## Split Bar

Parts of a whole on one bar, linked to a list, with segments that slide to new shares when the data changes.

- Page and source: https://uibrik.com/components/split-bar
- Install: `npx shadcn@latest add https://uibrik.com/r/split-bar.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { SplitBar } from "@/components/uibrik/split-bar/split-bar"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `""` | Names the whole. Empty uses the sample's name. |
| showList | `boolean` | `true` | List every part under the bar. |
| items | `{ label: string; value: number; color?: string }[]` |  | The parts, in bar order. Past six, the rest fold into Other. |
| total | `number` |  | Full capacity. The rest of the bar shows what's left. |
| format | `Intl.NumberFormatOptions` | `GB for the sample` | Formats every number, e.g. { style: "currency", currency: "USD" }. |
| onSelect | `(item: SplitItem) => void` |  | Called with the part picked from the bar or the list. |
| className | `string` |  | Classes for the outer shell. |

## Stacked Bars

Monthly columns split by series that slide apart into groups, with a legend that folds series away.

- Page and source: https://uibrik.com/components/stacked-bars
- Install: `npx shadcn@latest add https://uibrik.com/r/stacked-bars.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { StackedBars } from "@/components/uibrik/stacked-bars/stacked-bars"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Revenue by plan"` | Names what is plotted. |
| defaultMode | `"stacked" \| "grouped"` | `"stacked"` | Starting layout: one column per period, or series side by side. |
| data | `{ label: string; [key: string]: number }[]` |  | One row per period, oldest first, with a value for each series key. |
| series | `{ key: string; label: string; color?: string }[]` |  | The series to draw, bottom of the stack first. |
| mode | `"stacked" \| "grouped"` |  | Controls the layout. Pair with onModeChange. |
| onModeChange | `(mode) => void` |  | Called when the layout tabs change. |
| format | `Intl.NumberFormatOptions` | `USD currency` | Formats every number, e.g. { style: "percent" }. |
| className | `string` |  | Classes for the outer shell. |

## Gauge

A calm meter for one value against its range, coloured by the zone it's in and telling you how far it is to the next.

- Page and source: https://uibrik.com/components/gauge
- Install: `npx shadcn@latest add https://uibrik.com/r/gauge.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { Gauge } from "@/components/uibrik/gauge/gauge"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Storage"` | Names the metric. |
| value | `number` | `64` | Current reading. |
| format | `Intl.NumberFormatOptions` | `gigabytes` | Formats every number, e.g. { style: "percent" }. |
| accent | `string` | `""` | Arc colour without zones. Empty uses the chart palette. |
| min | `number` | `0` | Start of the range. |
| max | `number` | `100` | End of the range. |
| thresholds | `{ at: number; status: "good" \| "warning" \| "critical" }[]` | `warning 70, critical 90` | Where each zone begins. Below the first is good. Empty uses one colour. |
| labels | `Partial<Record<"good" \| "warning" \| "critical", string>>` |  | Words for each zone, shown beside its dot. |
| caption | `string` | `"of 100 GB plan"` | Note under the gauge. |
| className | `string` |  | Classes for the outer shell. |

## KPI Tile

A dashboard stat with its change and a sparkline you can scrub, rolling the number to any day.

- Page and source: https://uibrik.com/components/kpi-tile
- Install: `npx shadcn@latest add https://uibrik.com/r/kpi-tile.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { KpiTile } from "@/components/uibrik/kpi-tile/kpi-tile"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Revenue"` | Names the metric. |
| deltaLabel | `string` | `"vs last month"` | What the change is measured against. |
| invert | `boolean` | `false` | Lower is better (churn, latency, cost), so a fall reads as good. |
| area | `boolean` | `true` | Wash under the line. |
| accent | `string` | `""` | Line colour. Empty uses the chart palette. |
| data | `{ label: string; value: number }[]` |  | One point per period, oldest first. The last point is the current value. |
| value | `number` |  | Headline value. Defaults to the last point. |
| delta | `number` |  | Change as a fraction (0.124 is +12.4%). Defaults to the last point against the first. |
| format | `Intl.NumberFormatOptions` | `USD currency` | Formats every number, e.g. { style: "percent" }. |
| className | `string` |  | Classes for the outer shell. |

## Streak Calendar

An activity heatmap whose days lift under the pointer or arrow keys, with a tooltip that glides between them, a today cell that fills when logged, and a beat for a new record.

- Page and source: https://uibrik.com/components/streak-calendar
- Install: `npx shadcn@latest add https://uibrik.com/r/streak-calendar.json`
- Packages (installed by the CLI): @number-flow/react, motion, react-use-measure
- Import: `import { StreakCalendar } from "@/components/uibrik/streak-calendar/streak-calendar"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| weeks | `number` | `20` | Most weeks of history to show; fewer fit on narrow screens. |
| weekStart | `"sunday" \| "monday"` | `"sunday"` | Day the week starts on. |
| streak | `number` | `12` | Days in a row already logged before today, for the sample data. |
| accent | `string` | `"#22c55e"` | Colour of logged days. |
| unit | `string` | `"sessions"` | Unit shown in the tooltip. |
| seed | `number` | `7` | Seeds the sample history. |
| data | `number[]` |  | Count per day, oldest first, ending today. Replaces the sample data; shades are scaled to the busiest day. |
| onLogChange | `(logged: boolean) => void` |  | Called when today is logged, or the log is undone. |
| className | `string` |  | Classes for the outer shell. |

## Uptime Bar

A status page history with a tick for every day, lifting any day to show what happened.

- Page and source: https://uibrik.com/components/uptime-bar
- Install: `npx shadcn@latest add https://uibrik.com/r/uptime-bar.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion, react-use-measure
- Import: `import { UptimeBar } from "@/components/uibrik/uptime-bar/uptime-bar"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"System status"` | Names the page. |
| days | `number` | `90` | Most days to show; fewer fit on narrow screens. |
| showLegend | `boolean` | `true` | Names the four states under the card. |
| services | `{ name: string; days: { date: string; status: "operational" \| "degraded" \| "outage" \| "none"; note?: string; downtime?: number }[] }[]` |  | One row per service, each with one entry per day, oldest first. Downtime is in minutes. |
| className | `string` |  | Classes for the outer shell. |

## Avatar Stack

Overlapping avatars that fan on hover and spring apart into a named list on a card growing out of the row.

- Page and source: https://uibrik.com/components/avatar-stack
- Install: `npx shadcn@latest add https://uibrik.com/r/avatar-stack.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { AvatarStack } from "@/components/uibrik/avatar-stack/avatar-stack"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| max | `number` | `4` | Avatars shown in the row before the +N. |
| size | `number` | `40` | Avatar diameter. |
| overlap | `number` | `12` | How far each avatar tucks under the one before it. |
| trigger | `"click" \| "hover"` | `"click"` | What opens the list. |
| people | `{ id; name; role?; src? }[]` |  | Avatars in order. Without a src the initials show. |
| className | `string` |  | Classes for the wrapper. |

## Boarding Pass

A ticket whose stub you pull off: the perforation gives one paper bridge at a time, in WebGL, leaving a fibrous edge and a checked-in mark.

- Page and source: https://uibrik.com/components/boarding-pass
- Install: `npx shadcn@latest add https://uibrik.com/r/boarding-pass.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { BoardingPass } from "@/components/uibrik/boarding-pass/boarding-pass"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| from | `string` | `"SFO"` | Departure airport code. |
| to | `string` | `"JFK"` | Arrival airport code. |
| passenger | `string` | `"Maya Chen"` | Passenger name. |
| flight | `string` | `"UB 204"` | Flight number. |
| gate | `string` | `"B12"` | Boarding gate. |
| seat | `string` | `"14A"` | Seat, printed large on the stub. |
| tearAngle | `number` | `14` | How far the stub swings by the time the last bridge breaks. |
| fromCity | `string` | `"San Francisco"` | City under the departure code. |
| toCity | `string` | `"New York"` | City under the arrival code. |
| date | `string` | `"14 Oct"` | Shown top right until the stub is torn. |
| boarding | `string` | `"09:40"` | Boarding time. |
| torn | `boolean` |  | Torn state, when controlled. |
| defaultTorn | `boolean` | `false` | Initial torn state when uncontrolled. |
| onTornChange | `(torn: boolean) => void` |  | Called when the stub is torn. |
| className | `string` |  | Classes for the wrapper. |

## Company Card

A business card rendered as a real 3D slab in WebGL: foil and holographic logos, diffraction, glitter, lenticular and pearl finishes, and a pattern seeded by the company name, all lit by the pointer as the card tilts.

- Page and source: https://uibrik.com/components/company-card
- Install: `npx shadcn@latest add https://uibrik.com/r/company-card.json`
- Packages (installed by the CLI): three
- Import: `import { CompanyCard } from "@/components/uibrik/company-card/company-card"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| material | `"obsidian" \| "metal" \| "paper" \| "glass"` | `"obsidian"` | Card stock: soft-touch black with spot gloss, brushed graphite, cotton letterpress, or smoked acrylic. |
| grain | `number` | `0.7` | Paper fibre, metal brushing or texture of the stock. Not used on glass. |
| fill | `"stock" \| "solid" \| "gradient" \| "mesh"` | `"gradient"` | What's printed on the stock: its own colour, a solid, a gradient that ends in a soft glow, or a mesh of three colours. The material's finish stays on top. |
| fillColor | `string` | `"#1d3bff"` | Colour for the solid fill. |
| fillFrom | `string` | `"#01000a"` | Gradient and mesh start colour. |
| fillTo | `string` | `"#5a2ee8"` | Gradient and mesh end colour. |
| fillHighlight | `string` | `"#c8b8ff"` | Mesh highlight colour. |
| fillAngle | `number` | `125` | Gradient direction, as in CSS: 135° runs top left to bottom right. |
| fillGlow | `number` | `0.75` | Bloom of light where the gradient ends, or on the mesh highlight. |
| fillOpacity | `number` | `0.85` | How opaque the fill is; lower lets the stock's own colour show through and softens it. |
| fillNoise | `number` | `0.95` | Fine grain over the fill. |
| thickness | `number` | `3` | Card thickness, seen on the edge. Also sets how deep the glass pattern floats. |
| logoFinish | `"foil" \| "holo" \| "ink" \| "blind"` | `"foil"` | Hot foil, a holographic kinegram, the logo in its own colours, or relief with no ink. |
| foil | `number` | `1` | Rainbow and sparkle in a foil or holo logo. |
| relief | `number` | `1.3` | Depth of the emboss and deboss. |
| overlay | `"none" \| "holographic" \| "glitter" \| "holoGlitter" \| "lenticular" \| "pearl"` | `"holoGlitter"` | A finish over the whole face: holographic film, prismatic glitter, both softly together (on hover, under the pointer), a lens sheet that flips patterns as it tilts, or pearl. |
| overlayStrength | `number` | `1.65` | How strong the overlay is. |
| holoSpread | `number` | `1` | Size of the holo glow around the light, or of the hover spot for holo glitter. |
| saturation | `number` | `1` | How much colour the holo or pearl shows; 0 is silver. |
| hiddenLogo | `boolean` | `true` | A large, faint copy of the logo in the holo film, seen as the colours pass through it. |
| glitterDensity | `number` | `1.25` | How many flakes there are. |
| flakeSize | `number` | `3.5` | Size of each glitter flake. |
| lensPitch | `number` | `3` | Width of each lenticular lens ridge. |
| motif | `"contours" \| "guilloche" \| "none"` | `"contours"` | Pattern seeded by the company name: topographic contours or a banknote rosette. Lenticular shows both. |
| pattern | `number` | `0.85` | Strength of the pattern lines. |
| lineDensity | `number` | `1.05` | How closely the pattern lines are spaced. |
| petals | `number` | `0` | Petals in the guilloche rosette; 0 picks a count from the company name. |
| company | `string` | `"Halcyon"` | Company name. Also seeds the pattern. |
| tagline | `string` | `"Instruments for quiet work"` | Short line under the name. |
| name | `string` | `"Ava Moreno"` | Person on the card. |
| role | `string` | `"Head of Design"` | Their role. |
| website | `string` | `"halcyon.studio"` | Website. |
| email | `string` | `"ava@halcyon.studio"` | Email address. |
| phone | `string` | `"+1 415 555 0142"` | Phone number. |
| location | `string` | `"San Francisco"` | City, top right. |
| accent | `string` | `"#5a2ee8"` | Foil, edge paint and glass glow. Left out, it is taken from the logo. |
| lightColor | `string` | `"#ffffff"` | Colour of the light that follows the pointer. |
| tilt | `number` | `8` | Largest tilt toward the pointer. |
| ripple | `boolean` | `true` | Press to dip the card and send a ring of light across it. |
| radius | `number` | `18` | Corner radius. |
| width | `number` | `420` | Card width; it never grows past its container. |
| logo | `string` |  | Logo URL, ideally an SVG on a transparent background, same-origin or CORS-enabled. Without one, a monogram is stamped. |
| className | `string` |  | Classes for the card. |

## Flaming Todos

A todo list where finished items burn away in WebGL flames.

- Page and source: https://uibrik.com/components/flaming-todos
- Install: `npx shadcn@latest add https://uibrik.com/r/flaming-todos.json`
- Packages (installed by the CLI): three
- Import: `import { FlamingTodos } from "@/components/uibrik/flaming-todos/flaming-todos"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| placeholder | `string` | `"Add a to-do"` |  |
| burnDuration | `number` | `1.3` | How long the flames take to climb through a to-do. |
| ash | `number` | `300` | Ash particles per burn. |
| flightDuration | `number` | `0.6` | How long a new to-do takes to fly into the list. |
| width | `number` | `416` | Width of the list. |
| maxLength | `number` | `32` | Longest to-do, in characters. |
| initialItems | `string[]` | `SAMPLE_TODOS` | To-dos listed at the start. |
| onAdd | `(label: string) => void` |  | Called when a to-do is added. |
| onComplete | `(label: string) => void` |  | Called when a to-do is checked off. |
| className | `string` |  | Classes for the list. |

## Genie Effect

macOS-style minimize: windows pour into the dock along a WebGL mesh.

- Page and source: https://uibrik.com/components/genie-effect
- Install: `npx shadcn@latest add https://uibrik.com/r/genie-effect.json`
- Packages (installed by the CLI): @tabler/icons-react
- Import: `import { GenieDock } from "@/components/uibrik/genie-effect/genie-dock"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| duration | `number` | `0.52` | Length of one minimize or restore. |
| curvature | `number` | `0.89` | Bend of the funnel. |
| pinch | `number` | `0.72` | How narrow the neck gets. |
| verticalStretch | `number` | `2` | Vertical smear during travel. |
| meshResolution | `number` | `100` | Rows in the warp mesh. |
| windowSize | `number` | `450` | Window size (square). |
| items | `DockItem[]` | `DOCK_ITEMS` | Images in the dock: id, src, alt. |

## Light Badge

A badge lit from below by a rotating gradient stroke and soft rays.

- Page and source: https://uibrik.com/components/light-badge
- Install: `npx shadcn@latest add https://uibrik.com/r/light-badge.json`
- Packages: none beyond React
- Import: `import { GradientStrokePill } from "@/components/uibrik/light-badge/GradientStrokePill"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| hover | `boolean` | `true` | Brighten and speed up while hovered. |
| follow | `boolean` | `true` | The light leans toward a nearby pointer. |
| stroke | `number` | `1.5` | Stroke width. |
| radius | `number` | `16` | Corner radius. |
| ray | `number` | `0.55` | Strength of the light rays under the badge. |
| inner | `number` | `0.5` | Strength of the inner waves. |
| rayLength | `number` | `11` | How far the rays fall. |
| period | `number` | `3.6` | Seconds per 360° turn of the stroke gradient. |
| hoverIntensity | `number` | `0.4` | How much brighter the light gets while hovered (0.4 = 40%). |
| hoverSpeed | `number` | `0.45` | How much faster the waves run while hovered (0.45 = 45%). |
| followStrength | `number` | `0.3` | How far the light leans toward the cursor, as a share of the way. |
| followRange | `number` | `220` | How near the cursor must be for the light to notice it. |
| children | `ReactNode` |  | Badge content. |
| colors | `string[]` |  | Stroke gradient stops; see PRESETS in presets.ts. |
| castOn | `RefObject<HTMLCanvasElement>` |  | Canvas below (see LightCatcher) that catches the light. |
| className | `string` |  | Classes for the badge. |

## Liquid Glass Lens

A draggable glass pill that refracts whatever sits underneath it.

- Page and source: https://uibrik.com/components/liquid-glass-lens
- Install: `npx shadcn@latest add https://uibrik.com/r/liquid-glass-lens.json`
- Packages (installed by the CLI): motion, react-use-measure
- Import: `import { LiquidGlassLens } from "@/components/uibrik/liquid-glass-lens/LiquidGlassLens"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| width | `number` | `224` | Lens width. |
| height | `number` | `88` | Lens height. |
| bezel | `number` | `38` | Width of the curved rim that bends light. |
| shift | `number` | `18.5` | How far the rim pulls pixels inward. |
| zoom | `number` | `0.1` | Magnification of the flat middle. |
| dispersion | `number` | `0.065` | Colour split at the rim. |
| blur | `number` | `2` | Frosted blur. |
| frost | `number` | `0.25` | Tint over the glass. |
| saturation | `number` | `1.4` | Colour boost through the glass. |
| highlight | `number` | `0.44` | Rim highlight strength. |
| shadow | `number` | `0.28` | Drop shadow strength. |
| children | `ReactNode` | `<LensSampleContent />` | What the lens floats over. |
| className | `string` |  | Classes for the stage. |

## Folder FAQ

An FAQ laid out as files in a drawer: each question peeks out on its tab, and opening one lifts it from the stack while the folders in front slide down to uncover the answer.

- Page and source: https://uibrik.com/components/folder-faq
- Install: `npx shadcn@latest add https://uibrik.com/r/folder-faq.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { FolderFaq } from "@/components/uibrik/folder-faq/folder-faq"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tabLayout | `"cascade" \| "alternate" \| "left"` | `"cascade"` | Where the tabs sit: stepping across in threes, swapping sides, or all on the left. |
| peek | `number` | `64` | How much of each folder shows above the one in front, tab included. |
| tabWidth | `number` | `132` | Width of a tab. |
| lift | `number` | `6` | How far the open folder rises out of the stack. |
| radius | `number` | `16` | Corner radius of a folder. |
| sheet | `boolean` | `true` | Print the answer on a sheet of paper that rises out of the folder, its foot tucked behind the one in front. |
| ruled | `boolean` | `true` | Faint ruled lines on the sheet. |
| size | `"md" \| "lg"` | `"md"` | Text size of tabs, questions and answers. |
| defaultOpen | `number` | `0` | Folder open on mount, or -1 for none. |
| items | `{ question: string; answer: string; label?: string }[]` |  | Questions, front of the drawer last. The label goes on the tab and defaults to the folder's number. |
| className | `string` |  | Classes for the wrapper. |

## Magnetic FAQ

An FAQ as a cloud of question pills that lean toward the pointer; picking one grows it into the answer card while the rest drift away.

- Page and source: https://uibrik.com/components/magnetic-faq
- Install: `npx shadcn@latest add https://uibrik.com/r/magnetic-faq.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { MagneticFaq } from "@/components/uibrik/magnetic-faq/magnetic-faq"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| strength | `number` | `14` | Furthest a pill moves toward the pointer. |
| radius | `number` | `180` | Distance from the pointer within which pills are pulled. |
| scatter | `number` | `48` | How far the other pills drift out while a card is open. |
| depth | `boolean` | `true` | Further pills are fainter and move less. |
| trail | `boolean` | `true` | Leave a dashed outline where the open card's pill sits. |
| cardWidth | `number` | `420` | Width of the open card; it never grows past the cloud. |
| items | `{ question: string; answer: string; related?: number[] }[]` |  | Questions and their answers. Keep questions short; they sit on one line. related lists the indexes kept sharp and clickable while this one is open. |
| className | `string` |  | Classes for the wrapper. |

## Orbit FAQ

An FAQ whose categories orbit a hub: picking one turns the ring to face the questions, which fan out beside it on a matching arc.

- Page and source: https://uibrik.com/components/orbit-faq
- Install: `npx shadcn@latest add https://uibrik.com/r/orbit-faq.json`
- Packages (installed by the CLI): @tabler/icons-react, motion, react-use-measure
- Import: `import { OrbitFaq } from "@/components/uibrik/orbit-faq/orbit-faq"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| ringRadius | `number` | `112` | Radius of the ring the categories sit on. |
| iconSize | `number` | `44` | Diameter of a category button. |
| curve | `number` | `1` | How strongly the questions curve around the orbit; 0 is a straight list. |
| connector | `boolean` | `true` | Draw a line from the category to the open question. Side by side only. |
| progress | `boolean` | `true` | A ring round each category that fills as its questions are opened. |
| watermark | `boolean` | `true` | The category's icon, large and faint, behind the hub's label. |
| defaultCategory | `number` | `0` | Category picked on mount. |
| categories | `{ label: string; icon: ReactNode; items: { question: string; answer: string }[] }[]` |  | Categories clockwise from the top, each with an icon and its questions. |
| className | `string` |  | Classes for the wrapper. |

## Pricing Calculator

Drag the team size and totals update live; the cheapest plan for that team is marked, and dots on the slider show where it changes.

- Page and source: https://uibrik.com/components/pricing-calculator
- Install: `npx shadcn@latest add https://uibrik.com/r/pricing-calculator.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion
- Import: `import { PricingCalculator } from "@/components/uibrik/pricing-calculator/pricing-calculator"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tiers | `"2" \| "3"` | `"3"` | How many plans to show. Two drops the first (Solo). |
| defaultSeats | `number` | `8` | Seat count on mount. |
| defaultBilling | `"monthly" \| "yearly"` | `"monthly"` | Billing period on mount. |
| maxSeats | `number` | `50` | Highest seat count the slider reaches. |
| currency | `string` | `"USD"` | ISO currency code for the prices. |
| locale | `string` | `"en-US"` | Locale for currency symbols, grouping and decimals. |
| plans | `SeatPlan[]` |  | Plans with a monthly and yearly price per seat or per plan, and an optional seat minimum and limit. |
| onSelect | `(plan: SeatPlan, seats: number, billing: Billing) => void` |  | Called when a plan's button is pressed. |
| className | `string` |  | Classes for the section. |

## Pricing Odometer

Plan cards under a monthly / yearly switch whose prices roll digit by digit; pointing at a plan sweeps a marker behind what it adds.

- Page and source: https://uibrik.com/components/pricing-odometer
- Install: `npx shadcn@latest add https://uibrik.com/r/pricing-odometer.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion
- Import: `import { PricingOdometer } from "@/components/uibrik/pricing-odometer/pricing-odometer"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tiers | `"2" \| "3"` | `"3"` | How many plans to show. |
| defaultBilling | `"monthly" \| "yearly"` | `"yearly"` | Billing period on mount. |
| showSaving | `boolean` | `true` | Show the yearly saving beside "Yearly". |
| spotlight | `boolean` | `true` | Full, aligned feature lists; the plan in focus fades the others back and marks what it adds. Off lists only what each plan adds. |
| color | `string` | `""` | Marker colour behind a plan's own features. Empty follows the theme. |
| dim | `number` | `0.45` | How far the other plans fade back. |
| currency | `string` | `"USD"` | ISO currency code for the prices. |
| locale | `string` | `"en-US"` | Locale for currency symbols, grouping and decimals. |
| plans | `Plan[]` |  | Plans in tier order. Each lists only the features it adds to the one before. |
| onSelect | `(plan: Plan, billing: Billing) => void` |  | Called when a plan's button is pressed. |
| className | `string` |  | Classes for the section. |

## Pricing Receipt

Pick a plan and a receipt prints with the line items and total due today, then gets stamped.

- Page and source: https://uibrik.com/components/pricing-receipt
- Install: `npx shadcn@latest add https://uibrik.com/r/pricing-receipt.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion
- Import: `import { PricingReceipt } from "@/components/uibrik/pricing-receipt/pricing-receipt"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tiers | `"2" \| "3"` | `"3"` | How many plans to show. |
| defaultPlan | `"Starter" \| "Pro" \| "Team"` | `"Pro"` | Plan picked on mount, by name. Falls back to the recommended plan. |
| defaultBilling | `"monthly" \| "yearly"` | `"yearly"` | Billing period on mount. |
| stamp | `string` | `"Selected"` | Word on the stamp. |
| printDuration | `number` | `0.7` | Time for a slip to print. |
| currency | `string` | `"USD"` | ISO currency code for the prices. |
| plans | `Plan[]` |  | Plans in tier order. |
| onSelect | `(plan: Plan, billing: Billing) => void` |  | Called when the continue button is pressed. |
| className | `string` |  | Classes for the section. |

## Aurora

Slow curtains of light with fine rays that lean toward the cursor.

- Page and source: https://uibrik.com/components/aurora
- Install: `npx shadcn@latest add https://uibrik.com/r/aurora.json`
- Packages: none beyond React
- Import: `import { Aurora } from "@/components/uibrik/aurora/aurora"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#2dd4a7","#36c3b4","#6d74f0","#41cf9b"]` | Hex colours, 2 to 6, used exactly as given. |
| background | `string` | `""` | Base colour behind the light; empty follows the page. |
| intensity | `number` | `1` | Brightness of the light. |
| layers | `number` | `3` | Number of curtains. |
| height | `number` | `0.45` | Where the curtains sit, 0 at the bottom to 1 at the top. |
| spread | `number` | `0.2` | How far the light reaches upward. |
| waviness | `number` | `1` | How much the curtains undulate; 0 is flat. |
| stretch | `number` | `1` | Horizontal size of the waves; larger is broader and calmer. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| grain | `number` | `0.02` | Film grain strength. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| lean | `number` | `1` | How strongly the curtains lean toward the pointer. |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Caustics

Sunlight on a pool floor, from light rays bent by moving water; click to drop a ripple.

- Page and source: https://uibrik.com/components/caustics
- Install: `npx shadcn@latest add https://uibrik.com/r/caustics.json`
- Packages: none beyond React
- Import: `import { Caustics } from "@/components/uibrik/caustics/caustics"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#0b3a53","#0f6f8f","#3fb6c9","#e6fbff"]` | Pool floor from deep to shallow, then the light's tint last; 2 to 6 colours. |
| strength | `number` | `0.6` | How strong the light is against the plain floor. |
| waves | `number` | `0.35` | Wave height. |
| depth | `number` | `1.4` | Floor depth: deeper water focuses the light into thinner, brighter lines. |
| scale | `number` | `1` | Size of the waves; larger is calmer. |
| dispersion | `number` | `0.5` | Colour fringing at the edges of the light. |
| chop | `number` | `0.55` | Irregular chop on top of the wave trains; 0 leaves only smooth swells. |
| direction | `number` | `23` | Direction the main waves travel. |
| softness | `number` | `0.05` | Blur on the light, like a larger sun. |
| bloom | `number` | `1.1` | Glow spilling around the brightest light. |
| sparkle | `number` | `1.25` | Star-shaped sun glints where the light peaks. |
| sparkleSize | `number` | `1` | Length of the glint rays. |
| rayAngle | `number` | `70` | Direction of the long glint rays. |
| vignette | `number` | `0.25` | Darkening toward the corners. |
| shade | `number` | `0.8` | How much the floor colour varies. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| grain | `number` | `0.015` | Film grain strength. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| follow | `number` | `0.75` | How lazily the fingertip dip follows the pointer, 0 (locked) to 1 (drifts after it). |
| touch | `number` | `0.5` | How deep the pointer dips into the water. |
| ripples | `boolean` | `true` | A click drops a ripple on the water. |
| rippleStrength | `number` | `0.35` | Height of a click ripple. |
| rippleSize | `number` | `1` | Wavelength of a click ripple; larger is broader. |
| rippleSpeed | `number` | `1` | How fast a ripple spreads. |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Dither Gradient

A bending gradient drawn only in your colours through an ordered dither.

- Page and source: https://uibrik.com/components/dither-gradient
- Install: `npx shadcn@latest add https://uibrik.com/r/dither-gradient.json`
- Packages: none beyond React
- Import: `import { DitherGradient } from "@/components/uibrik/dither-gradient/dither-gradient"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#0f172a","#4338ca","#db2777","#fbbf24"]` | The only colours drawn, in order; 2 to 6. |
| pixelSize | `number` | `3` | Size of a dither pixel; larger is more retro. |
| scale | `number` | `1` | Size of the shapes; larger is calmer. |
| warp | `number` | `1` | How much the gradient bends. |
| angle | `number` | `90` | Direction the colours run; 90 runs bottom to top. |
| sweep | `number` | `0.6` | How far apart the first and last colours sit. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| radius | `number` | `180` | How far the pointer light reaches. |
| follow | `number` | `0.6` | How lazily the light follows the pointer, 0 (locked) to 1 (drifts after it). |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Dot Grid

A quiet grid of dots lit by a drifting wave and by the cursor.

- Page and source: https://uibrik.com/components/dot-grid
- Install: `npx shadcn@latest add https://uibrik.com/r/dot-grid.json`
- Packages: none beyond React
- Import: `import { DotGrid } from "@/components/uibrik/dot-grid/dot-grid"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#2fb4d2","#3a9ef2","#5a82ea","#34c1b0"]` | Colours the dots light up in, 2 to 6. |
| dotColor | `string` | `""` | Resting dot colour; empty follows the theme. |
| background | `string` | `""` | Base colour behind the dots; empty follows the page. |
| shape | `"circle" \| "square" \| "diamond"` | `"circle"` | Dot shape. |
| pattern | `"grid" \| "stagger"` | `"grid"` | "stagger" shifts every other row by half a step. |
| spacing | `number` | `20` | Distance between dots. |
| size | `number` | `2.5` | Dot diameter. |
| intensity | `number` | `0.7` | Strength of the drifting colour wave; 0 leaves only the pointer light. |
| twinkle | `number` | `0.5` | How often single dots sparkle. |
| glow | `number` | `0.6` | Soft halo around lit dots. |
| ambient | `number` | `0.5` | Pale wash of colour drifting under the grid. |
| fade | `number` | `1` | Fade toward the edges, so the grid has no hard border. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| grain | `number` | `0` | Film grain strength. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| radius | `number` | `160` | How far the pointer light reaches. |
| follow | `number` | `0.6` | How lazily the light follows the pointer, 0 (locked) to 1 (drifts after it). |
| trail | `number` | `0.6` | How much the light stretches into a tail while the pointer moves. |
| magnify | `number` | `0.5` | Loupe strength: how much the dots under the light are enlarged. |
| ripples | `boolean` | `true` | A click sends a ring of light across the grid. |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Fluted Glass

A band of light seen through fluted glass, broken into steep slivers rib by rib.

- Page and source: https://uibrik.com/components/fluted-glass
- Install: `npx shadcn@latest add https://uibrik.com/r/fluted-glass.json`
- Packages: none beyond React
- Import: `import { FlutedGlass } from "@/components/uibrik/fluted-glass/fluted-glass"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#03060c","#0b3f86","#1a7fd4","#cfe3f4","#f7c2a6"]` | From the dark to the core of the band, blended in OKLCH; 2 to 6 colours. |
| ribs | `number` | `28` | Width of each rib. |
| magnify | `number` | `3` | How much of the scene each rib squeezes into its width; 1 is flat glass. |
| curve | `number` | `0.6` | Extra squeeze toward the rib edges. |
| shading | `number` | `0.8` | Dark-to-light shading across each rib, and the seams between them. |
| frost | `number` | `0.15` | Blur through the glass. |
| dispersion | `number` | `0.3` | Colour split toward the rib edges. |
| angle | `number` | `0` | Rib direction; 0 is vertical. |
| bandAngle | `number` | `-50` | Direction of the band of light. |
| bandWidth | `number` | `1` | Thickness of the band of light. |
| flow | `number` | `1` | How much the band sways. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| grain | `number` | `0.05` | Film grain strength. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| bend | `number` | `1` | How far the band of light bends toward the pointer. |
| shine | `number` | `1` | How strongly the glass catches the light near the pointer. |
| reach | `number` | `160` | How far the pointer's effects reach. |
| follow | `number` | `0.7` | How lazily the light follows the pointer, 0 (locked) to 1 (drifts after it). |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Grain Gradient

Colour that folds slowly like silk, finished with film grain.

- Page and source: https://uibrik.com/components/grain-gradient
- Install: `npx shadcn@latest add https://uibrik.com/r/grain-gradient.json`
- Packages: none beyond React
- Import: `import { GrainGradient } from "@/components/uibrik/grain-gradient/grain-gradient"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#07142e","#123a7c","#2b6bd6","#7db4f2","#dcebfc"]` | Hex colours, 2 to 6, laid out from first to last across the flow. |
| scale | `number` | `1` | Size of the shapes; larger is calmer. |
| warp | `number` | `1` | How much the flow folds into itself. |
| sheen | `number` | `0.6` | Soft light on the folds. |
| angle | `number` | `30` | Direction the colours run; 0 is left to right. |
| sweep | `number` | `0.7` | How far apart the first and last colours sit; 0 mixes them all evenly. |
| vignette | `number` | `0.5` | Darkening toward the corners. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| grain | `number` | `0.08` | Film grain strength. |
| grainSize | `number` | `1` | Size of a grain speck. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Halftone

A screen of lit dots: swirling ribbons of light drawn by the size and brightness of each dot.

- Page and source: https://uibrik.com/components/halftone
- Install: `npx shadcn@latest add https://uibrik.com/r/halftone.json`
- Packages: none beyond React
- Import: `import { Halftone } from "@/components/uibrik/halftone/halftone"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#1b2533","#5c7a9a","#c9d6e0","#f6ecdc"]` | Dot colours from dim to bright, blended in OKLCH; 2 to 6. |
| background | `string` | `"#050608"` | Colour behind the dots. |
| spacing | `number` | `7` | Distance between dots. |
| dotSize | `number` | `0.95` | Largest dot, as a share of the spacing; 1 lets the brightest dots touch. |
| minDot | `number` | `0.3` | Smallest dot (in the dark), as a share of the largest; 0 lets dark dots vanish. |
| angle | `number` | `0` | Grid angle. |
| frequency | `number` | `1.3` | Size of the ribbons of light; higher is busier. |
| flow | `number` | `1.2` | How much the ribbons curl. |
| bandWidth | `number` | `1` | Thickness of the ribbons. |
| contrast | `number` | `1.1` | Higher gives darker darks and fuller lights. |
| glow | `number` | `0.5` | Light spilling around the brightest dots. |
| softness | `number` | `0` | Blur on each dot's edge. |
| fade | `number` | `0` | How much the dots fade out toward the chosen side. |
| fadeFrom | `"edges" \| "top" \| "bottom" \| "left" \| "right"` | `"edges"` | Where the dots fade out. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| radius | `number` | `70` | Width of the pointer trail. |
| trailStrength | `number` | `0.85` | How strongly the trail lights the dots. |
| trailLength | `number` | `0.9` | Seconds the trail takes to fade. |
| follow | `number` | `0.55` | How lazily the trail follows the pointer, 0 (locked) to 1 (drifts after it). |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Light Rain

Thin lines of blue light falling through the dark, with bright glints sliding along them.

- Page and source: https://uibrik.com/components/light-rain
- Install: `npx shadcn@latest add https://uibrik.com/r/light-rain.json`
- Packages: none beyond React
- Import: `import { LightRain } from "@/components/uibrik/light-rain/light-rain"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#000000","#071a46","#1c4fb8","#6ea6ff","#eef5ff"]` | Dark to bright: the light is mapped through these, blended in OKLCH. |
| density | `number` | `1` | How many lines. |
| spread | `number` | `1` | How wide the band of lines is. |
| glints | `number` | `1` | How many bright glints slide along the lines. |
| glintLength | `number` | `1` | Spacing of the glints along a line; larger is fewer. |
| haze | `number` | `1` | Soft glow drifting between the lines. |
| intensity | `number` | `1` | Brightness. |
| direction | `"down" \| "up"` | `"down"` | Which way the light moves. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| grain | `number` | `0.02` | Film grain strength. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| radius | `number` | `160` | How far the pointer light reaches. |
| follow | `number` | `0.7` | How lazily it follows the pointer, 0 (locked) to 1 (drifts after it). |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Light Stream

An hourglass of fine iridescent light streaks with glittering dust, flowing through the dark.

- Page and source: https://uibrik.com/components/light-stream
- Install: `npx shadcn@latest add https://uibrik.com/r/light-stream.json`
- Packages: none beyond React
- Import: `import { LightStream } from "@/components/uibrik/light-stream/light-stream"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#ff6a1a","#ffb04a","#fff0dc","#ff7d2e","#5fe3d3","#9a78ff"]` | Streak tints; the first also warms the glow. 2 to 6 colours. |
| background | `string` | `"#050505"` | Colour behind the light. |
| intensity | `number` | `1.35` | Exposure: how bright the light is. |
| density | `number` | `0.85` | How many streaks; higher is finer and denser. |
| waist | `number` | `0.1` | Width of the stream at its narrowest. |
| flare | `number` | `1.55` | How much the stream opens toward its ends. |
| curve | `number` | `1` | How much the stream bends and sways. |
| angle | `number` | `-32` | Tilt of the stream. |
| length | `number` | `0.55` | Length of the streak dashes; larger is longer. |
| glow | `number` | `1` | Halo around each streak and haze around the core. |
| chroma | `number` | `0.9` | Colour fringing at the edges of the streaks. |
| white | `number` | `0.8` | How much the hottest light burns to white. |
| dust | `number` | `0.5` | Glittering dust along the stream. |
| dustSize | `number` | `0.6` | Size of the dust sparks; each spark still varies around it. |
| dustGlow | `number` | `0.5` | How many sparks carry a soft halo; 1 is about one in six. |
| direction | `"up" \| "down"` | `"up"` | Which way the light flows. |
| speed | `number` | `1.1` | Animation speed; 1 is the designed pace. |
| grain | `number` | `0.065` | Film grain strength. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| lean | `number` | `0.4` | How far the stream bends toward the pointer. |
| follow | `number` | `0.8` | How lazily the stream follows the pointer, 0 (locked) to 1 (drifts after it). |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Prism Burst

Rays of light bursting from a dark centre, split into rainbow edges like light through a prism.

- Page and source: https://uibrik.com/components/prism-burst
- Install: `npx shadcn@latest add https://uibrik.com/r/prism-burst.json`
- Packages: none beyond React
- Import: `import { PrismBurst } from "@/components/uibrik/prism-burst/prism-burst"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#ffd9b0","#c9d6ff","#ffc6e4","#d8fff0","#fff1c7"]` | Tints the rays take around the circle; the brightest parts stay white. |
| background | `string` | `"#050506"` | Colour behind the light. |
| hole | `number` | `0.25` | Radius of the dark centre. |
| length | `number` | `1` | How far the rays reach. |
| dispersion | `number` | `1.95` | Rainbow split along the ray edges. |
| chunks | `number` | `0.6` | How broken the ring of light is; higher makes more, smaller chunks. |
| ringWidth | `number` | `1.8` | Width of the ring the rays start from. |
| intensity | `number` | `0.95` | Brightness. |
| iridescence | `number` | `0.8` | How strongly the rays take the colour list; 0 is plain white light. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| grain | `number` | `0.07` | Film grain strength. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| lean | `number` | `0.6` | How far the centre drifts toward the pointer. |
| follow | `number` | `0.8` | How lazily it follows the pointer, 0 (locked) to 1 (drifts after it). |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |

## Silk Vortex

Liquid glass streaming outward from a dark void: glossy folds mapped through a colour gradient.

- Page and source: https://uibrik.com/components/silk-vortex
- Install: `npx shadcn@latest add https://uibrik.com/r/silk-vortex.json`
- Packages: none beyond React
- Import: `import { SilkVortex } from "@/components/uibrik/silk-vortex/silk-vortex"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `["#000000","#0d00aa","#301fe9","#b166fe","#ffecff"]` | The gradient light is mapped through, dark to bright, blended in OKLCH; 2 to 6 colours. |
| intensity | `number` | `1.6` | Brightness before the colour mapping. |
| frequency | `number` | `0.55` | How many folds. |
| flow | `number` | `1` | How fast the folds stream outward; negative flows inward. |
| twist | `number` | `0.6` | How much the dark arms curl as they leave the oval, like a vortex. |
| warp | `number` | `1` | Slow, broad sway of the whole shape. |
| hole | `number` | `0.15` | Width of the dark oval. |
| lobes | `number` | `1` | How strongly the light gathers on the two sides, leaving the oval's ends dark; 0 lights all round. |
| stretch | `number` | `2.4` | How many times longer the dark oval is than wide. |
| softness | `number` | `0.5` | Rounds the folds; lower pinches them into ridges. |
| gloss | `number` | `0.8` | Strength of the glossy highlights and rim. |
| shine | `number` | `0.25` | Size of the highlights: 0 is broad, 1 is pin-sharp. |
| refraction | `number` | `0.45` | How much the colour shifts along the slopes, as if refracted. |
| chroma | `number` | `0.2` | Colour split at the edges. |
| vignette | `number` | `0` | Darkening toward the corners; 0 keeps the liquid right to the edges. |
| angle | `number` | `-15` | Tilt. |
| speed | `number` | `1` | Animation speed; 1 is the designed pace. |
| grain | `number` | `0.03` | Film grain strength. |
| seed | `number` | `0` | Shifts the composition, so two backgrounds with the same settings still differ. |
| animate | `boolean` | `true` | Move on its own. Off draws one still frame. |
| interactive | `boolean` | `true` | React to the pointer. |
| lean | `number` | `0.5` | How far the void drifts toward the pointer. |
| follow | `number` | `0.8` | How lazily it follows the pointer, 0 (locked) to 1 (drifts after it). |
| children | `ReactNode` |  | Content shown on top of the background. |
| className | `string` |  | Classes for the box; it fills whatever size you give it. |