Reactframe

Overview

ReactFrame is a catalog of animated React components, blocks, elements and full pages for Tailwind CSS and shadcn/ui. Items can be copied as code, installed with the shadcn CLI or generated by prompting an AI assistant. More than 150 items are free and open source, while premium components are sold individually or through an All-Access option.

The registry currently lists over 230 components, most animated with Motion. The site also offers animated icons that move on hover and a set of free browser-based design tools, including a background remover, image compressor, OG image generator and code-to-image tool, which run on the user's device.

Features

• Animated elements: Glare and glow cards, 3D image decks, marquees, carousels, tilt text and text scramble effects.
• UI components: Combobox, multi select, date and time pickers, OTP, phone and credit card inputs, color picker and signature pad.
• App pieces: Command palette, sidebar, dock, timeline, tree view, stat cards, code block, terminal and rich text editor.
• Mockups and widgets: Phone and browser mockups, social post mockups, and Discord, Telegram and Messenger chat widgets.
• Pages and commerce: Cart, product list and product detail pages, plus headers, footers and testimonials.
• Animated icons: Icons that animate on hover, available as JSX or through the shadcn CLI.
• Free tools: Background remover, image compressor, QR code, mockup, OG image and email signature generators.

Tech stack

• React, Next.js, TypeScript, Tailwind CSS, shadcn/ui, Motion

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @reactframe/component-name