@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.
Install this registry
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 curl -s https://reactframe.com/r/registry.json Components
233 totalA 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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