ReactFrame components

ReactFrame — free, open-source shadcn-compatible components

Components: 161
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 1
Source: https://github.com/AhmetLoca/reactframe-public
Install: npx shadcn@latest add https://reactframe.com/r/{name}.json

All ReactFrame components

2048 Game: A fully playable 2048, arrow-key and swipe controls, spring-animated tile merges, score and best-score tracking, and win/game-over overlays.
Accordion: An accessible accordion with single or multiple open panels, default, card and filled variants, chevron or plus indicators, smooth height…
AI Answer 03: An agent-style AI answer card, a researching/reading/writing step tracker with a progress rail, markdown-style bold and bullet text…
AI Asistant: A dotted status light with two layouts, Mesh grid and Halo rings, across three animated states (Waiting, Listening, Thinking), in four dot…
AI Dynamic Island 01: A Dynamic Island-style AI status pill that morphs between idle, listening, thinking, working (with an unfolding step list) and done…
AI Edit Review: An AI text editor that rewrites a selected passage, streams a word-level diff review with accept/reject actions, and morphs a dock through…
AI Image Loader 03: An AI image-generation loader, canvas-drawn rolling topographic lines grow in and a top-to-bottom sweep reveals the finished picture, with…
AI Voice 01: A voice-assistant pill with a canvas audio-reactive visualizer, idle/listening/speaking states, a glowing edge ring, live word-by-word…
AI Voice 05: A portrait voice-assistant card with a canvas audio-reactive curve visualizer, a mic button that grows on tap, idle/listening/speaking…
Airbnb Reviews: A guest-review carousel with the Airbnb Bélo mark, aggregate rating header and CTA, above a draggable autoplaying grid of review cards.
Alert Toast: A polished toast/alert notification, 5 tones, stacked or inline layout, icons, primary/secondary actions, dismiss and auto-dismiss…
Animated Checkbox: An accessible checkbox with an animated draw-in checkmark, focus ring, and optional label, helper text, required marker, and info tooltip.
Animated Loader: A loading spinner kit with 4 variants, rotating lines, ring, dual counter-rotating ring, and bouncing dots, sharing a common…
Aspect Ratio: 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…
Avatar: A user avatar with image, initials or icon fallback, 5 sizes, circle, rounded and square shapes, a presence status dot with pulse, an…
Avatar Group: A stacked group of avatars with photo or initials, an overflow +N bubble, hover lift with name tooltips, a spread-on-hover animation, 5…
Back to Top: 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.
Badges Kit: A status badge with 8 tone presets, light/dark variants, 3 sizes, 6 icon styles (check, cross, minus, dot, spinner, custom), and an…
Bar Chart: 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…
Breadcrumb: An accessible breadcrumb trail with 4 separator styles, an optional home icon, animated collapse of long paths behind an expandable…
Browser Mockup: 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…
Bubble Cursor: A liquid-glass bubble that follows the pointer across the whole page, rendered with a raymarched WebGL2 metaball trail with fresnel…
Business Hours: 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…
Button: An accessible button with primary, secondary, outline, and ghost variants, a spinning loading state, optional icon, and a focus ring…
Callout: An inline message block with info, success, warning, danger and neutral variants, three appearances, self-drawing icons, an optional…
Card: A flexible content card with media, badge, title, description, action and footer slots, default, elevated, outline and filled variants…
Cinematic Stacked Gallery: A fullscreen hero gallery where inactive slides collapse into a stacked deck of thumbnails; clicking one crossfades it to full size with…
Code Block: A syntax-highlighted code block with line numbers, per-line highlighting, a filename/language header, a copy button and a collapsible…
Coin Flip Game: 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…
Color Picker: A color picker with a draggable saturation/brightness area, hue and opacity sliders, hex input, preset swatches and an optional screen…
Combobox: A searchable select where you type to filter options, with match highlighting, option descriptions, disabled options, a clear button, an…
Command Palette: A Cmd/Ctrl+K command palette with fuzzy search and match highlighting, grouped results, keyboard navigation, shortcuts and a portal overlay.
Compare Slider: A theme-aware before/after image comparison slider with horizontal or vertical drag direction, keyboard support, and before/after labels.
Confirm Dialog: A focused alert dialog for confirming an action, with default/warning/danger variants, an async-aware confirm button with a spinner and…
Context Menu: A right-click context menu with checkbox and radio items, nested submenus, viewport edge clamping and full keyboard navigation.
Copy Button: A standalone copy-to-clipboard button with ghost/outline/solid variants, icon-only or labeled modes, a floating tooltip, and animated…
Cosmic Background: A canvas-powered animated night-sky background, rotating star rings, a drifting star field, a breathing cone light and spotlight, with…
Countdown Timer: 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…
Credit Card Input: 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…
Currency Input: A money input with a currency picker: live thousands separators for any locale, the right number of decimals per currency, an animated…
Cylinder Gallery: A 3D image gallery arranged around an auto-rotating cylinder, with configurable rows/columns, tilt angle, rotation speed, and edge fade…
Data Table: An admin data table with sortable/filterable columns, global search, status tabs, row selection, badge/avatar/actions cell types…
Date Picker: A date picker with a popover calendar: single date or range selection, month navigation, min/max and disabled dates, Today and Clear…
Description List: A semantic term/value list for specs, order summaries or profile details, with stacked, inline and grid layouts, optional icons and a…
Desktop Mockup Carousel: A realistic Studio Display-style monitor mockup with an internal video/image carousel, swipe or auto-advance, slide/fade transitions, 3D…
Diagonal Carousel: Square cards fan out diagonally into a stacked deck, each inactive card rotates and offsets away from the active one, with paper/glass…
Dice Discount Popup: 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…
Dice Roll Discount Popup: A gamified discount-capture widget where visitors roll two 3D dice for a reward tier, with a themed reveal modal and code copy, rendered…
Dino Runner Game: A canvas endless-runner in the style of the offline dino game, pixel-drawn running dino, procedurally spawned cactus obstacles, three…
Discord Chat Widget: A Discord-style chat bubble widget with a typing simulation, quick replies, a notification popup, member/online counts, and a…
Divider: A horizontal or vertical divider with solid, dashed, dotted and gradient styles, an optional label with start, center or end position, an…
Dock: A macOS-style app dock with cursor-proximity magnification, running-app indicator dots, hover tooltips, separators and full keyboard…
Dot Image Slider: A before/after image reveal, a luminance-mapped halftone dot rendering on one side, the real photo on the other, dragged apart by a…
Drawer: An accessible slide-in drawer from any of 4 sides with a backdrop, focus trap, Escape and backdrop close, scroll lock, focus restore and…
eBay Reviews: A seller-feedback carousel with the eBay wordmark, aggregate rating header and CTA, above a draggable autoplaying grid of review cards.
Empty State: A friendly empty, no-results or error placeholder with 5 icon presets, a floating icon tile, title, description and actions, in plain…
404 Page Section: A centered "page not found" section: a big glitching error code, heading, description and one or two pill buttons. Follows the host site's…
Eternal Glow Card: A hover-reveal product card with a blurred gradient overlay, staggered title/price/description reveal, a badge, and 5 color themes.
Etsy Reviews: A shop-review carousel with the Etsy wordmark, aggregate rating header and CTA, above a draggable autoplaying grid of review cards.
Expand Card Grid: A 2x2 grid of image cards that expand to fill the frame on click, revealing title/description/CTA, with keyboard arrow navigation between…
File Upload: A drag-and-drop file dropzone with click-to-browse, type/size/count validation, image previews, animated progress bars, retry and remove…
Footer Premium: A responsive site footer with a logo, description, social links, multi-column link groups, and a copyright line.
Footer Section: A minimal site footer with up to 4 link columns, a hover-underline link style, paper/glass/custom theming, and a copyright bar.
Form Field: A form field wrapper with label, description, required or optional marker, info tooltip, character counter and animated helper, error and…
Gallery Flow: A gallery of scattered, gently drifting image cards with random rotation, cursor repel/attract mode, pause-on-hover, and a click-to-open…
Glare Card: A 3D tilt card that reacts to the cursor with animated conic-gradient reflections, diamond, holographic or aurora reflex styles.
Glass Navigation: 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…
Glide Carousel: A canvas-rendered, drag-to-scroll carousel with a curved wave layout and ambient wind/drift/magnetic card sway, click-to-open lightbox…
Glow Card: A card with an animated rotating conic-gradient glow border, customizable colors, text position, and an optional background image.
Glow Jump Widget: A floating-action-button popup that opens a glowing 4-level platformer, jump between walls, dodge moving lava, and collect coins to finish…
Navbar 01: A responsive site header, centered nav links on desktop, a tablet CTA-only view, and a mobile hamburger dropdown panel, with active-page…
Hover Card: A hover-triggered rich preview card with open/close delays, a hover bridge so moving into the card keeps it open, placement with collision…
Image Cropper: An image cropper with a draggable, resizable crop box, aspect presets or a circle mask for avatars, keyboard nudging, drag-and-drop upload…
Image Deck 3D: A single image split into a stacked deck of shape-clipped layers (rectangle, circle, hexagon, star, blob and more) that fans out on hover…
Image Showcase: 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…
Infinite Marquee: A seamless scrolling text marquee with solid/gradient/outline text styles, a separator, double-row mode, edge fade, and pause-on-hover.
Inline Edit: Click-to-edit text that turns into an auto-sizing input with save/cancel controls, validation, async save support and a shake on error.
Input: An accessible text input with outline, filled, and underline variants, label/helper/error text, a password show/hide toggle, and a focus…
Input OTP: A one-time-code input with individual animated cells, paste and autofill support, numeric or alphanumeric mode, masking, grouped cells…
Instagram Post Mockup: A realistic Instagram post, avatar ring, swipeable multi-photo carousel, double-tap-to-like heart burst, like/comment/repost/share/save…
Kanban Board: A drag-and-drop task board with a hand-rolled pointer-based drag engine, velocity tilt, edge autoscroll, ghost drop-position indicator…
Kbd: A keyboard key cap for showing shortcuts, with raised, flat and outline styles, 3 sizes, automatic Mac or Windows symbols, key…
Line Chart: A multi-series line/area chart, smooth Catmull-Rom curves, a highlighted zone band, a reference line, endpoint value badges, and a hover…
Linear Progress Bars: A card of linear progress rows, plain ratio bars, file-upload rows with icons/subtitles/shimmer, milestone ticks, and an inline variant…
LinkedIn Post Mockup: A realistic LinkedIn post with a headline, media image, a reaction summary, and interactive like/repost actions with live counts, in light…
Liquid Text: Text distorted through an animated SVG noise filter, 5 presets (liquid, melt, blob, ghost, crystal), cursor-proximity intensity, and a…
Logo Marquee: An infinite scrolling row of client/partner logos with edge fade masks, grayscale-to-color hover reveal, pause-on-hover, and a constant…
Memory Cards Widget: A floating-action-button popup that opens a color-matching memory game, 3 difficulty levels, a live timer/move counter, best-score…
Memory Match Game: A flip-card memory matching game with animal emoji, three difficulty levels, a 3D flip animation, move/score tracking, and a win overlay.
Menubar: A desktop-style app menubar with File/Edit/View-style dropdown menus, checkbox and radio items, submenus and full arrow-key navigation…
Messenger Widget: A Facebook Messenger-style chat bubble widget with a typing simulation, quick replies, a notification popup, availability status, and a…
Meter: A meter for a value within a known range: bar, semicircle gauge or segmented variants with threshold zones, animated counting numbers and…
Minesweeper Game: A classic Minesweeper with three board sizes, flood-fill reveal, right-click flagging, a live mine counter and timer, and a confetti burst…
Modal: An accessible modal dialog with a blurred backdrop, focus trap, Escape and backdrop close, scroll lock, focus restore, 3 sizes and scale…
Motion Gallery Grid: A perfectly aligned image grid with a centered glassmorphism overlay card, heading, subtitle and CTA button, with a staggered…
Multi Select: A searchable multi-select that shows the chosen options as removable chips, with checkbox rows, select all, a selection limit, a +N…
Noise Background: A canvas background with animated film-grain noise, soft color blob gradients, 7 built-in themes (or fully custom colors), drifting blob…
Number Input: A numeric field with minus/plus steppers, press-and-hold auto repeat, min/max clamping, decimal precision, prefix and suffix, thousand…
Pagination: An accessible pagination control with smart ellipsis ranges, a sliding animated active page, solid, soft and compact variants…
Panel: A surface container with an optional header (icon, title, description, actions), body and footer, with outline, filled and elevated…
Password Input: A password field with an animated show/hide eye toggle, a four-segment strength meter, a live requirements checklist and a Caps Lock…
Phone Input: A phone number input with a searchable country menu: flags and calling codes, as-you-type formatting per country, paste detection for…
Phone Mockup: 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…
Pie Chart: A donut-style pie chart with a live center total, click-to-toggle legend, percentage callouts around the ring, and a hover tooltip with…
Pong Game: A canvas Pong against a bot opponent, three difficulty levels, multi-round progression with a color shift and speed increase each round…
Popover: An accessible popover for interactive content with click or hover triggers, 4 placements and 3 alignments, auto-flip, outside-click and…
Product Detail: An eCommerce product page block with a switchable image gallery, color and size pickers, quantity stepper, animated add-to-cart button and…
Product Grid Section: A responsive product/portfolio grid section, heading, per-card image with hover zoom and reveal overlay, category/price meta row, optional…
Product List: An eCommerce product listing block with a filter sidebar (live search, Free/Premium tiers, categories) and a responsive photo grid with…
Profile Flip Card: 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.
Progress Circle Bars: A circular progress indicator with ring, gauge, and dashes arc styles, scroll-triggered count-up animation, color thresholds, a comparison…
QR Code Widget: 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…
Radar Chart: A multi-series radar/spider chart with ring gridlines, per-series solid or dashed strokes, optional point markers, and a hover tooltip…
Radio Button: An accessible, animated radio group with a springy dot, a ripple on select, focus ring, optional descriptions and a selectable card variant.
Range Area Chart: 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…
Rating Stars: An animated star rating input with half-star precision, keyboard support, a dynamic low/mid/high color range, glow effect, and an optional…
Review Card Portrait: A portrait-format testimonial card with a crossfading top image strip, counter, thumbnail selector, and an animated quote with name/role…
Rich Text Editor: A rich text editor with a formatting toolbar, headings, lists, quotes, inline code and links, Markdown-style shortcuts, clean pasting from…
Sales Ticket Popup: A corner-anchored promo popup shaped like a torn event ticket, with 5 themes, a zigzag badge stub, immediate/delay/scroll triggers…
Scratch Card Popup: 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…
Scroll Area: A scrollable container with a thin, draggable, auto-hiding custom scrollbar (vertical, horizontal or both) and edge fade masks, replacing…
Search Bar: An accessible animated search field with a live suggestions menu, keyboard navigation, a clear button, a loading spinner and a Cmd/Ctrl+K…
Segmented Control: A compact radio-style switch between a few options with a sliding animated thumb, solid or soft styles, icons, icon-only mode, vertical…
Select: An accessible, animated custom select with a springy chevron, keyboard navigation, type-ahead, option descriptions, disabled options and a…
Sidebar: A collapsible app sidebar with grouped nav sections, a sliding active-item indicator, badges, an icon-only rail mode with hover tooltips…
Signature Pad: 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…
Skeleton: A loading placeholder with rect, text, circle and card presets, a shimmer or pulse animation, reduced-motion support and a built-in swap…
Slider: An accessible single or range slider with a draggable thumb, a value tooltip, optional step marks, keyboard control and a focus ring.
Snake Game: A canvas-rendered Snake game with three difficulty speeds, keyboard and swipe controls, a directional-eyes snake head, high-score…
Space Invaders Game: A canvas Space Invaders, a descending grid of pixel-drawn invaders that shoot back, three difficulty levels, keyboard controls on desktop…
Spin to Win Wheel: A gamified discount-capture widget where visitors spin a weighted SVG prize wheel for a reward, with five glass themes, a themed reveal…
Splitter: Resizable panels divided by draggable handles, with min/max size constraints, keyboard resizing, double-click reset, and horizontal or…
Stat Card: 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.
Stat Feature: 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.
Stepper: An accessible step indicator with horizontal and vertical layouts, numbered and minimal variants, animated progress connectors, draw-in…
Tabs: An accessible tab set with underline, pill and segmented variants, a sliding animated indicator, icons, counts, arrow-key navigation and…
Tag: A compact label tag with soft, solid and outline variants, 6 colors, 3 sizes, an optional pulsing dot, icon, count, selectable toggle…
Tag Input: A multi-value input that turns text into removable tags on Enter, comma or paste, with suggestions, duplicate and max limits, custom…
Tearable Reveal: A physically-simulated cloth intro reveal, drag to tear open a torn-paper layer covering an image, with breakable constraints, particle…
Telegram Widget: A Telegram-style chat bubble widget with a typing simulation, quick replies, a notification popup, availability status, and a…
Terminal: A macOS-style terminal window that types out a scripted sequence of commands, outputs and comments, with a blinking cursor, auto-scroll…
Testimonial Logos: A compact trust bar, a star rating with a helped-N-teams label above an infinite, edge-masked logo marquee.
Testimonial Pills: Avatar-and-pill testimonial marquee rows with dual-direction scrolling, a depth effect, cursor spotlight glow, and scroll-in reveal.
Testimonial Spotlight: A full-bleed photo testimonial slider with crossfade, slide or iris transitions, a thumbnail strip, progress lines, star ratings, and…
Text Scramble Pro: Cycling phrases that decrypt from scrambled characters into readable text, left-to-right, right-to-left, or random reveal order, with a…
Textarea: An accessible textarea with outline, filled, and underline variants, label/helper/error text, optional auto-resize and a character…
Tic Tac Toe Game: A playable Tic Tac Toe board with a built-in AI opponent, animated piece placement, a drawn winning-line reveal, score tracking, and a…
TikTok Post Mockup: 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…
Tilt Text: Large display text that tilts in 3D toward the cursor, with a layered shadow extrusion for real depth, a specular shine highlight, and…
Tilted Carousel: A 3D book-flow carousel where cards tilt around the active slide, with paper/glass themes and 3 title alignment styles.
Time Picker: 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…
Timeline: A vertical timeline with status markers (done, active, pending, error), a connecting line, an alternating layout option, collapsible…
Toggle Pro: An accessible switch with a springy squish animation on the thumb, an optional label + helper text, and a focus ring.
Toolbar: An accessible toolbar of icon buttons, toggles, radio-style toggle groups and separators with roving-focus arrow-key navigation, a sliding…
Tooltip: An accessible tooltip with 4 placements, auto-flip near the screen edge, a hover delay, keyboard-focus support, an arrow and an optional…
Tree View: A hierarchical tree with expand/collapse, tri-state checkboxes for multi-select, single-row selection, guide lines and full keyboard…
Video Glow Lightbox: A single video card with a pulsing glow-blob frame that morphs into a fullscreen lightbox on click, supports direct URL, YouTube, Vimeo…
Word Reveal: Staggered word or character reveal text, driven by scroll progress, viewport entry, or a manual trigger, 4 animation presets, 3 stagger…
X Post Mockup: A realistic X (Twitter) post with a verified badge, media image, and interactive like/retweet/bookmark actions with live counts, in light…
X (Twitter) Widget: An X (Twitter)-style DM chat bubble widget with a typing simulation, quick replies, a follows-you badge, availability status, and a…
Your Cart Page: 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…

ReactFrame components

All ReactFrame components

Browse by category