---
name: "@reactframe"
slug: "reactframe"
description: "Animated React components, blocks and elements built with Tailwind CSS and Motion. 150+ free, open-source items install with the shadcn CLI; premium components are sold separately."
category: "Animated components"
tags: ["3d", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "e-commerce", "editor", "forms", "glassmorphism", "loaders", "marketing", "media", "navigation", "overlays", "pro-available", "retro", "tables"]
framework: "react"
license: "MIT"
author: "AhmetLoca"
website: "https://reactframe.com"
github: "https://github.com/AhmetLoca/reactframe-public"
registry: "https://reactframe.com/r/registry.json"
pro: true
pro_url: "https://reactframe.com/premium"
github_stars: 1
component_count: 233
generated_at: "2026-10-10T06:32:55.998Z"
---

# @reactframe

Animated React components, blocks and elements built with Tailwind CSS and Motion. 150+ free, open-source items install with the shadcn CLI; premium components are sold separately.

## Links

- Website: https://reactframe.com
- GitHub: https://github.com/AhmetLoca/reactframe-public
- Registry JSON: https://reactframe.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/reactframe
- This file: https://sh4dcn.vercel.app/md/reactframe.md
- Pro / pricing: https://reactframe.com/premium

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://reactframe.com/r/registry.json
pnpm dlx shadcn@latest add https://reactframe.com/r/registry.json
bunx shadcn@latest add https://reactframe.com/r/registry.json
# clone the source repo
git clone https://github.com/AhmetLoca/reactframe-public.git
# fetch the raw registry index
curl -s https://reactframe.com/r/registry.json
```

## Components (233)

| name | type | description | install |
| --- | --- | --- | --- |
| countdown-timer | registry:component | A countdown timer that counts down to a duration or an absolute end date, with flip-cell digit transitions, a compact text mode, and an optional loop. | `npx shadcn@latest add https://reactframe.com/r/countdown-timer.json` |
| toggle-pro | registry:component | An accessible switch with a springy squish animation on the thumb, an optional label + helper text, and a focus ring. | `npx shadcn@latest add https://reactframe.com/r/toggle-pro.json` |
| badges-kit | registry:component | A status badge with 8 tone presets, light/dark variants, 3 sizes, 6 icon styles (check, cross, minus, dot, spinner, custom), and an optional dismiss button. | `npx shadcn@latest add https://reactframe.com/r/badges-kit.json` |
| rating-stars | registry:component | An animated star rating input with half-star precision, keyboard support, a dynamic low/mid/high color range, glow effect, and an optional progress bar. | `npx shadcn@latest add https://reactframe.com/r/rating-stars.json` |
| image-deck-3d | registry:component | A single image split into a stacked deck of shape-clipped layers (rectangle, circle, hexagon, star, blob and more) that fans out on hover, with optional 3D cur… | `npx shadcn@latest add https://reactframe.com/r/image-deck-3d.json` |
| glare-card | registry:component | A 3D tilt card that reacts to the cursor with animated conic-gradient reflections, diamond, holographic or aurora reflex styles. | `npx shadcn@latest add https://reactframe.com/r/glare-card.json` |
| infinite-marquee | registry:component | A seamless scrolling text marquee with solid/gradient/outline text styles, a separator, double-row mode, edge fade, and pause-on-hover. | `npx shadcn@latest add https://reactframe.com/r/infinite-marquee.json` |
| discord-chat-widget | registry:component | A Discord-style chat bubble widget with a typing simulation, quick replies, a notification popup, member/online counts, and a launch-invite send flow. | `npx shadcn@latest add https://reactframe.com/r/discord-chat-widget.json` |
| telegram-widget | registry:component | A Telegram-style chat bubble widget with a typing simulation, quick replies, a notification popup, availability status, and a launch-in-Telegram send flow. | `npx shadcn@latest add https://reactframe.com/r/telegram-widget.json` |
| messenger-widget | registry:component | A Facebook Messenger-style chat bubble widget with a typing simulation, quick replies, a notification popup, availability status, and a launch-in-Messenger sen… | `npx shadcn@latest add https://reactframe.com/r/messenger-widget.json` |
| x-twitter-widget | registry:component | An X (Twitter)-style DM chat bubble widget with a typing simulation, quick replies, a follows-you badge, availability status, and a notification popup. | `npx shadcn@latest add https://reactframe.com/r/x-twitter-widget.json` |
| footer-premium | registry:component | A responsive site footer with a logo, description, social links, multi-column link groups, and a copyright line. | `npx shadcn@latest add https://reactframe.com/r/footer-premium.json` |
| footer-section | registry:component | A minimal site footer with up to 4 link columns, a hover-underline link style, paper/glass/custom theming, and a copyright bar. | `npx shadcn@latest add https://reactframe.com/r/footer-section.json` |
| compare-slider | registry:component | A theme-aware before/after image comparison slider with horizontal or vertical drag direction, keyboard support, and before/after labels. | `npx shadcn@latest add https://reactframe.com/r/compare-slider.json` |
| glow-card | registry:component | A card with an animated rotating conic-gradient glow border, customizable colors, text position, and an optional background image. | `npx shadcn@latest add https://reactframe.com/r/glow-card.json` |
| image-showcase | registry:component | A product-style image viewer, a large main frame with prev/next arrows and an image counter, backed by a click-to-jump thumbnail strip and a reset-to-first but… | `npx shadcn@latest add https://reactframe.com/r/image-showcase.json` |
| eternal-glow-card | registry:component | A hover-reveal product card with a blurred gradient overlay, staggered title/price/description reveal, a badge, and 5 color themes. | `npx shadcn@latest add https://reactframe.com/r/eternal-glow-card.json` |
| glass-navigation | registry:component | A pill navbar that expands into a full panel of large nav links, a tagline, and social links, with a CTA button, badges, active-page highlight, and light/dark … | `npx shadcn@latest add https://reactframe.com/r/glass-navigation.json` |
| header-simple | registry:component | A responsive site header, centered nav links on desktop, a tablet CTA-only view, and a mobile hamburger dropdown panel, with active-page highlighting and optio… | `npx shadcn@latest add https://reactframe.com/r/header-simple.json` |
| testimonial-spotlight | registry:component | A full-bleed photo testimonial slider with crossfade, slide or iris transitions, a thumbnail strip, progress lines, star ratings, and autoplay. | `npx shadcn@latest add https://reactframe.com/r/testimonial-spotlight.json` |
| testimonial-pills | registry:component | Avatar-and-pill testimonial marquee rows with dual-direction scrolling, a depth effect, cursor spotlight glow, and scroll-in reveal. | `npx shadcn@latest add https://reactframe.com/r/testimonial-pills.json` |
| profile-flip-card | registry:component | A profile card that flips from a photo front to a bio back on click or hover, with flip Y, flip X, spring, or fade transitions. | `npx shadcn@latest add https://reactframe.com/r/profile-flip-card.json` |
| phone-mockup | registry:component | A realistic iPhone frame with 3D cursor tilt, a screen glare that tracks the tilt, ambient glow, and a story-style video/image player with swipe navigation and… | `npx shadcn@latest add https://reactframe.com/r/phone-mockup.json` |
| browser-mockup | registry:component | A realistic browser chrome frame in macOS, Windows, or mobile Safari style, with tabs, a URL bar, and a content area for an image, video, or arbitrary React ch… | `npx shadcn@latest add https://reactframe.com/r/browser-mockup.json` |
| instagram-post-mockup | registry:component | A realistic Instagram post, avatar ring, swipeable multi-photo carousel, double-tap-to-like heart burst, like/comment/repost/share/save actions, and light/dark… | `npx shadcn@latest add https://reactframe.com/r/instagram-post-mockup.json` |
| x-post-mockup | registry:component | A realistic X (Twitter) post with a verified badge, media image, and interactive like/retweet/bookmark actions with live counts, in light or dark theme. | `npx shadcn@latest add https://reactframe.com/r/x-post-mockup.json` |
| tiktok-post-mockup | registry:component | A full-bleed 9:16 TikTok feed mockup with a Following/For You tab bar, a side action rail (like/comment/save/share), caption overlay, sound pill, and bottom na… | `npx shadcn@latest add https://reactframe.com/r/tiktok-post-mockup.json` |
| linkedin-post-mockup | registry:component | A realistic LinkedIn post with a headline, media image, a reaction summary, and interactive like/repost actions with live counts, in light or dark theme. | `npx shadcn@latest add https://reactframe.com/r/linkedin-post-mockup.json` |
| cylinder-gallery | registry:component | A 3D image gallery arranged around an auto-rotating cylinder, with configurable rows/columns, tilt angle, rotation speed, and edge fade opacity. | `npx shadcn@latest add https://reactframe.com/r/cylinder-gallery.json` |
| gallery-flow | registry:component | A gallery of scattered, gently drifting image cards with random rotation, cursor repel/attract mode, pause-on-hover, and a click-to-open lightbox. | `npx shadcn@latest add https://reactframe.com/r/gallery-flow.json` |
| tilted-carousel | registry:component | A 3D book-flow carousel where cards tilt around the active slide, with paper/glass themes and 3 title alignment styles. | `npx shadcn@latest add https://reactframe.com/r/tilted-carousel.json` |
| diagonal-carousel | registry:component | Square cards fan out diagonally into a stacked deck, each inactive card rotates and offsets away from the active one, with paper/glass themes. | `npx shadcn@latest add https://reactframe.com/r/diagonal-carousel.json` |
| tilt-text | registry:component | Large display text that tilts in 3D toward the cursor, with a layered shadow extrusion for real depth, a specular shine highlight, and idle float/breathe anima… | `npx shadcn@latest add https://reactframe.com/r/tilt-text.json` |
| progress-circle-bars | registry:component | A circular progress indicator with ring, gauge, and dashes arc styles, scroll-triggered count-up animation, color thresholds, a comparison target marker, and a… | `npx shadcn@latest add https://reactframe.com/r/progress-circle-bars.json` |
| linear-progress-bars | registry:component | A card of linear progress rows, plain ratio bars, file-upload rows with icons/subtitles/shimmer, milestone ticks, and an inline variant, with scroll-triggered … | `npx shadcn@latest add https://reactframe.com/r/linear-progress-bars.json` |
| text-scramble-pro | registry:component | Cycling phrases that decrypt from scrambled characters into readable text, left-to-right, right-to-left, or random reveal order, with a scramble-out transition… | `npx shadcn@latest add https://reactframe.com/r/text-scramble-pro.json` |
| noise-background | registry:component | A canvas background with animated film-grain noise, soft color blob gradients, 7 built-in themes (or fully custom colors), drifting blob animation, and a vigne… | `npx shadcn@latest add https://reactframe.com/r/noise-background.json` |
| dot-image-slider | registry:component | A before/after image reveal, a luminance-mapped halftone dot rendering on one side, the real photo on the other, dragged apart by a glowing lightsaber-style di… | `npx shadcn@latest add https://reactframe.com/r/dot-image-slider.json` |
| animated-loader | registry:component | A loading spinner kit with 4 variants, rotating lines, ring, dual counter-rotating ring, and bouncing dots, sharing a common color/size/speed API. | `npx shadcn@latest add https://reactframe.com/r/animated-loader.json` |
| animated-checkbox | registry:component | An accessible checkbox with an animated draw-in checkmark, focus ring, and optional label, helper text, required marker, and info tooltip. | `npx shadcn@latest add https://reactframe.com/r/animated-checkbox.json` |
| radio-button | registry:component | An accessible, animated radio group with a springy dot, a ripple on select, focus ring, optional descriptions and a selectable card variant. | `npx shadcn@latest add https://reactframe.com/r/radio-button.json` |
| select | registry:component | An accessible, animated custom select with a springy chevron, keyboard navigation, type-ahead, option descriptions, disabled options and a focus ring. | `npx shadcn@latest add https://reactframe.com/r/select.json` |
| slider | registry:component | An accessible single or range slider with a draggable thumb, a value tooltip, optional step marks, keyboard control and a focus ring. | `npx shadcn@latest add https://reactframe.com/r/slider.json` |
| search-bar | registry:component | An accessible animated search field with a live suggestions menu, keyboard navigation, a clear button, a loading spinner and a Cmd/Ctrl+K shortcut. | `npx shadcn@latest add https://reactframe.com/r/search-bar.json` |
| tag | registry:component | A compact label tag with soft, solid and outline variants, 6 colors, 3 sizes, an optional pulsing dot, icon, count, selectable toggle state and an animated rem… | `npx shadcn@latest add https://reactframe.com/r/tag.json` |
| tooltip | registry:component | An accessible tooltip with 4 placements, auto-flip near the screen edge, a hover delay, keyboard-focus support, an arrow and an optional shortcut badge. | `npx shadcn@latest add https://reactframe.com/r/tooltip.json` |
| skeleton | registry:component | A loading placeholder with rect, text, circle and card presets, a shimmer or pulse animation, reduced-motion support and a built-in swap to real content when l… | `npx shadcn@latest add https://reactframe.com/r/skeleton.json` |
| tabs | registry:component | An accessible tab set with underline, pill and segmented variants, a sliding animated indicator, icons, counts, arrow-key navigation and animated content panel… | `npx shadcn@latest add https://reactframe.com/r/tabs.json` |
| breadcrumb | registry:component | An accessible breadcrumb trail with 4 separator styles, an optional home icon, animated collapse of long paths behind an expandable ellipsis, and hover tint. | `npx shadcn@latest add https://reactframe.com/r/breadcrumb.json` |
| pagination | registry:component | An accessible pagination control with smart ellipsis ranges, a sliding animated active page, solid, soft and compact variants, previous/next buttons and option… | `npx shadcn@latest add https://reactframe.com/r/pagination.json` |
| stepper | registry:component | An accessible step indicator with horizontal and vertical layouts, numbered and minimal variants, animated progress connectors, draw-in checkmarks, an error st… | `npx shadcn@latest add https://reactframe.com/r/stepper.json` |
| modal | registry:component | An accessible modal dialog with a blurred backdrop, focus trap, Escape and backdrop close, scroll lock, focus restore, 3 sizes and scale, slide-up and fade ani… | `npx shadcn@latest add https://reactframe.com/r/modal.json` |
| popover | registry:component | An accessible popover for interactive content with click or hover triggers, 4 placements and 3 alignments, auto-flip, outside-click and Escape close, an arrow … | `npx shadcn@latest add https://reactframe.com/r/popover.json` |
| drawer | registry:component | An accessible slide-in drawer from any of 4 sides with a backdrop, focus trap, Escape and backdrop close, scroll lock, focus restore and drag-to-dismiss. | `npx shadcn@latest add https://reactframe.com/r/drawer.json` |
| avatar | registry:component | A user avatar with image, initials or icon fallback, 5 sizes, circle, rounded and square shapes, a presence status dot with pulse, an accent ring and an option… | `npx shadcn@latest add https://reactframe.com/r/avatar.json` |
| avatar-group | registry:component | A stacked group of avatars with photo or initials, an overflow +N bubble, hover lift with name tooltips, a spread-on-hover animation, 5 sizes and adjustable ov… | `npx shadcn@latest add https://reactframe.com/r/avatar-group.json` |
| divider | registry:component | A horizontal or vertical divider with solid, dashed, dotted and gradient styles, an optional label with start, center or end position, an accent color and a dr… | `npx shadcn@latest add https://reactframe.com/r/divider.json` |
| accordion | registry:component | An accessible accordion with single or multiple open panels, default, card and filled variants, chevron or plus indicators, smooth height animation and full ke… | `npx shadcn@latest add https://reactframe.com/r/accordion.json` |
| card | registry:component | A flexible content card with media, badge, title, description, action and footer slots, default, elevated, outline and filled variants, vertical or horizontal … | `npx shadcn@latest add https://reactframe.com/r/card.json` |
| kbd | registry:component | A keyboard key cap for showing shortcuts, with raised, flat and outline styles, 3 sizes, automatic Mac or Windows symbols, key combinations and a live press an… | `npx shadcn@latest add https://reactframe.com/r/kbd.json` |
| empty-state | registry:component | A friendly empty, no-results or error placeholder with 5 icon presets, a floating icon tile, title, description and actions, in plain, card and dashed styles w… | `npx shadcn@latest add https://reactframe.com/r/empty-state.json` |
| tag-input | registry:component | A multi-value input that turns text into removable tags on Enter, comma or paste, with suggestions, duplicate and max limits, custom validation and an animated… | `npx shadcn@latest add https://reactframe.com/r/tag-input.json` |
| combobox | registry:component | A searchable select where you type to filter options, with match highlighting, option descriptions, disabled options, a clear button, an empty state and full k… | `npx shadcn@latest add https://reactframe.com/r/combobox.json` |
| multi-select | registry:component | A searchable multi-select that shows the chosen options as removable chips, with checkbox rows, select all, a selection limit, a +N overflow chip, an empty sta… | `npx shadcn@latest add https://reactframe.com/r/multi-select.json` |
| date-picker | registry:component | A date picker with a popover calendar: single date or range selection, month navigation, min/max and disabled dates, Today and Clear shortcuts, localized label… | `npx shadcn@latest add https://reactframe.com/r/date-picker.json` |
| time-picker | registry:component | A time picker with a popover of scrollable hour, minute and AM/PM columns: 12 or 24-hour clock, minute steps, min/max times, a Now shortcut and full keyboard s… | `npx shadcn@latest add https://reactframe.com/r/time-picker.json` |
| input-otp | registry:component | A one-time-code input with individual animated cells, paste and autofill support, numeric or alphanumeric mode, masking, grouped cells, error shake and success… | `npx shadcn@latest add https://reactframe.com/r/input-otp.json` |
| number-input | registry:component | A numeric field with minus/plus steppers, press-and-hold auto repeat, min/max clamping, decimal precision, prefix and suffix, thousand separators and full keyb… | `npx shadcn@latest add https://reactframe.com/r/number-input.json` |
| password-input | registry:component | A password field with an animated show/hide eye toggle, a four-segment strength meter, a live requirements checklist and a Caps Lock warning. | `npx shadcn@latest add https://reactframe.com/r/password-input.json` |
| phone-input | registry:component | A phone number input with a searchable country menu: flags and calling codes, as-you-type formatting per country, paste detection for +codes, an E.164 value an… | `npx shadcn@latest add https://reactframe.com/r/phone-input.json` |
| credit-card-input | registry:component | A grouped card number, expiry and CVC field: brand detection with an animated mark, 4-4-4-4 or Amex 4-6-5 spacing, Luhn and expiry checks, and focus that moves… | `npx shadcn@latest add https://reactframe.com/r/credit-card-input.json` |
| currency-input | registry:component | A money input with a currency picker: live thousands separators for any locale, the right number of decimals per currency, an animated symbol, arrow-key steps … | `npx shadcn@latest add https://reactframe.com/r/currency-input.json` |
| segmented-control | registry:component | A compact radio-style switch between a few options with a sliding animated thumb, solid or soft styles, icons, icon-only mode, vertical orientation and arrow-k… | `npx shadcn@latest add https://reactframe.com/r/segmented-control.json` |
| color-picker | registry:component | A color picker with a draggable saturation/brightness area, hue and opacity sliders, hex input, preset swatches and an optional screen eyedropper, all keyboard… | `npx shadcn@latest add https://reactframe.com/r/color-picker.json` |
| file-upload | registry:component | A drag-and-drop file dropzone with click-to-browse, type/size/count validation, image previews, animated progress bars, retry and remove actions. | `npx shadcn@latest add https://reactframe.com/r/file-upload.json` |
| signature-pad | registry:component | A signature field that draws smooth, pressure-aware ink, with undo, clear, a typed-signature option for people who can't draw, and PNG and SVG export in a pape… | `npx shadcn@latest add https://reactframe.com/r/signature-pad.json` |
| image-cropper | registry:component | An image cropper with a draggable, resizable crop box, aspect presets or a circle mask for avatars, keyboard nudging, drag-and-drop upload and the cropped imag… | `npx shadcn@latest add https://reactframe.com/r/image-cropper.json` |
| callout | registry:component | An inline message block with info, success, warning, danger and neutral variants, three appearances, self-drawing icons, an optional action link and an animate… | `npx shadcn@latest add https://reactframe.com/r/callout.json` |
| meter | registry:component | A meter for a value within a known range: bar, semicircle gauge or segmented variants with threshold zones, animated counting numbers and proper meter semantic… | `npx shadcn@latest add https://reactframe.com/r/meter.json` |
| command-palette | registry:component | A Cmd/Ctrl+K command palette with fuzzy search and match highlighting, grouped results, keyboard navigation, shortcuts and a portal overlay. | `npx shadcn@latest add https://reactframe.com/r/command-palette.json` |
| menubar | registry:component | A desktop-style app menubar with File/Edit/View-style dropdown menus, checkbox and radio items, submenus and full arrow-key navigation between and within menus. | `npx shadcn@latest add https://reactframe.com/r/menubar.json` |
| sidebar | registry:component | A collapsible app sidebar with grouped nav sections, a sliding active-item indicator, badges, an icon-only rail mode with hover tooltips, a user footer and ful… | `npx shadcn@latest add https://reactframe.com/r/sidebar.json` |
| dock | registry:component | A macOS-style app dock with cursor-proximity magnification, running-app indicator dots, hover tooltips, separators and full keyboard navigation. | `npx shadcn@latest add https://reactframe.com/r/dock.json` |
| confirm-dialog | registry:component | A focused alert dialog for confirming an action, with default/warning/danger variants, an async-aware confirm button with a spinner and inline error, and a saf… | `npx shadcn@latest add https://reactframe.com/r/confirm-dialog.json` |
| hover-card | registry:component | A hover-triggered rich preview card with open/close delays, a hover bridge so moving into the card keeps it open, placement with collision flip, an optional ar… | `npx shadcn@latest add https://reactframe.com/r/hover-card.json` |
| context-menu | registry:component | A right-click context menu with checkbox and radio items, nested submenus, viewport edge clamping and full keyboard navigation. | `npx shadcn@latest add https://reactframe.com/r/context-menu.json` |
| timeline | registry:component | A vertical timeline with status markers (done, active, pending, error), a connecting line, an alternating layout option, collapsible per-item detail and a scro… | `npx shadcn@latest add https://reactframe.com/r/timeline.json` |
| tree-view | registry:component | A hierarchical tree with expand/collapse, tri-state checkboxes for multi-select, single-row selection, guide lines and full keyboard navigation. | `npx shadcn@latest add https://reactframe.com/r/tree-view.json` |
| stat-card | registry:component | A dashboard metric card with an animated count-up value, an auto-derived good/bad trend badge, an optional icon and a drawn-in sparkline. | `npx shadcn@latest add https://reactframe.com/r/stat-card.json` |
| code-block | registry:component | A syntax-highlighted code block with line numbers, per-line highlighting, a filename/language header, a copy button and a collapsible fade-out for long snippet… | `npx shadcn@latest add https://reactframe.com/r/code-block.json` |
| description-list | registry:component | A semantic term/value list for specs, order summaries or profile details, with stacked, inline and grid layouts, optional icons and a hover-reveal copy button … | `npx shadcn@latest add https://reactframe.com/r/description-list.json` |
| splitter | registry:component | Resizable panels divided by draggable handles, with min/max size constraints, keyboard resizing, double-click reset, and horizontal or vertical layout. | `npx shadcn@latest add https://reactframe.com/r/splitter.json` |
| back-to-top | registry:component | A floating scroll-to-top button that fades in past a threshold, with an optional progress ring showing how far down the page you are. | `npx shadcn@latest add https://reactframe.com/r/back-to-top.json` |
| copy-button | registry:component | A standalone copy-to-clipboard button with ghost/outline/solid variants, icon-only or labeled modes, a floating tooltip, and animated copied/error states. | `npx shadcn@latest add https://reactframe.com/r/copy-button.json` |
| terminal | registry:component | A macOS-style terminal window that types out a scripted sequence of commands, outputs and comments, with a blinking cursor, auto-scroll and optional looping or… | `npx shadcn@latest add https://reactframe.com/r/terminal.json` |
| inline-edit | registry:component | Click-to-edit text that turns into an auto-sizing input with save/cancel controls, validation, async save support and a shake on error. | `npx shadcn@latest add https://reactframe.com/r/inline-edit.json` |
| aspect-ratio | registry:component | A container that locks its content to a fixed width/height ratio (a preset like video or square, or a custom number), auto-fitting a single image or video chil… | `npx shadcn@latest add https://reactframe.com/r/aspect-ratio.json` |
| scroll-area | registry:component | A scrollable container with a thin, draggable, auto-hiding custom scrollbar (vertical, horizontal or both) and edge fade masks, replacing the native browser sc… | `npx shadcn@latest add https://reactframe.com/r/scroll-area.json` |
| toolbar | registry:component | An accessible toolbar of icon buttons, toggles, radio-style toggle groups and separators with roving-focus arrow-key navigation, a sliding hover highlight and … | `npx shadcn@latest add https://reactframe.com/r/toolbar.json` |
| panel | registry:component | A surface container with an optional header (icon, title, description, actions), body and footer, with outline, filled and elevated variants and an animated co… | `npx shadcn@latest add https://reactframe.com/r/panel.json` |
| your-cart-page | registry:component | A three-step eCommerce flow in one block: a cart with quantity steppers and promo code, a checkout form with an order summary, and an animated order-confirmed … | `npx shadcn@latest add https://reactframe.com/r/your-cart-page.json` |
| stat-feature | registry:component | A metrics section with a concentric ring chart, a trend caption and count-up stats that enter with a blur, slide, fade or scale animation. | `npx shadcn@latest add https://reactframe.com/r/stat-feature.json` |
| product-list | registry:component | An eCommerce product listing block with a filter sidebar (live search, Free/Premium tiers, categories) and a responsive photo grid with New and Sale badges. | `npx shadcn@latest add https://reactframe.com/r/product-list.json` |
| product-detail | registry:component | An eCommerce product page block with a switchable image gallery, color and size pickers, quantity stepper, animated add-to-cart button and Description / Specs … | `npx shadcn@latest add https://reactframe.com/r/product-detail.json` |
| button | registry:component | An accessible button with primary, secondary, outline, and ghost variants, a spinning loading state, optional icon, and a focus ring, every color, size, and ti… | `npx shadcn@latest add https://reactframe.com/r/button.json` |
| input | registry:component | An accessible text input with outline, filled, and underline variants, label/helper/error text, a password show/hide toggle, and a focus ring, every color, siz… | `npx shadcn@latest add https://reactframe.com/r/input.json` |
| textarea | registry:component | An accessible textarea with outline, filled, and underline variants, label/helper/error text, optional auto-resize and a character counter, and a focus ring, e… | `npx shadcn@latest add https://reactframe.com/r/textarea.json` |
| form-field | registry:component | A form field wrapper with label, description, required or optional marker, info tooltip, character counter and animated helper, error and success messages, wit… | `npx shadcn@latest add https://reactframe.com/r/form-field.json` |
| rich-text-editor | registry:component | A rich text editor with a formatting toolbar, headings, lists, quotes, inline code and links, Markdown-style shortcuts, clean pasting from Docs and Word, and a… | `npx shadcn@latest add https://reactframe.com/r/rich-text-editor.json` |
| sales-ticket-popup | registry:component | A corner-anchored promo popup shaped like a torn event ticket, with 5 themes, a zigzag badge stub, immediate/delay/scroll triggers, auto-hide, and dismiss-memo… | `npx shadcn@latest add https://reactframe.com/r/sales-ticket-popup.json` |
| expand-card-grid | registry:component | A 2x2 grid of image cards that expand to fill the frame on click, revealing title/description/CTA, with keyboard arrow navigation between cards and swipe-to-cl… | `npx shadcn@latest add https://reactframe.com/r/expand-card-grid.json` |
| kanban-board | registry:component | A drag-and-drop task board with a hand-rolled pointer-based drag engine, velocity tilt, edge autoscroll, ghost drop-position indicator, priority badges, avatar… | `npx shadcn@latest add https://reactframe.com/r/kanban-board.json` |
| data-table | registry:component | An admin data table with sortable/filterable columns, global search, status tabs, row selection, badge/avatar/actions cell types, pagination, and light/dark/cu… | `npx shadcn@latest add https://reactframe.com/r/data-table.json` |
| line-chart | registry:component | A multi-series line/area chart, smooth Catmull-Rom curves, a highlighted zone band, a reference line, endpoint value badges, and a hover crosshair with per-ser… | `npx shadcn@latest add https://reactframe.com/r/line-chart.json` |
| bar-chart | registry:component | A stacked bar chart, up to 5 series per bar, a reference line, a peak-value annotation, and a hover tooltip breaking down each bar's segments with a running to… | `npx shadcn@latest add https://reactframe.com/r/bar-chart.json` |
| tearable-reveal | registry:component | A physically-simulated cloth intro reveal, drag to tear open a torn-paper layer covering an image, with breakable constraints, particle debris, frayed jagged/r… | `npx shadcn@latest add https://reactframe.com/r/tearable-reveal.json` |
| desktop-mockup-carousel | registry:component | A realistic Studio Display-style monitor mockup with an internal video/image carousel, swipe or auto-advance, slide/fade transitions, 3D cursor tilt, ambient g… | `npx shadcn@latest add https://reactframe.com/r/desktop-mockup-carousel.json` |
| range-area-chart | registry:component | A min/max envelope chart with a nested core-range band, an actual-to-forecast line split, annotated risk zones, a reference line, and a live endpoint badge. | `npx shadcn@latest add https://reactframe.com/r/range-area-chart.json` |
| radar-chart | registry:component | A multi-series radar/spider chart with ring gridlines, per-series solid or dashed strokes, optional point markers, and a hover tooltip comparing every series a… | `npx shadcn@latest add https://reactframe.com/r/radar-chart.json` |
| pie-chart | registry:component | A donut-style pie chart with a live center total, click-to-toggle legend, percentage callouts around the ring, and a hover tooltip with ARR, account count, and… | `npx shadcn@latest add https://reactframe.com/r/pie-chart.json` |
| logo-marquee | registry:component | An infinite scrolling row of client/partner logos with edge fade masks, grayscale-to-color hover reveal, pause-on-hover, and a constant speed regardless of log… | `npx shadcn@latest add https://reactframe.com/r/logo-marquee.json` |
| liquid-text | registry:component | Text distorted through an animated SVG noise filter, 5 presets (liquid, melt, blob, ghost, crystal), cursor-proximity intensity, and a click burst ripple. | `npx shadcn@latest add https://reactframe.com/r/liquid-text.json` |
| word-reveal | registry:component | Staggered word or character reveal text, driven by scroll progress, viewport entry, or a manual trigger, 4 animation presets, 3 stagger patterns, and word high… | `npx shadcn@latest add https://reactframe.com/r/word-reveal.json` |
| alert-toast | registry:component | A polished toast/alert notification, 5 tones, stacked or inline layout, icons, primary/secondary actions, dismiss and auto-dismiss, light/dark theme, plus a sh… | `npx shadcn@latest add https://reactframe.com/r/alert-toast.json` |
| product-grid-section | registry:component | A responsive product/portfolio grid section, heading, per-card image with hover zoom and reveal overlay, category/price meta row, optional badge, and a centere… | `npx shadcn@latest add https://reactframe.com/r/product-grid-section.json` |
| ai-asistant | registry:component | A dotted status light with two layouts, Mesh grid and Halo rings, across three animated states (Waiting, Listening, Thinking), in four dot shapes with adjustab… | `npx shadcn@latest add https://reactframe.com/r/ai-asistant.json` |
| ai-voice-01 | registry:component | A voice-assistant pill with a canvas audio-reactive visualizer, idle/listening/speaking states, a glowing edge ring, live word-by-word transcript, optional rea… | `npx shadcn@latest add https://reactframe.com/r/ai-voice-01.json` |
| ai-voice-05 | registry:component | A portrait voice-assistant card with a canvas audio-reactive curve visualizer, a mic button that grows on tap, idle/listening/speaking states, and live word-by… | `npx shadcn@latest add https://reactframe.com/r/ai-voice-05.json` |
| ai-image-loader-03 | registry:component | An AI image-generation loader, canvas-drawn rolling topographic lines grow in and a top-to-bottom sweep reveals the finished picture, with cycling status messa… | `npx shadcn@latest add https://reactframe.com/r/ai-image-loader-03.json` |
| ai-dynamic-island-01 | registry:component | A Dynamic Island-style AI status pill that morphs between idle, listening, thinking, working (with an unfolding step list) and done states, with a canvas-drawn… | `npx shadcn@latest add https://reactframe.com/r/ai-dynamic-island-01.json` |
| ai-answer-03 | registry:component | An agent-style AI answer card, a researching/reading/writing step tracker with a progress rail, markdown-style bold and bullet text, clickable inline citations… | `npx shadcn@latest add https://reactframe.com/r/ai-answer-03.json` |
| ai-edit-review | registry:component | An AI text editor that rewrites a selected passage, streams a word-level diff review with accept/reject actions, and morphs a dock through writing, review, and… | `npx shadcn@latest add https://reactframe.com/r/ai-edit-review.json` |
| video-glow-lightbox | registry:component | A single video card with a pulsing glow-blob frame that morphs into a fullscreen lightbox on click, supports direct URL, YouTube, Vimeo, or uploaded files, a c… | `npx shadcn@latest add https://reactframe.com/r/video-glow-lightbox.json` |
| glide-carousel | registry:component | A canvas-rendered, drag-to-scroll carousel with a curved wave layout and ambient wind/drift/magnetic card sway, click-to-open lightbox modal, autoplay, and ima… | `npx shadcn@latest add https://reactframe.com/r/glide-carousel.json` |
| testimonial-logos | registry:component | A compact trust bar, a star rating with a helped-N-teams label above an infinite, edge-masked logo marquee. | `npx shadcn@latest add https://reactframe.com/r/testimonial-logos.json` |
| dice-discount-popup | registry:component | A gamified discount popup, roll two animated 3D dice for a reward tier (with a doubles bonus), copy the code, and track rolls left across a session. Inline or … | `npx shadcn@latest add https://reactframe.com/r/dice-discount-popup.json` |
| scratch-card-popup | registry:component | A gamified scratch-to-win popup, drag to scratch a gold-foil canvas off a 3x3 icon grid, match three to win a reward tier with a confetti burst, copy the code,… | `npx shadcn@latest add https://reactframe.com/r/scratch-card-popup.json` |
| business-hours | registry:component | A premium opening-hours card, live open/closed status with a pulsing dot, a day-by-day schedule, and a Get Directions link built from an address or custom URL. | `npx shadcn@latest add https://reactframe.com/r/business-hours.json` |
| motion-gallery-grid | registry:component | A perfectly aligned image grid with a centered glassmorphism overlay card, heading, subtitle and CTA button, with a staggered blur/slide/fade/scale entrance tr… | `npx shadcn@latest add https://reactframe.com/r/motion-gallery-grid.json` |
| qr-code-widget | registry:component | A QR-code card, title, description, code image, hint text and an open-link button, inline or as a corner-widget popup with a focus-trapped modal dialog. | `npx shadcn@latest add https://reactframe.com/r/qr-code-widget.json` |
| airbnb-reviews | registry:component | A guest-review carousel with the Airbnb Bélo mark, aggregate rating header and CTA, above a draggable autoplaying grid of review cards. | `npx shadcn@latest add https://reactframe.com/r/airbnb-reviews.json` |
| ebay-reviews | registry:component | A seller-feedback carousel with the eBay wordmark, aggregate rating header and CTA, above a draggable autoplaying grid of review cards. | `npx shadcn@latest add https://reactframe.com/r/ebay-reviews.json` |
| etsy-reviews | registry:component | A shop-review carousel with the Etsy wordmark, aggregate rating header and CTA, above a draggable autoplaying grid of review cards. | `npx shadcn@latest add https://reactframe.com/r/etsy-reviews.json` |
| coin-flip-game | registry:component | A real 3D CSS coin, click or tap to flip with a physical spin animation, a yes/no question field, flip history dots, and a heads/tails ratio readout. | `npx shadcn@latest add https://reactframe.com/r/coin-flip-game.json` |
| tic-tac-toe-game | registry:component | A playable Tic Tac Toe board with a built-in AI opponent, animated piece placement, a drawn winning-line reveal, score tracking, and a confetti burst on a win. | `npx shadcn@latest add https://reactframe.com/r/tic-tac-toe-game.json` |
| 2048-game | registry:component | A fully playable 2048, arrow-key and swipe controls, spring-animated tile merges, score and best-score tracking, and win/game-over overlays. | `npx shadcn@latest add https://reactframe.com/r/2048-game.json` |
| snake-game | registry:component | A canvas-rendered Snake game with three difficulty speeds, keyboard and swipe controls, a directional-eyes snake head, high-score tracking, and ready/game-over… | `npx shadcn@latest add https://reactframe.com/r/snake-game.json` |
| minesweeper-game | registry:component | A classic Minesweeper with three board sizes, flood-fill reveal, right-click flagging, a live mine counter and timer, and a confetti burst on a win. | `npx shadcn@latest add https://reactframe.com/r/minesweeper-game.json` |
| memory-match-game | registry:component | A flip-card memory matching game with animal emoji, three difficulty levels, a 3D flip animation, move/score tracking, and a win overlay. | `npx shadcn@latest add https://reactframe.com/r/memory-match-game.json` |
| pong-game | registry:component | A canvas Pong against a bot opponent, three difficulty levels, multi-round progression with a color shift and speed increase each round, keyboard and touch-dra… | `npx shadcn@latest add https://reactframe.com/r/pong-game.json` |
| dino-runner-game | registry:component | A canvas endless-runner in the style of the offline dino game, pixel-drawn running dino, procedurally spawned cactus obstacles, three difficulty speeds, tap/sp… | `npx shadcn@latest add https://reactframe.com/r/dino-runner-game.json` |
| space-invaders-game | registry:component | A canvas Space Invaders, a descending grid of pixel-drawn invaders that shoot back, three difficulty levels, keyboard controls on desktop and on-screen move/fi… | `npx shadcn@latest add https://reactframe.com/r/space-invaders-game.json` |
| glow-jump-widget | registry:component | A floating-action-button popup that opens a glowing 4-level platformer, jump between walls, dodge moving lava, and collect coins to finish each level, keyboard… | `npx shadcn@latest add https://reactframe.com/r/glow-jump-widget.json` |
| spin-to-win-wheel | registry:component | A gamified discount-capture widget where visitors spin a weighted SVG prize wheel for a reward, with five glass themes, a themed reveal modal and code copy, re… | `npx shadcn@latest add https://reactframe.com/r/spin-to-win-wheel.json` |
| memory-cards-widget | registry:component | A floating-action-button popup that opens a color-matching memory game, 3 difficulty levels, a live timer/move counter, best-score tracking, subtle Web Audio s… | `npx shadcn@latest add https://reactframe.com/r/memory-cards-widget.json` |
| bubble-cursor | registry:component | A liquid-glass bubble that follows the pointer across the whole page, rendered with a raymarched WebGL2 metaball trail with fresnel shading and iridescent glin… | `npx shadcn@latest add https://reactframe.com/r/bubble-cursor.json` |
| review-card-portrait | registry:component | A portrait-format testimonial card with a crossfading top image strip, counter, thumbnail selector, and an animated quote with name/role, plus prev/next naviga… | `npx shadcn@latest add https://reactframe.com/r/review-card-portrait.json` |
| cinematic-stacked-gallery | registry:component | A fullscreen hero gallery where inactive slides collapse into a stacked deck of thumbnails; clicking one crossfades it to full size with Ken Burns zoom, cursor… | `npx shadcn@latest add https://reactframe.com/r/cinematic-stacked-gallery.json` |
| dice-roll-discount-popup | registry:component | A gamified discount-capture widget where visitors roll two 3D dice for a reward tier, with a themed reveal modal and code copy, rendered inline or as a corner-… | `npx shadcn@latest add https://reactframe.com/r/dice-roll-discount-popup.json` |
| error-404-page-section | registry:component | A centered "page not found" section: a big glitching error code, heading, description and one or two pill buttons. Follows the host site's theme by default (or… | `npx shadcn@latest add https://reactframe.com/r/error-404-page-section.json` |
| toast-stack | registry:component | A stacked toast notification system: toasts pile up in a layered stack that fans out on hover, with six tones including a loading state that turns into a resul… | `npx shadcn@latest add https://reactframe.com/r/toast-stack.json` |
| notification-center | registry:component | A bell button with an unread badge that opens a notification panel: All and Unread tabs, Today and Earlier groups, unread dots, mark as read on click, mark all… | `npx shadcn@latest add https://reactframe.com/r/notification-center.json` |
| status-dot | registry:component | A presence and status indicator: online, away, busy, offline and live dots with an optional label, a pulsing ring for live states, and a pinned mode that sits … | `npx shadcn@latest add https://reactframe.com/r/status-dot.json` |
| inline-validation-message | registry:component | A field-level validation message with error, warning, success and info states: it slides open under the field, crossfades when the text changes, shakes once wh… | `npx shadcn@latest add https://reactframe.com/r/inline-validation-message.json` |
| dropdown-menu | registry:component | A button-triggered menu with icons, keyboard shortcuts, checkbox and radio items, labelled sections, nested submenus and a highlight that slides from row to ro… | `npx shadcn@latest add https://reactframe.com/r/dropdown-menu.json` |
| mega-menu | registry:component | A pill navigation bar whose menus open one shared panel: it morphs to each menu's size, slides the content in from the side you moved to, and holds columns of … | `npx shadcn@latest add https://reactframe.com/r/mega-menu.json` |
| mobile-tab-bar | registry:component | A bottom navigation bar for phones: a pill slides behind the active tab and its icon bounces, with badge counts, an optional raised centre action, docked or fl… | `npx shadcn@latest add https://reactframe.com/r/mobile-tab-bar.json` |
| table-of-contents | registry:component | An 'On this page' table of contents for articles and docs: it tracks the section in view, slides a marker along its rail (filling it like reading progress), in… | `npx shadcn@latest add https://reactframe.com/r/table-of-contents.json` |
| scrollspy-anchor-links | registry:component | A sticky horizontal bar of section links (Overview, Features, Specs, Reviews) that follows the section in view with a sliding pill or underline, keeps the curr… | `npx shadcn@latest add https://reactframe.com/r/scrollspy-anchor-links.json` |
| language-switcher | registry:component | A language picker: a globe button whose name rolls to the new language, opening a searchable list of native names with codes and a check on the current one, or… | `npx shadcn@latest add https://reactframe.com/r/language-switcher.json` |
| checkbox-group | registry:component | A group of checkboxes with a Select all row that shows a dash when only some are picked, checks that draw themselves, list or card layouts, a maximum that disa… | `npx shadcn@latest add https://reactframe.com/r/checkbox-group.json` |
| bottom-sheet | registry:component | A mobile bottom sheet that slides up over a dimmed backdrop, rests at snap points you drag between from its handle, closes on a downward flick, and keeps its o… | `npx shadcn@latest add https://reactframe.com/r/bottom-sheet.json` |
| lightbox | registry:component | An image lightbox for any grid of photos: the thumbnail morphs into the full view, then arrows, keys and swipes step through, double-click zooms and pans, a sw… | `npx shadcn@latest add https://reactframe.com/r/lightbox.json` |
| cookie-consent-banner | registry:component | A cookie consent banner as a corner card or a bottom bar: accept all, reject all with equal weight, or open per-category switches (necessary locked on), and th… | `npx shadcn@latest add https://reactframe.com/r/cookie-consent-banner.json` |
| product-tour | registry:component | A guided product tour: a spotlight glides from element to element over a dimmed page while a card beside it explains each one, with progress dots, Back, Next a… | `npx shadcn@latest add https://reactframe.com/r/product-tour.json` |
| calendar | registry:component | An inline month calendar for picking one day, a range or several days, with event dots under their days, an agenda for the selected day, months that slide in f… | `npx shadcn@latest add https://reactframe.com/r/calendar.json` |
| basic-carousel | registry:component | A plain, dependable carousel: drag or swipe between slides, arrows and dots, one to four slides in view, looping, and optional autoplay whose progress fills th… | `npx shadcn@latest add https://reactframe.com/r/basic-carousel.json` |
| sparkline-stat | registry:component | A KPI card with a sparkline: the number counts to its new value, a change badge says how far it moved, range tabs swap the series with a redraw, and scrubbing … | `npx shadcn@latest add https://reactframe.com/r/sparkline-stat.json` |
| checklist | registry:component | An onboarding checklist: a progress bar and count up top, round checks that draw in and strike the step through, the next step opening by itself with its own a… | `npx shadcn@latest add https://reactframe.com/r/checklist.json` |
| icon-list | registry:component | A list with an icon on every line for features, benefits and what's included: checks that draw themselves in as the rows fade up, dimmed and struck-through lin… | `npx shadcn@latest add https://reactframe.com/r/icon-list.json` |
| icon-box | registry:component | A feature box with an icon, title and text for features and services grids: in the card style a light follows the pointer along the border, the icon tile lifts… | `npx shadcn@latest add https://reactframe.com/r/icon-box.json` |
| data-view | registry:component | A collection view that switches between a card grid and a list, with every item gliding to its new place; a sort menu reorders them with the same motion, and a… | `npx shadcn@latest add https://reactframe.com/r/data-view.json` |
| sortable-list | registry:component | A list people can put in their own order: drag a row by its handle and the others slide out of the way, or use the keyboard (Space to lift, arrows to move, Spa… | `npx shadcn@latest add https://reactframe.com/r/sortable-list.json` |
| organization-chart | registry:component | An org chart of people cards joined by rounded connector lines: teams open and close from a count chip under each manager, and picking someone lights up their … | `npx shadcn@latest add https://reactframe.com/r/organization-chart.json` |
| transfer-list | registry:component | Two lists side by side for moving items from one set to another, such as available and granted permissions: tick items and send them across with the arrows (or… | `npx shadcn@latest add https://reactframe.com/r/transfer-list.json` |
| tree-table | registry:component | A table whose rows nest, like files in folders: open and close branches with a chevron, parents add up their children (folder sizes), sort any column with fold… | `npx shadcn@latest add https://reactframe.com/r/tree-table.json` |
| chat-bubble | registry:component | Chat message bubbles for both sides of a conversation: runs from the same person group together with tight inner corners and one avatar, outgoing messages show… | `npx shadcn@latest add https://reactframe.com/r/chat-bubble.json` |
| list-group | registry:component | A framed group of rows for settings menus and navigation lists: icons, descriptions, count badges, a danger row for destructive actions, and in selectable mode… | `npx shadcn@latest add https://reactframe.com/r/list-group.json` |
| basic-table | registry:component | A clean, semantic table for showing data as it is: plain, striped or bordered, comfortable or compact, a caption and a totals row, custom cells such as status … | `npx shadcn@latest add https://reactframe.com/r/basic-table.json` |
| blockquote | registry:component | A quote with its author: a rule on the left, a large quotation mark, a framed card or a big centred pull quote, revealed as it scrolls into view with a highlig… | `npx shadcn@latest add https://reactframe.com/r/blockquote.json` |
| masonry-grid | registry:component | A masonry layout for tiles of different heights: each tile drops into the shortest column while keeping left-to-right order, the column count follows the conta… | `npx shadcn@latest add https://reactframe.com/r/masonry-grid.json` |
| bento-grid | registry:component | A bento layout of feature cells that span columns and rows, fall back to two and then one column as the container narrows, fade in one after another, and light… | `npx shadcn@latest add https://reactframe.com/r/bento-grid.json` |
| sticky-header | registry:component | A site header that stays out of the way: it slides up while you scroll down and comes back the moment you scroll up, turns compact and frosted after the first … | `npx shadcn@latest add https://reactframe.com/r/sticky-header.json` |
| section-container | registry:component | A page-section wrapper that keeps widths, padding and headings consistent: an optional eyebrow, title and description, grid, dot or glow backgrounds that fade … | `npx shadcn@latest add https://reactframe.com/r/section-container.json` |
| shape-divider | registry:component | SVG dividers that shape the edge between two sections: waves that drift in a seamless loop, a curve, a tilt, a peak, a zigzag or steps, layered in up to three … | `npx shadcn@latest add https://reactframe.com/r/shape-divider.json` |
| fieldset | registry:component | A grouped form section on the native fieldset: the legend sits in a notch in the border, the group folds away to a one-line summary, a tick appears once it's c… | `npx shadcn@latest add https://reactframe.com/r/fieldset.json` |
| theme-toggle | registry:component | A light / dark switch that morphs a sun into a moon, or a Light · System · Dark control with a sliding pill; it remembers the choice, follows the OS in System … | `npx shadcn@latest add https://reactframe.com/r/theme-toggle.json` |
| share-buttons | registry:component | Share buttons for X, LinkedIn, Facebook, Reddit, WhatsApp and email with a copy-link button that turns into a tick: round icons with hover labels, labelled pil… | `npx shadcn@latest add https://reactframe.com/r/share-buttons.json` |
| social-links | registry:component | Links to your profiles in three styles: round icons that fill from the bottom and tilt on hover, a list with handles, follower counts and an out arrow, or a do… | `npx shadcn@latest add https://reactframe.com/r/social-links.json` |
| scroll-progress-bar | registry:component | Reading progress in three forms: a thin spring-smoothed bar, a corner ring with the percentage that becomes a back-to-top button at the end, or a track split i… | `npx shadcn@latest add https://reactframe.com/r/scroll-progress-bar.json` |
| payment-button | registry:component | A pay button that shows every step of a payment: the amount, a spinner while it processes, a drawn tick when it's paid, a shake and a clear message when a card… | `npx shadcn@latest add https://reactframe.com/r/payment-button.json` |
| speed-dial | registry:component | A floating action button that opens into a short menu of actions: the plus turns into a close cross while actions spring out one after another in a line or a q… | `npx shadcn@latest add https://reactframe.com/r/speed-dial.json` |
| animate-on-scroll | registry:component | A wrapper that brings content in as it scrolls into view: fade from any side, zoom, blur, flip or a clip-path wipe, one block at once or each child in turn, on… | `npx shadcn@latest add https://reactframe.com/r/animate-on-scroll.json` |
| focus-trap | registry:component | Keeps keyboard focus inside a dialog, drawer or menu while it's open: Tab and Shift+Tab loop through its controls, focus starts where you choose and returns to… | `npx shadcn@latest add https://reactframe.com/r/focus-trap.json` |
| icon-swap-toggle | registry:component | A toggle button that swaps between two icons with a rotate, 3D flip, pop or slide: ready-made pairs for play/pause, mute, like, save, show/hide, menu/close, li… | `npx shadcn@latest add https://reactframe.com/r/icon-swap-toggle.json` |
| ripple-click-effect | registry:component | A wrapper that makes any surface ripple where it's pressed: the wave grows while the pointer is held and fades when it lets go, several can overlap, icon butto… | `npx shadcn@latest add https://reactframe.com/r/ripple-click-effect.json` |
| toggle-price-counter | registry:component | A monthly / yearly billing switch whose price rolls to the new amount digit by digit like an odometer, with a saving badge that pops when yearly is picked and … | `npx shadcn@latest add https://reactframe.com/r/toggle-price-counter.json` |
| animated-underline-link | registry:component | Text links with underlines that move: a line that slides in from the left and out to the right, opens from the centre, draws as a wave, fills behind the text, … | `npx shadcn@latest add https://reactframe.com/r/animated-underline-link.json` |
| image-shape-mask | registry:component | Masks an image into a shape (circle, squircle, arch, hexagon, flower, blob or diamond) that grows out from the centre as it scrolls into view and morphs smooth… | `npx shadcn@latest add https://reactframe.com/r/image-shape-mask.json` |
| typography-prose | registry:component | Readable styles for rich text from Markdown or a CMS, without a plugin: balanced headings with hover # links, comfortable line length and rhythm, lists, quotes… | `npx shadcn@latest add https://reactframe.com/r/typography-prose.json` |
| variant-swatches | registry:component | Product option pickers for colour and size: round colour swatches with a ring that glides to the pick, size chips with a sliding fill, the chosen value named i… | `npx shadcn@latest add https://reactframe.com/r/variant-swatches.json` |
| content-switch | registry:component | A switch that swaps the content below it: a pill or underline thumb slides to the chosen option, the new panel slides in from that side (or fades or blurs in),… | `npx shadcn@latest add https://reactframe.com/r/content-switch.json` |
| floating-label-input | registry:component | A text field whose label sits inside it and floats up on focus or once filled, in outlined (label in a notch in the border), filled or underline styles, with a… | `npx shadcn@latest add https://reactframe.com/r/floating-label-input.json` |
| input-group | registry:component | Joins an input with text addons, icons, a select or a button into one field with one border and one focus ring: https:// and .com around a subdomain with a liv… | `npx shadcn@latest add https://reactframe.com/r/input-group.json` |
| masked-input | registry:component | A formatted text field for phone numbers, dates, times, card numbers, ZIP codes or any pattern you define: separators fill themselves in, the rest of the templ… | `npx shadcn@latest add https://reactframe.com/r/masked-input.json` |
| knob | registry:component | A rotary dial for picking a value in a range, like a mixer control: drag up or down, scroll or use the keyboard, with a 270° progress ring and a sliding thumb,… | `npx shadcn@latest add https://reactframe.com/r/knob.json` |
| listbox | registry:component | An always-open list for picking one or several options: a search box that filters as you type, sticky group headings, avatars and descriptions, a highlight tha… | `npx shadcn@latest add https://reactframe.com/r/listbox.json` |
| toggle-button | registry:component | A button that stays pressed: the fill grows out from the middle, icons spin into their 'on' version, labels roll from Follow to Following and counts tick up by… | `npx shadcn@latest add https://reactframe.com/r/toggle-button.json` |
| button-group | registry:component | Buttons joined into one control: plain action groups like Previous / Today / Next, a single-choice group whose fill slides between options, multi-toggle groups… | `npx shadcn@latest add https://reactframe.com/r/button-group.json` |
| dual-range-slider | registry:component | A two-handle range filter with a histogram behind it: bars inside the range light up, the result count rolls as you drag, the filled part drags both ends toget… | `npx shadcn@latest add https://reactframe.com/r/dual-range-slider.json` |
| repeatable-field-group | registry:component | A set of fields people can repeat: add a row, remove one, drag rows into order. Rows grow in and slide out, focus lands in the new row, Enter in the last row a… | `npx shadcn@latest add https://reactframe.com/r/repeatable-field-group.json` |
| filter-chips | registry:component | A row of pill filters with counts: a check draws in and the chip grows to fit it, neighbours slide over instead of jumping, and a Clear chip appears once anyth… | `npx shadcn@latest add https://reactframe.com/r/filter-chips.json` |
| icon-action-button | registry:component | A compact icon-only button for toolbars and table rows: solid, soft, outline or ghost, square or round, four sizes, a tooltip that names the action, a count ba… | `npx shadcn@latest add https://reactframe.com/r/icon-action-button.json` |
| glossy-gradient-button | registry:component | A premium call-to-action button with a glossy face: a lit gradient, a glass highlight on the top half, a band of light that sweeps across on hover, an arrow th… | `npx shadcn@latest add https://reactframe.com/r/glossy-gradient-button.json` |
| inline-link-button | registry:component | A text button that looks like a link, for secondary actions: Forgot password?, View all, Undo, Remove, Read the docs. Neutral, muted, accent or danger, an unde… | `npx shadcn@latest add https://reactframe.com/r/inline-link-button.json` |
| emoji-rating-scale | registry:component | A five-face satisfaction rating for quick feedback: hand-drawn faces from a frown to a wide smile that wobble on hover, fill with their own colour and pop when… | `npx shadcn@latest add https://reactframe.com/r/emoji-rating-scale.json` |
| side-tab-menu | registry:component | A vertical tab menu for settings pages: tabs with icons, second-line descriptions and count badges, grouped under headings, an active highlight with a rail tha… | `npx shadcn@latest add https://reactframe.com/r/side-tab-menu.json` |
| dot-pager-indicator | registry:component | Dots that show where you are in a carousel or onboarding flow: the active dot stretches into a pill, a progress style fills the pill and moves on by itself lik… | `npx shadcn@latest add https://reactframe.com/r/dot-pager-indicator.json` |
| vertical-progress-steps | registry:component | A live status tracker for multi-step processes like deploys, imports and order tracking: each step is done, running, waiting or failed, the connector fills as … | `npx shadcn@latest add https://reactframe.com/r/vertical-progress-steps.json` |
| auth-card | registry:component | A sign-in, sign-up and forgot-password card in one: social sign-in buttons, email and password fields with inline validation, a show-password toggle, a passwor… | `npx shadcn@latest add https://reactframe.com/r/auth-card.json` |
| pricing-table | registry:component | Pricing plans side by side with a monthly / yearly switch, prices that roll when the period changes, a highlighted plan with a badge, included and excluded fea… | `npx shadcn@latest add https://reactframe.com/r/pricing-table.json` |
| faq-section | registry:component | A frequently asked questions section: heading and contact card on the left, an animated accordion on the right, optional category tabs and search, and FAQPage … | `npx shadcn@latest add https://reactframe.com/r/faq-section.json` |
| contact-section | registry:component | A contact section with a heading and your email, phone and address on the left, and a validated message form on the right: topic chips, a loading state driven … | `npx shadcn@latest add https://reactframe.com/r/contact-section.json` |

## For AI agents

```text
You are adding components from @reactframe to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/reactframe.md) for the component list.
2. Fetch the machine-readable index: https://reactframe.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: reactframe).
```