UI Layouts — 125 React Components, Preview & Copy | 21st

UI Layouts

UI Layouts

Copy-paste React components, animated blocks, and design tools, compatible with the shadcn registry.

127components3.1Mviews19.3Kbookmarks

UI Layouts contents

Sparkles Title

Sparkles Title

Sparkles Title

Sparkles Title

Datetime Input

Datetime Input

Datetime Input

Stats Bento

Stats Bento

About Bento

About Bento

Condition Grid

Condition Grid

Image Tabs

Image Tabs

Image Tabs

FAQ Tabbed Explorer

FAQ Tabbed Explorer

Tailwind Image Accordion

Tailwind Image Accordion

Gallery Modal Accordion

Gallery Modal Accordion

Directional Drawer

Directional Drawer

Directional Drawer

Animated Dialog

Animated Dialog

Animated Dialog

Mac Genie Effect

Mac Genie Effect

Mac Genie Effect

Vertical Thumbnail Slider

Vertical Thumbnail Slider

Vertical Thumbnail Autostart Slider

Vertical Thumbnail Autostart Slider

Autoscroll Slider

Autoscroll Slider

Thumbnail Slider

Thumbnail Slider

Framer Moveable Thumbnails

Framer Moveable Thumbnails

Framer Normal Carousel

Framer Normal Carousel

Scroll Text Marquee

Scroll Text Marquee

Framer Carousel Thumbnails

Framer Carousel Thumbnails

Advanced Stats

Advanced Stats

Financial Hero Section

Financial Hero Section

Number Flow Trading

Number Flow Trading

Components
/
ui layout
/
UI Layouts

Related libraries

Ruixen UI

344

components

Efferd

111

components

shadcn/ui

83

components

Geist

by tigran tumasov

73

components

Aceternity UI

86

components

Tailark

by Méschac Irung

48

components

About UI Layouts

UI Layouts is a component library on 21st.dev by ui layout with 125 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

All 125 UI Layouts components

About Bento
About Section
About Section
About Why Us Section
Advanced Stats
Animated Dialog
Arrow Cursor
Autoscroll Slider
Bold Footer
Bold Stats
Button
Button

Browse all component libraries →

Button Magnetic

Buy Me a Coffee

Chat Form Dropzone

Clip-Path Image

Clipped Shape image

Corporate Clip Path Gallery

CSS Image Stacking

Cursor Follower

Cursor Gradient

Customer Experience

Delicate Ascii Dots

Detailed Footer

Directional Drawer

FAQ Tabbed Explorer

Feature Highlights

Feature Velocity

Financial Hero Section

Flowing Ribbons Effect

Footer Privilege

Framer Autoplay Carousel

Framer Carousel

Framer Carousel Thumbnails

Framer Draggable Carousel

Framer Moveable Thumbnails

Framer Multi Carousel

Framer Normal Carousel

Framer Thumbnail Carousel

Gallery Modal Accordion

Hero AI Value Proposition

Hero scroll animation

Horizontal Scroll

Image Mouse Trail

Image Preview Dropzone

Impact Experience

Liquid glass icons

Liquid Weather glass

Mac Genie Effect

Mesh Gradient Background

Mesh Gradient Background

Multi Accordion

Number Flow Trading

Portfolio Experience

Pricing Overview

Pricing Section

Pricing Section

Pricing Section

Pricing Section

Product Packs Pricing

Progressive Carousel

Scroll Animation

Scroll Text Marquee

Sidebar Liquid Glass

Smooth Wavy Canvas

Splash Water Video Masking

Spotlight Cursor

Swapy Draggable Card

Tailwind Image Accordion

Testimonial Basic

Thumbnail Slider

Tree Code Viewer

Upvote Downvote Counter

Vertical Thumbnail Autostart Slider

Vertical Thumbnail Slider

Water Splash Image Masking