# beUI

> Animated components for React and Next.js.

## Endpoints

- Registry index (JSON): https://beui.dev/r
- Component detail (JSON): https://beui.dev/r/{slug}
- Raw source (text/plain): https://beui.dev/r/{slug}/raw
- Component Markdown: https://beui.dev/components/{category}/{slug}.md

## Components

- [Tilt Card](https://beui.dev/components/motion/tilt-card.md): 3D perspective tilt on hover with cursor-tracked glare.
- [Button](https://beui.dev/components/motion/button.md): Spring-pressed Button plus StatefulButton (idle → loading → success / error) and MagneticButton.
- [Animated CTA Buttons](https://beui.dev/components/motion/expanding-arrow-button.md): Expressive call-to-action buttons with expanding, hold, and slide interactions.
- [Marquee](https://beui.dev/components/motion/marquee.md): Infinite horizontal or vertical scroll with pause-on-hover.
- [Tabs](https://beui.dev/components/motion/tabs.md): Pill, segment or underline tabs with a spring layoutId indicator.
- [Switch](https://beui.dev/components/motion/switch.md): Toggle with a spring-driven thumb and press feedback.
- [Input](https://beui.dev/components/motion/input.md): Text input with label, left/right icons, error shake and success check draw.
- [Select](https://beui.dev/components/motion/select.md): Composable select primitives whose panel bouncily unfolds out of the trigger and separates, plus a Morph variant where the trigger grows into the panel via shared layout.
- [Checkbox](https://beui.dev/components/motion/checkbox.md): Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support.
- [Radio Group](https://beui.dev/components/motion/radio.md): Single-select choice control with a gliding layoutId indicator dot and spring press feedback.
- [Bottom Sheet](https://beui.dev/components/motion/bottom-sheet.md): Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
- [Pull to Refresh](https://beui.dev/components/motion/pull-to-refresh.md): Native-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
- [Shared Layout Background](https://beui.dev/components/motion/shared-layout-bg.md): A pill that glides between hovered items via motion's shared layout, with blur enter/exit.
- [Bounce Sidebar](https://beui.dev/components/motion/bounce-sidebar.md): A vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path.
- [Animated Sidebar](https://beui.dev/components/motion/animated-sidebar.md): A composable application sidebar with morphing nested navigation that folds into an animated icon rail on desktop and becomes a focus-managed sheet on mobile.
- [Preview Rail](https://beui.dev/components/motion/preview-rail.md): Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.
- [Dock](https://beui.dev/components/motion/dock.md): macOS-style dock with grouped actions and a gliding active pill.
- [Tooltip](https://beui.dev/components/motion/tooltip.md): Hover or focus tooltip with blur enter/exit and spring spawn.
- [Animated Context Menu](https://beui.dev/components/motion/context-menu.md): Composable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices, keyboard navigation, typeahead, and long-press support.
- [Popover](https://beui.dev/components/motion/popover.md): Gooey popover whose panel oozes out of the trigger through an SVG goo filter — a liquid neck that stretches and pinches — with crisp content fading in on top, plus a Morph variant that clip-morphs open from the trigger corner. Click or hover trigger, controlled or uncontrolled.
- [Morphing Modal](https://beui.dev/components/motion/morphing-modal.md): Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.
- [Center Morph Modal](https://beui.dev/components/motion/center-morph-modal.md): A composable modal whose full-size surface unfolds from its exact center toward every edge, then folds back the same way with an inset close control.
- [Text Animation](https://beui.dev/components/motion/text-animation.md): Animated text primitives for spring reveals, chromatic sweeps, shimmer loading states and letter-cascade swaps.
- [Number Animation](https://beui.dev/components/motion/number.md): Animated number primitives for count-up values and rolling digit tickers.
- [Animated Badge](https://beui.dev/components/motion/animated-badge.md): Status badge with animated state icons, pulse feedback and compact size variants.
- [Action Swap](https://beui.dev/components/motion/action-swap.md): CTA button and slot primitives for swapping text and icons with blur motion.
- [Animated Toast Stack](https://beui.dev/components/motion/animated-toast-stack.md): Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
- [Theme Toggle](https://beui.dev/components/motion/theme-toggle.md): Theme toggle button that repaints the whole page through the View Transition API — a rectangle or circle clip-path reveal, or slats that open across the screen like a shutter.
- [Bouncy Accordion](https://beui.dev/components/motion/bouncy-accordion.md): Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.
- [Drawer](https://beui.dev/components/motion/drawer.md): Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.
- [Scroll Animation](https://beui.dev/components/motion/scroll-animation.md): Scroll-driven motion: a Lenis smooth-scroll provider and a reading-progress indicator that reads from it.
- [Range Slider](https://beui.dev/components/motion/range-slider.md): Slider with tick dots and a vertical-bar thumb that bounces as it lands on each step. Drag or keyboard, reduced-motion safe.
- [Wheel Picker](https://beui.dev/components/motion/wheel-picker.md): iOS-style picker wheel: a 3D drum on native momentum scroll that snaps to the nearest notch, with wheel, drag and keyboard control. Composes side by side for date and time pickers, reduced-motion safe.
- [Table](https://beui.dev/components/motion/table.md): Virtualized data table that stays smooth at 10k+ rows, with sortable headers, row selection, column resize and reorder, and a sticky header. Minimal, reduced-motion-safe motion.
- [Shader Background](https://beui.dev/components/motion/shader-background.md): Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.
- [Cylinder Carousel](https://beui.dev/components/motion/cylinder-carousel.md): A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide.
- [Loader](https://beui.dev/components/motion/loader.md): Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five terminal-style ascii spinners. Scales from one size prop, uses currentColor, and reduced-motion swaps every transform for a calm opacity pulse.
- [Message Bubble](https://beui.dev/components/agents/message-bubble.md): A focused conversational surface with visual tones, independent alignment, grouped messages, expandable content, and interactive link or button support.
- [Message](https://beui.dev/components/agents/message.md): Composable conversation primitives for message rows, grouped bubbles, avatars, metadata, live markers, and a mount-only trailing-edge pop-up for newly sent rows.
- [Message Scroller](https://beui.dev/components/agents/message-scroller.md): A reader-aware conversation viewport that follows streamed output at the live edge and releases control when the reader moves away.
- [Prompt Input](https://beui.dev/components/agents/prompt-input.md): An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.
- [Todo List](https://beui.dev/components/agents/todo-list.md): A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.
- [Code Block](https://beui.dev/components/agents/code-block.md): A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.
- [Approval Card](https://beui.dev/components/agents/approval-card.md): A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.
- [File Diff](https://beui.dev/components/agents/file-diff.md): A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.
- [Tool Result](https://beui.dev/components/agents/tool-result.md): A lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.
- [Streaming Response](https://beui.dev/components/agents/streaming-response.md): A stable response surface with completion actions, rendered content, and an expandable source summary.
- [Image Generation](https://beui.dev/components/agents/image-generation.md): A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.
- [Tool Approval](https://beui.dev/components/agents/tool-approval.md): A human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution.
- [Citations](https://beui.dev/components/agents/citations.md): Inline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.
- [Agent Activity](https://beui.dev/components/agents/agent-activity.md): One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.
- [Agent Loading States](https://beui.dev/components/agents/loading-states.md): Three thoughtful loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
- [AI Sidebar](https://beui.dev/components/agents/ai-sidebar.md): A collapsible AI workspace sidebar for folders, projects, files, and bookmarks with keyboard navigation, optimistic moves, inline rename, and overflow-aware labels.
- [Chat App](https://beui.dev/components/agents/chat-app.md): A complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.
- [Infinite Masonry](https://beui.dev/components/blocks/infinite-masonry.md): Responsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.
- [Notification Stack](https://beui.dev/components/blocks/notification-stack.md): Compact notification cards that spring from a stacked summary into a readable list on hover, focus or tap.
- [Fixtures](https://beui.dev/components/blocks/knockout-bracket.md): Animated tournament fixtures in two styles: a knockout bracket that pages through rounds, and a wheel that wraps the same tree around the champion. Both read the same array of rounds, so one dataset draws either.
- [Availability Scheduler](https://beui.dev/components/blocks/availability-scheduler.md): Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days.
- [Multi-chain Swap](https://beui.dev/components/blocks/swap.md): Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.
- [Dynamic Island](https://beui.dev/components/blocks/dynamic-island.md): iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.
- [Command Palette](https://beui.dev/components/blocks/command-palette.md): ⌘K palette with fuzzy filter, spring-animated active row and glass surface.
- [Expandable Action Bar](https://beui.dev/components/blocks/expandable-action-bar.md): Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.
- [Overflow Actions](https://beui.dev/components/blocks/overflow-actions.md): Connected pill rail for primary actions that springs open to reveal extra controls.
- [Expandable Tabs](https://beui.dev/components/blocks/expandable-tabs.md): Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch.
- [Morphing Tabs](https://beui.dev/components/blocks/morphing-tabs.md): Reorderable tabs whose selected item grows into a white content surface, with the active shape gliding as tabs move and a shared morph between rooms.
- [Swipeable List](https://beui.dev/components/blocks/swipeable-list.md): Mobile-style list rows that swipe left or right to reveal contextual action buttons.
- [File Upload](https://beui.dev/components/blocks/file-upload.md): Two file upload patterns: an attachment workspace for mixed files, links, audio and media, plus a progress queue with retry and removal.
- [Prediction Market](https://beui.dev/components/blocks/prediction-market.md): Prediction market trade ticket with buy/sell modes, outcome prices, rolling amount entry, quick add chips and trade states.
- [Wallet Card](https://beui.dev/components/blocks/wallet-card.md): Wallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with a live change pill and privacy toggle, copy-address, and Send / Deposit / Swap / Buy actions.
- [OTP Input](https://beui.dev/components/blocks/otp-input.md): One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.
- [Bloom Menu](https://beui.dev/components/blocks/bloom-menu.md): A button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered items.
- [Feedback Widget](https://beui.dev/components/blocks/feedback-widget.md): Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.
- [404 / Not Found](https://beui.dev/components/blocks/not-found.md): Animated 404 pages in five styles: glitch scramble, magnetic digits, cursor spotlight, a fanning card stack and a typed terminal.

## Usage for agents

1. Fetch the index to discover components.
2. Fetch a component detail JSON for files, deps and source.
3. Drop files into the user's project at the listed paths.
4. Install external `dependencies` listed on the entry.
5. Internal helpers (e.g. `@/lib/utils`) ship in the `files` array as `type: util`.