# 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.

- [All components](https://uibrik.com/components)
- [Full reference for AI agents](https://uibrik.com/llms-full.txt): install lines, imports and props for every component

## Text Animations

- [Blur Reveal](https://uibrik.com/components/blur-reveal): Letters sharpen out of a blur, one after another.
- [Domino Letters](https://uibrik.com/components/domino-letters): Letters topple one into the next like dominoes.
- [Fade In Left to Right](https://uibrik.com/components/fade-left-to-right): A soft-edged mask reveals the text from left to right.
- [Falling Letters](https://uibrik.com/components/falling-letters): Letters drop in and settle with a small bounce.
- [Highlighter](https://uibrik.com/components/highlighter): A marker stroke sweeps across a key phrase.
- [Line-by-line Rise](https://uibrik.com/components/line-rise): Each wrapped line rises into place in turn.
- [Loading Shimmer](https://uibrik.com/components/loading-shimmer): A light sweep across text while something loads.
- [Outline then Fill](https://uibrik.com/components/outline-fill): Letters are drawn as outlines, then filled in.
- [Plucked Curve](https://uibrik.com/components/plucked-curve): Text rides a curve that wobbles like a plucked string.
- [Ripple to Still](https://uibrik.com/components/ripple-to-still): Text ripples like water, then settles.
- [Scramble Text](https://uibrik.com/components/scramble-text): Letters resolve from random characters out of a soft blur, one after another.
- [Scroll to Highlight](https://uibrik.com/components/scroll-highlight): Words light up as you scroll past them.
- [Typewriter](https://uibrik.com/components/typewriter): Text typed with a human rhythm, mistakes included.
- [Anagram Shuffle](https://uibrik.com/components/anagram-shuffle): Letters rearrange themselves into the next anagram.
- [Crumble to Sand](https://uibrik.com/components/crumble-to-sand): The phrase crumbles into grains that rebuild the next one.
- [Particle Scatter](https://uibrik.com/components/particle-scatter): Each press breaks the phrase into particles that regroup.
- [Redact and Reveal](https://uibrik.com/components/redact-reveal): Black bars redact a line, then lift to reveal the next.
- [Rolling Word](https://uibrik.com/components/rolling-word): One word rolls to the next like a drum.
- [Scatter Text](https://uibrik.com/components/scatter-text): Phrases shatter into particles that regroup into the next phrase.
- [Scramble to Word](https://uibrik.com/components/scramble-to-word): A split-flap board scrambles to the next word.
- [Slot-machine Letters](https://uibrik.com/components/slot-letters): Each letter spins like a reel and lands on the next word.
- [Status Stamp](https://uibrik.com/components/status-stamp): An ink stamp slams down: approved, in review, rejected.
- [Zoom Past](https://uibrik.com/components/zoom-past): Words fly toward you and the next one arrives behind.
- [Draggable Letters](https://uibrik.com/components/draggable-letters): Letters you can pull apart; they spring home.
- [Hover Weight](https://uibrik.com/components/hover-weight): Letters grow heavier as the cursor nears them.
- [Lean and Scramble](https://uibrik.com/components/lean-scramble): Words lean and scramble under the cursor.
- [Pull Toward Cursor](https://uibrik.com/components/pull-to-cursor): Letters lean toward the cursor like a magnet.

## Components

- [Balloon Button](https://uibrik.com/components/balloon-button): An inflated, half-balloon button drawn with a WebGL shader, with folds along its seam and a springy dent when pressed.
- [Bookmark Button](https://uibrik.com/components/bookmark-button): A save button whose bookmark fills from the top like a dropped ribbon while the label rolls to Saved.
- [Copy Button](https://uibrik.com/components/copy-button): A copy button whose two sheets slide together into a check while the label rolls to Copied.
- [Expand Button](https://uibrik.com/components/expand-button): An icon-only button that springs open to reveal its label on hover or keyboard focus.
- [Hold to Confirm](https://uibrik.com/components/hold-to-confirm): A destructive-action button that has to be held down; a fill grows across it and drains back if released early.
- [Inline Confirm](https://uibrik.com/components/inline-confirm): A destructive button that splits into Cancel and Confirm in its own footprint, so nothing around it moves.
- [Share Menu](https://uibrik.com/components/share-menu): A share button that flips open into a pill of options, resizing to fit.
- [Split Button](https://uibrik.com/components/split-button): A primary button with a menu of alternative actions; the chosen one rolls into the main label.
- [Stepper Button](https://uibrik.com/components/stepper-button): An add-to-cart button that reshapes into a quantity stepper in the same pill.
- [Theme Switch](https://uibrik.com/components/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.
- [Date Picker](https://uibrik.com/components/date-picker): iOS-style wheel picker with drag, momentum and infinite columns.
- [Elastic Slider](https://uibrik.com/components/elastic-slider): A slider that stretches like rubber past its ends and springs back.
- [Multi-step Form](https://uibrik.com/components/multi-step-form): A pill that opens into a four-step form, then folds back into a summary.
- [OTP Input](https://uibrik.com/components/otp-input): One-time code field whose boxes merge and scramble into a pass or fail result.
- [Scrub Timeline](https://uibrik.com/components/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.
- [Tactile Toggles](https://uibrik.com/components/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.
- [Type Fighter](https://uibrik.com/components/type-fighter): A text field where each typed glyph flies in like a comet, or is written by pen.
- [Morph Tab Bar](https://uibrik.com/components/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.
- [On This Page](https://uibrik.com/components/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 Indicator](https://uibrik.com/components/page-indicator): Pagination dashes you can click, scrub, step with arrows or type into.
- [Search](https://uibrik.com/components/search): A search pill that grows into a palette with filter chips and results.
- [Viscosity Menu](https://uibrik.com/components/viscosity-menu): A dot that pours into a menu panel like a drop of liquid.
- [AI Blob](https://uibrik.com/components/ai-blob): A 3D dotted orb for AI states. Click to morph between five shapes.
- [Image Generation](https://uibrik.com/components/image-generation): An AI image placeholder: a dither field that resolves into the picture.
- [Notification Stack](https://uibrik.com/components/notification-stack): Notifications that pile up as panes of frosted glass, fan out on hover and blur away when swiped.
- [Pixel Bot](https://uibrik.com/components/pixel-bot): A tiny pixel face that cycles through animated expressions.
- [Send](https://uibrik.com/components/send): File upload that fills, then launches a paper plane out of the card.
- [Folder Peek](https://uibrik.com/components/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.
- [Merge Gallery](https://uibrik.com/components/merge-gallery): Six tiles that merge into one video player, and split back apart.
- [Music Player](https://uibrik.com/components/music-player): Compact player with a sliding cover stack, rolling time and a progress ring.
- [Area Chart](https://uibrik.com/components/area-chart): A time-series chart with soft area washes and one crosshair that reads every series at once.
- [Bar List](https://uibrik.com/components/bar-list): A ranked list of top pages, referrers or countries whose rows slide to their new rank and resize when you switch lists.
- [Funnel](https://uibrik.com/components/funnel): A conversion funnel whose drop-off between steps reads as a slope you can hover, with every step's share of the start.
- [Live Line](https://uibrik.com/components/live-line): A realtime line that scrolls smoothly as samples stream in, and freezes under the pointer so you can read any moment.
- [Morph Chart](https://uibrik.com/components/morph-chart): One dataset that morphs between bar, line and donut charts.
- [Range Line](https://uibrik.com/components/range-line): A portfolio line with time ranges that morphs between them, and a header that reads out any point you scrub.
- [Ring Stack](https://uibrik.com/components/ring-stack): Concentric budget rings that dim around the one you point at, and unroll into a labelled bar when you pick it.
- [Split Bar](https://uibrik.com/components/split-bar): Parts of a whole on one bar, linked to a list, with segments that slide to new shares when the data changes.
- [Stacked Bars](https://uibrik.com/components/stacked-bars): Monthly columns split by series that slide apart into groups, with a legend that folds series away.
- [Gauge](https://uibrik.com/components/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.
- [KPI Tile](https://uibrik.com/components/kpi-tile): A dashboard stat with its change and a sparkline you can scrub, rolling the number to any day.
- [Streak Calendar](https://uibrik.com/components/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.
- [Uptime Bar](https://uibrik.com/components/uptime-bar): A status page history with a tick for every day, lifting any day to show what happened.
- [Avatar Stack](https://uibrik.com/components/avatar-stack): Overlapping avatars that fan on hover and spring apart into a named list on a card growing out of the row.
- [Boarding Pass](https://uibrik.com/components/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.
- [Company Card](https://uibrik.com/components/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.
- [Flaming Todos](https://uibrik.com/components/flaming-todos): A todo list where finished items burn away in WebGL flames.
- [Genie Effect](https://uibrik.com/components/genie-effect): macOS-style minimize: windows pour into the dock along a WebGL mesh.
- [Light Badge](https://uibrik.com/components/light-badge): A badge lit from below by a rotating gradient stroke and soft rays.
- [Liquid Glass Lens](https://uibrik.com/components/liquid-glass-lens): A draggable glass pill that refracts whatever sits underneath it.

## Blocks

- [Folder FAQ](https://uibrik.com/components/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.
- [Magnetic FAQ](https://uibrik.com/components/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.
- [Orbit FAQ](https://uibrik.com/components/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.
- [Pricing Calculator](https://uibrik.com/components/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.
- [Pricing Odometer](https://uibrik.com/components/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.
- [Pricing Receipt](https://uibrik.com/components/pricing-receipt): Pick a plan and a receipt prints with the line items and total due today, then gets stamped.

## Backgrounds

- [Aurora](https://uibrik.com/components/aurora): Slow curtains of light with fine rays that lean toward the cursor.
- [Caustics](https://uibrik.com/components/caustics): Sunlight on a pool floor, from light rays bent by moving water; click to drop a ripple.
- [Dither Gradient](https://uibrik.com/components/dither-gradient): A bending gradient drawn only in your colours through an ordered dither.
- [Dot Grid](https://uibrik.com/components/dot-grid): A quiet grid of dots lit by a drifting wave and by the cursor.
- [Fluted Glass](https://uibrik.com/components/fluted-glass): A band of light seen through fluted glass, broken into steep slivers rib by rib.
- [Grain Gradient](https://uibrik.com/components/grain-gradient): Colour that folds slowly like silk, finished with film grain.
- [Halftone](https://uibrik.com/components/halftone): A screen of lit dots: swirling ribbons of light drawn by the size and brightness of each dot.
- [Light Rain](https://uibrik.com/components/light-rain): Thin lines of blue light falling through the dark, with bright glints sliding along them.
- [Light Stream](https://uibrik.com/components/light-stream): An hourglass of fine iridescent light streaks with glittering dust, flowing through the dark.
- [Prism Burst](https://uibrik.com/components/prism-burst): Rays of light bursting from a dark centre, split into rainbow edges like light through a prism.
- [Silk Vortex](https://uibrik.com/components/silk-vortex): Liquid glass streaming outward from a dark void: glossy folds mapped through a colour gradient.

## Docs

- [Introduction](https://uibrik.com/docs/introduction): Interaction-first React components you copy into your project and own, line by line.
- [Installation](https://uibrik.com/docs/installation): Add components with the shadcn CLI in Next.js or Vite, or copy the files by hand.
- [Theming](https://uibrik.com/docs/theming): Components read your shadcn theme tokens, follow class-based dark mode and take colors as props.
- [MCP](https://uibrik.com/docs/mcp): Connect uibrik's MCP server so your AI assistant can search components, read their props and source, and install them.
- [Changelog](https://uibrik.com/docs/changelog): New components and features, release by release.