# vuelix > Animated, copy-paste components for Vue 3 & Nuxt, built on Tailwind CSS v4 and motion-v. Install copy-paste source with `npx shadcn-vue@latest add https://vuelix.dev/r/.json`, or use the `vuelix` npm package (`npm install vuelix motion-v`, then `@import "vuelix/tailwind.css";`). Components use shadcn-vue theme tokens (bg-primary, text-muted-foreground, border, …) so they inherit the app's theme. A JSON catalogue of everything is at https://vuelix.dev/r and an MCP server at https://vuelix.dev/mcp. ## Docs - [Introduction](https://vuelix.dev/docs/): What vuelix is and its principles - [Installation](https://vuelix.dev/docs/installation): npm package vs copy-source (shadcn-vue CLI) - [Theming](https://vuelix.dev/docs/theming): Tokens, dark mode, tuning springs - [Motion Patterns](https://vuelix.dev/docs/motion): Springs, shared layout, presence, motion values - [For AI Agents](https://vuelix.dev/docs/ai-agents): MCP server, endpoints and agent flow ## Components - [CTA Button](https://vuelix.dev/components/cta-button): Call-to-action buttons with a shimmer sweep, spinning gradient border, magnetic pull or sliding arrow. Source: https://vuelix.dev/r/cta-button.json - [Expanding Button](https://vuelix.dev/components/expanding-button): A compact button that springs open into an inline panel of actions or a small form, then folds back. Source: https://vuelix.dev/r/expanding-button.json - [Icon Swap](https://vuelix.dev/components/icon-swap): Button that morphs between icon states — copy to check, play to pause — with an optional particle burst. Source: https://vuelix.dev/r/icon-swap.json - [Spring Button](https://vuelix.dev/components/spring-button): A button with springy hover/press physics and a morphing loading state. Source: https://vuelix.dev/r/spring-button.json - [Theme Toggle](https://vuelix.dev/components/theme-toggle): A sun/moon toggle with a rotating swap animation. Source: https://vuelix.dev/r/theme-toggle.json - [Color Picker](https://vuelix.dev/components/color-picker): HSV color picker with springy thumbs, hex/RGB/HSL fields, eyedropper, recents and a popover variant. Source: https://vuelix.dev/r/color-picker.json - [Color Swatches](https://vuelix.dev/components/color-swatches): Color picker where a springy ring hops between swatches, with an optional custom color. Source: https://vuelix.dev/r/color-swatches.json - [Combobox](https://vuelix.dev/components/combobox): Searchable select whose options glide in and out as you type, with the matched text highlighted. Source: https://vuelix.dev/r/combobox.json - [Date Range Picker](https://vuelix.dev/components/date-range-picker): A calendar popover with presets, a range band that stretches between dates and sliding months. Source: https://vuelix.dev/r/date-range-picker.json - [Dial Picker](https://vuelix.dev/components/dial-picker): A circular dial: drag the knob around a ticked arc, it snaps to steps while the readout rolls. Source: https://vuelix.dev/r/dial-picker.json - [Floating Input](https://vuelix.dev/components/floating-input): Text field whose label springs up on focus, with an animated focus ring, clear button and sliding error. Source: https://vuelix.dev/r/floating-input.json - [Motion Select](https://vuelix.dev/components/motion-select): Single-select dropdown that scales out of its trigger, with a gliding highlight and drawn-in check. Source: https://vuelix.dev/r/motion-select.json - [Multi Select](https://vuelix.dev/components/multi-select): Pick many options: choices pop into the field as chips and reflow with layout animation. Source: https://vuelix.dev/r/multi-select.json - [OTP Input](https://vuelix.dev/components/otp-input): One-time-code input with popping digits, a blinking caret and an error shake. Source: https://vuelix.dev/r/otp-input.json - [Radio Cards](https://vuelix.dev/components/radio-cards): Radio group where the selection ring and dot spring between options, as cards or a compact list. Source: https://vuelix.dev/r/radio-cards.json - [Range Slider](https://vuelix.dev/components/range-slider): Single or dual-thumb slider with growing thumbs, a value bubble that follows, and an animated fill. Source: https://vuelix.dev/r/range-slider.json - [Spring Checkbox](https://vuelix.dev/components/spring-checkbox): Checkbox that squishes on press and draws its check mark in, with an indeterminate state. Source: https://vuelix.dev/r/spring-checkbox.json - [Spring Switch](https://vuelix.dev/components/spring-switch): A toggle whose thumb springs across and stretches while pressed. Source: https://vuelix.dev/r/spring-switch.json - [Wheel Picker](https://vuelix.dev/components/wheel-picker): An iOS-style 3D scroll wheel with flick momentum that snaps to items; combine wheels for time pickers. Source: https://vuelix.dev/r/wheel-picker.json - [Animated Tooltip](https://vuelix.dev/components/animated-tooltip): A lightweight tooltip that springs out from any side with a blur-in. Source: https://vuelix.dev/r/animated-tooltip.json - [Bottom Sheet](https://vuelix.dev/components/bottom-sheet): A mobile-style sheet with snap points, velocity-aware dragging and a background that scales back. Source: https://vuelix.dev/r/bottom-sheet.json - [Context Menu](https://vuelix.dev/components/context-menu): A right-click / long-press menu with a gliding highlight, shortcuts and a submenu that slides out. Source: https://vuelix.dev/r/context-menu.json - [Expanding Modal](https://vuelix.dev/components/expanding-modal): A modal that grows out of the exact button that opened it and collapses back into it. Source: https://vuelix.dev/r/expanding-modal.json - [Morphing Dialog](https://vuelix.dev/components/morphing-dialog): A card that morphs into a full dialog using a shared layout transition. Source: https://vuelix.dev/r/morphing-dialog.json - [Spring Drawer](https://vuelix.dev/components/spring-drawer): A side drawer that springs in from any edge, with a drag-to-dismiss handle and focus trap. Source: https://vuelix.dev/r/spring-drawer.json - [Spring Popover](https://vuelix.dev/components/spring-popover): A click-to-open popover that springs out of its trigger, with an arrow and smart flipping. Source: https://vuelix.dev/r/spring-popover.json - [Animated Tabs](https://vuelix.dev/components/animated-tabs): Tabs with a shared-layout indicator that glides between triggers. Source: https://vuelix.dev/r/animated-tabs.json - [Breadcrumbs](https://vuelix.dev/components/breadcrumbs): A breadcrumb trail that staggers in, underlines the current page and springs open collapsed levels. Source: https://vuelix.dev/r/breadcrumbs.json - [Dock](https://vuelix.dev/components/dock): A magnifying dock where icons grow as the pointer approaches. Source: https://vuelix.dev/r/dock.json - [Pagination](https://vuelix.dev/components/pagination): Page buttons with a sliding active pill, smart ellipses and numbers that roll with the direction. Source: https://vuelix.dev/r/pagination.json - [Spring Sidebar](https://vuelix.dev/components/spring-sidebar): An app sidebar that springs between full width and an icon rail, with a gliding active indicator. Source: https://vuelix.dev/r/spring-sidebar.json - [Stepper](https://vuelix.dev/components/stepper): Multi-step progress with spring-filled connectors, steps that morph into checks and a pulsing current step. Source: https://vuelix.dev/r/stepper.json - [Aspect Ratio](https://vuelix.dev/components/aspect-ratio): A fluid box that holds a ratio and springs smoothly to a new shape when the ratio changes. Source: https://vuelix.dev/r/aspect-ratio.json - [Aurora Background](https://vuelix.dev/components/aurora-background): A section backdrop of soft, slowly drifting gradient blobs with optional film grain; transform-only and light on CPU. Source: https://vuelix.dev/r/aurora-background.json - [Bouncy Accordion](https://vuelix.dev/components/bouncy-accordion): Accordion panels that open with a bouncy height spring and blur-in content. Source: https://vuelix.dev/r/bouncy-accordion.json - [Collapsible](https://vuelix.dev/components/collapsible): A single disclosure whose content springs open to its natural height and blurs into focus. Source: https://vuelix.dev/r/collapsible.json - [Hover Highlight](https://vuelix.dev/components/hover-highlight): List, nav or grid where one shared background glides to the hovered item and fades out on leave. Source: https://vuelix.dev/r/hover-highlight.json - [Orbit Carousel](https://vuelix.dev/components/orbit-carousel): Cards on a 3D ring: drag to spin with inertia that snaps to the nearest card, or let it orbit slowly. Source: https://vuelix.dev/r/orbit-carousel.json - [Spotlight Card](https://vuelix.dev/components/spotlight-card): A card lit by a soft spotlight and glowing rim that follow the pointer, with a gentle hover lift. Source: https://vuelix.dev/r/spotlight-card.json - [Tilt Card](https://vuelix.dev/components/tilt-card): A 3D card that tilts toward the pointer with a moving glare. Source: https://vuelix.dev/r/tilt-card.json - [Marquee](https://vuelix.dev/components/marquee): Seamless infinite scroller in any direction that eases to a stop on hover, with faded edges. Source: https://vuelix.dev/r/marquee.json - [Number Ticker](https://vuelix.dev/components/number-ticker): Counts up to a value with spring physics when scrolled into view. Source: https://vuelix.dev/r/number-ticker.json - [Scroll Reveal](https://vuelix.dev/components/scroll-reveal): Reveals children with staggered presets as they scroll into view, plus a springy reading progress bar. Source: https://vuelix.dev/r/scroll-reveal.json - [Text Reveal](https://vuelix.dev/components/text-reveal): Staggered word or character reveal with blur and lift. Source: https://vuelix.dev/r/text-reveal.json - [Alert](https://vuelix.dev/components/alert): Inline alert whose icon pops and draws itself in, with a dismiss that smoothly collapses its height. Source: https://vuelix.dev/r/alert.json - [Loader](https://vuelix.dev/components/loader): Five loaders — wave, orbit, bars, ring and a typing skeleton — that calm down for reduced motion. Source: https://vuelix.dev/r/loader.json - [Pull to Refresh](https://vuelix.dev/components/pull-to-refresh): Pull a scroll area down with rubber-band resistance; a spinning indicator holds while your refresh runs. Source: https://vuelix.dev/r/pull-to-refresh.json - [Toast Stack](https://vuelix.dev/components/toast-stack): Stacked notifications that fan out on hover, with a tiny imperative API. Source: https://vuelix.dev/r/toast-stack.json - [Avatar Group](https://vuelix.dev/components/avatar-group): Overlapping avatars that spread apart on hover with springy name tags. Source: https://vuelix.dev/r/avatar-group.json - [Data Table](https://vuelix.dev/components/data-table): A sortable, selectable table whose rows glide into their new order and whose selection bar slides up. Source: https://vuelix.dev/r/data-table.json - [File Tree](https://vuelix.dev/components/file-tree): A keyboard-navigable file tree whose folders spring open and whose selection glides between rows. Source: https://vuelix.dev/r/file-tree.json - [Filmstrip](https://vuelix.dev/components/filmstrip): A gallery preview with a draggable thumbnail rail; a frame glides to the active shot as images slide in. Source: https://vuelix.dev/r/filmstrip.json - [Lightbox](https://vuelix.dev/components/lightbox): An image grid whose thumbnails morph into a full-screen viewer you can swipe through or drag away. Source: https://vuelix.dev/r/lightbox.json - [Motion Badge](https://vuelix.dev/components/motion-badge): Badge with odometer-style rolling counts and an optional pulsing live dot. Source: https://vuelix.dev/r/motion-badge.json - [Sortable List](https://vuelix.dev/components/sortable-list): A drag-to-reorder list where rows lift off the page and the rest glide aside; keyboard friendly. Source: https://vuelix.dev/r/sortable-list.json - [Timeline](https://vuelix.dev/components/timeline): A vertical timeline whose line draws in as you scroll while each event pops and slides into place. Source: https://vuelix.dev/r/timeline.json ## Blocks - [Action Bar](https://vuelix.dev/blocks/action-bar): A floating bulk-action bar that springs in on selection, rolls its count and confirms in place. Source: https://vuelix.dev/r/action-bar.json - [Auth Form](https://vuelix.dev/blocks/auth-form): Sign-in / sign-up card with a sliding mode switch, floating labels, a live strength meter and a morphing submit. Source: https://vuelix.dev/r/auth-form.json - [Availability Picker](https://vuelix.dev/blocks/availability-picker): Weekly scheduler with day switches, animated time ranges and a drag-to-paint week grid. Source: https://vuelix.dev/r/availability-picker.json - [Card Fan](https://vuelix.dev/blocks/card-fan): A hand of cards dealt from a deck into a springy fan; hover to lift, click to play, shuffle to re-deal. Source: https://vuelix.dev/r/card-fan.json - [Command Palette](https://vuelix.dev/blocks/command-palette): A ⌘K palette with fuzzy search, a gliding selection, nested pages that slide in and shortcuts. Source: https://vuelix.dev/r/command-palette.json - [Dynamic Island](https://vuelix.dev/blocks/dynamic-island): A pill that springs its width, height and radius between live states while the content cross-fades. Source: https://vuelix.dev/r/dynamic-island.json - [Expandable Tabs](https://vuelix.dev/blocks/expandable-tabs): An icon-only tab bar where the active tab springs open to reveal its label with a blur-in. Source: https://vuelix.dev/r/expandable-tabs.json - [Feedback Widget](https://vuelix.dev/blocks/feedback-widget): A floating Feedback pill that morphs into an emoji-rating form, then into a check, then back. Source: https://vuelix.dev/r/feedback-widget.json - [File Dropzone](https://vuelix.dev/blocks/file-dropzone): Drag-and-drop uploads that swell on hover, with thumbnails, live progress bars, retry and remove. Source: https://vuelix.dev/r/file-dropzone.json - [Fluid Tabs](https://vuelix.dev/blocks/fluid-tabs): Tabs whose indicator stretches like liquid between triggers while panels slide and resize. Source: https://vuelix.dev/r/fluid-tabs.json - [Folder Stack](https://vuelix.dev/blocks/folder-stack): A folder whose flap tips open as its cards fan out, plus a card pile that deals itself into a grid. Source: https://vuelix.dev/r/folder-stack.json - [Masonry Grid](https://vuelix.dev/blocks/masonry-grid): Shortest-column masonry that springs into place on resize, reveals items on scroll and loads more at the end. Source: https://vuelix.dev/r/masonry-grid.json - [Match Fixtures](https://vuelix.dev/blocks/match-fixtures): A fixtures and results list with live minutes, rolling scores, goal flashes and an expandable events timeline. Source: https://vuelix.dev/r/match-fixtures.json - [Morphing Search](https://vuelix.dev/blocks/morphing-search): A search icon that springs open into a field, with recent searches and suggestions that stagger in. Source: https://vuelix.dev/r/morphing-search.json - [Not Found](https://vuelix.dev/blocks/not-found): A 404 section whose giant digits float, dodge the pointer on springs and can be flung around, with search and links home. Source: https://vuelix.dev/r/not-found.json - [Notification Center](https://vuelix.dev/blocks/notification-center): A bell with a live badge and a panel of per-app stacks that fan open, swipe away and clear in a cascade. Source: https://vuelix.dev/r/notification-center.json - [Odds Card](https://vuelix.dev/blocks/odds-card): A prediction-market card: rolling odds, a live sparkline and Yes/No buttons that morph into an order panel. Source: https://vuelix.dev/r/odds-card.json - [Overflow Toolbar](https://vuelix.dev/blocks/overflow-toolbar): A toolbar that measures its width and springs the actions that don't fit into a “more” menu. Source: https://vuelix.dev/r/overflow-toolbar.json - [Radial Menu](https://vuelix.dev/blocks/radial-menu): A floating button that blooms into a ring of actions with staggered springs, hover labels and arrow-key navigation. Source: https://vuelix.dev/r/radial-menu.json - [Swipe Actions](https://vuelix.dev/blocks/swipe-actions): List rows that swipe to reveal actions, rubber-band, full-swipe to commit and collapse away. Source: https://vuelix.dev/r/swipe-actions.json - [Token Swap](https://vuelix.dev/blocks/token-swap): Swap card whose rows trade places on a spinning button, with token search, slippage and a review morph. Source: https://vuelix.dev/r/token-swap.json - [Wallet Card](https://vuelix.dev/blocks/wallet-card): A stack of payment cards that springs a card to the front, flips it for details and rolls in its balance. Source: https://vuelix.dev/r/wallet-card.json ## AI - [Agent Activity](https://vuelix.dev/ai/agent-activity): Live feed of an agent's steps: new steps slide in, the current one shimmers, sub-steps fold away. Source: https://vuelix.dev/r/agent-activity.json - [Approval Card](https://vuelix.dev/ai/approval-card): Asks the user to approve an agent action, then collapses into a compact resolved row with a stamp that slams in. Source: https://vuelix.dev/r/approval-card.json - [Chat App](https://vuelix.dev/ai/chat-app): A complete AI chat: header, welcome screen with suggestions, streaming messages and a prompt composer. Source: https://vuelix.dev/r/chat-app.json - [Chat Message](https://vuelix.dev/ai/chat-message): A chat message with avatar, streaming caret and copy, retry and feedback actions that fade in on hover. Source: https://vuelix.dev/r/chat-message.json - [Chat Scroller](https://vuelix.dev/ai/chat-scroller): A conversation viewport that sticks to the latest message, springs in a jump pill and keeps its place on prepend. Source: https://vuelix.dev/r/chat-scroller.json - [Citations](https://vuelix.dev/ai/citations): Numbered citation chips with hover cards, linked to a sources list that lights up the cited source. Source: https://vuelix.dev/r/citations.json - [Code Block](https://vuelix.dev/ai/code-block): Code with a file header, line numbers, highlighted lines, a copy-to-check button and a springy collapse for long snippets. Source: https://vuelix.dev/r/code-block.json - [Conversation Sidebar](https://vuelix.dev/ai/conversation-sidebar): Chat history grouped by date, with search, a gliding active marker, inline rename and an icon rail. Source: https://vuelix.dev/r/conversation-sidebar.json - [File Diff](https://vuelix.dev/ai/file-diff): A unified diff viewer with a change bar, folding unchanged lines and per-hunk accept or reject that springs shut. Source: https://vuelix.dev/r/file-diff.json - [Image Generation](https://vuelix.dev/ai/image-generation): Image placeholder where grainy colour fields sharpen behind a scan line, then the result fades in. Source: https://vuelix.dev/r/image-generation.json - [Model Picker](https://vuelix.dev/ai/model-picker): Compact AI model dropdown with capability badges, typeahead and a check mark that glides to your pick. Source: https://vuelix.dev/r/model-picker.json - [Prompt Input](https://vuelix.dev/ai/prompt-input): An AI composer with an auto-growing textarea, pop-in attachment chips and a send button that morphs into stop. Source: https://vuelix.dev/r/prompt-input.json - [Streaming Text](https://vuelix.dev/ai/streaming-text): Streamed AI answers where each new chunk blurs in, with a blinking cursor and light Markdown. Source: https://vuelix.dev/r/streaming-text.json - [Suggestion Chips](https://vuelix.dev/ai/suggestion-chips): Prompt suggestions that stagger in, lift on hover, fly into your input on click and reshuffle. Source: https://vuelix.dev/r/suggestion-chips.json - [Task List](https://vuelix.dev/ai/task-list): An agent's plan with a live progress bar, spinning active step, drawn checkmarks and a strike that sweeps across. Source: https://vuelix.dev/r/task-list.json - [Thinking Indicator](https://vuelix.dev/ai/thinking-indicator): AI loading states: wave dots, shimmering text, a pulsing orb, a scan bar and a collapsible reasoning panel. Source: https://vuelix.dev/r/thinking-indicator.json - [Tool Call](https://vuelix.dev/ai/tool-call): A collapsible card for a tool invocation with a live status indicator, timer and pretty-printed arguments and result. Source: https://vuelix.dev/r/tool-call.json - [Voice Orb](https://vuelix.dev/ai/voice-orb): A living orb for voice assistants that deforms with the audio level as it listens, thinks and speaks. Source: https://vuelix.dev/r/voice-orb.json ## Charts - [Bar Chart](https://vuelix.dev/charts/bar-chart): Grouped, stacked or horizontal bars that spring up in a stagger and glide between layouts. Source: https://vuelix.dev/r/bar-chart.json - [Bump Chart](https://vuelix.dev/charts/bump-chart): Rankings over time as curved lanes that draw in; hover one to bring it forward and dim the rest. Source: https://vuelix.dev/r/bump-chart.json - [Candlestick Chart](https://vuelix.dev/charts/candlestick-chart): Live OHLC candles with volume, a last-price tag and crosshair readout; new candles slide in. Source: https://vuelix.dev/r/candlestick-chart.json - [Depth Heatmap](https://vuelix.dev/charts/depth-heatmap): Price × time heatmap of resting liquidity with a price trace; new snapshots slide in live. Source: https://vuelix.dev/r/depth-heatmap.json - [Donut Chart](https://vuelix.dev/charts/donut-chart): Rounded ring segments that sweep in; hovering one swells it and counts its value up in the centre. Source: https://vuelix.dev/r/donut-chart.json - [Forecast Fan](https://vuelix.dev/charts/forecast-fan): Price history that opens into a fan of low / median / high targets, with a scrubber that reads into the future. Source: https://vuelix.dev/r/forecast-fan.json - [Funnel Chart](https://vuelix.dev/charts/funnel-chart): Conversion funnel whose stages spring open in sequence, joined by curved hand-offs with drop-off rates. Source: https://vuelix.dev/r/funnel-chart.json - [Heat Calendar](https://vuelix.dev/charts/heat-calendar): A year of daily activity as a weeks × weekdays grid that ripples in; drag across days to select a range. Source: https://vuelix.dev/r/heat-calendar.json - [Line Chart](https://vuelix.dev/charts/line-chart): Multi-series line or area chart that draws in, morphs on new data and tracks a snapping crosshair. Source: https://vuelix.dev/r/line-chart.json - [Order Book](https://vuelix.dev/charts/order-book): Live bid/ask ladder with springy depth bars, a spread row, size-change flashes and a buy/sell balance bar. Source: https://vuelix.dev/r/order-book.json - [Returns Calendar](https://vuelix.dev/charts/returns-calendar): Years × months grid of returns tinted by sign and size, with compounded yearly totals; cells pop in diagonally. Source: https://vuelix.dev/r/returns-calendar.json - [Sankey Chart](https://vuelix.dev/charts/sankey-chart): Weighted flows between columns of nodes; ribbons draw in and hovering traces a node's whole path. Source: https://vuelix.dev/r/sankey-chart.json - [Sparkline](https://vuelix.dev/charts/sparkline): A tiny trend line that draws itself in, with a smooth monotone curve. Source: https://vuelix.dev/r/sparkline.json - [Stacked Area](https://vuelix.dev/charts/stacked-area): Composition over time, stacked or 100%; bands morph between modes and an interactive legend isolates series. Source: https://vuelix.dev/r/stacked-area.json - [Status History](https://vuelix.dev/charts/status-history): Uptime bars per day that rise in a wave, coloured by status, with an overall uptime readout. Source: https://vuelix.dev/r/status-history.json - [Treemap](https://vuelix.dev/charts/treemap): Squarified treemap whose tiles glide to their new size and position whenever the data changes. Source: https://vuelix.dev/r/treemap.json - [Volume Profile](https://vuelix.dev/charts/volume-profile): Volume-by-price histogram with a highlighted point of control and value area; bars ripple out from the POC. Source: https://vuelix.dev/r/volume-profile.json - [Chart Utils](https://vuelix.dev/charts/chart-utils): Shared chart helpers: nice ticks, scales, monotone paths, tweened values and a clamped tooltip. Source: https://vuelix.dev/r/chart-utils.json ## Optional - [Catalogue JSON](https://vuelix.dev/r): Every item with dependencies, files and raw source URLs - [Changelog](https://vuelix.dev/changelog): Release notes