Component Preview Catalog

Explore Built-in Component Previews

Click any component card below to inspect interactive live previews, installation guides, and full source code.

Type

Animation

Showing 138 of 138

Ui Components

Buttons & Actions

Buttons, toggles, switches and the small controls a reader clicks.

9 Components

Modern Buttons

5+ Action Styles

copy-button.tsx

nexus.dev/u/johndoe✓ Copied!

Copy Button

Clipboard Confirm

floating-contactbutton.tsx

Support

Help Chat

💬

Floating ContactButton

Animated Action

kbd.tsx

Ctrl+K

Kbd

Key Badges

social-links.tsx

𝕏GHin▶◎✉

Social Links

Brand Mark Row

theme-switcher.tsx

☀️🌙

Theme Switcher

Light/Dark Toggle

toggle.tsx

Toggle

Switch Button

toggle-group.tsx

LeftCenterRight

Toggle Group

Segmented Control

verify-badge.tsx

✓Verified Account

Verify Badge

Trust Badge

Ui Components

Forms & Inputs

Fields, pickers and multi-step flows for collecting input.

13 Components

booking-card.tsx

9:0010:3014:00

Book Wed 14 · 10:30

Booking Card

Days & Time Slots

262728293031123456789101112131415161718192021222324252627282930

Today: Aug 14Apply

Calendar

Date Picker Grid

color-picker.tsx

#6366F1

Color Picker

360° Spectrum Studio

date-picker.tsx

Picking Date...Aug 18, 2026

▲

TodayTomorrowPick Date Range

‹August 2026›

SuMoTuWeThFrSa

2627282930311234567891011121314151617

19202122

Selected: Aug 14 - Aug 18

Confirm

Date Picker

Calendar Input

file-upload.tsx

☁

Drag & Drop File

File Upload

Drag & Drop Motion

Form

Validated Forms

half-stars.tsx

★★★★★4.8

Half Stars

Rating Stars

input.tsx

Input value...

Input

Text & Fields

otp-input.tsx

•

OTP Input

Verification Code

range-date-picker.tsx

Aug 8–Aug 13Reset

Range Date Picker

Priced Range Calendar

select.tsx

Select Option▼

Select

Dropdown Menu

stepper.tsx

Step 2: Configuration

Stepper

Wizard Flow

wizard.tsx

Step 2: Profile2 of 4

Wizard

Multi-Step Form

Ui Components

Menus, tabs, palettes and wayfinding.

10 Components

breadcrumb.tsx

Docs/Components/Breadcrumb

Breadcrumb

Path Navigation

command.tsx

🔍Search docs...⌘K

> ComponentsEnter

Command

Cmd+K Palette

contextmenu.tsx

Copy Link⌘C

Inspect Element⌘I

ContextMenu

Right Click Menu

conversation-timeline.tsx

Can you help me set up auth?

Conversation Timeline

Chat Minimap Rail

dock.tsx

★

Dock

macOS Magnification

Menubar

Top App Navigation

navigation.tsx

DocsUI

FeaturesDocsLogin

Navigation

Responsive Header

pagination.tsx

Prev12Next

Pagination

Page Controls

table-of-contents.tsx

Scroll-Spy Nav

Tabs

Horizontal & Vertical

Ui Components

Overlays & Feedback

Dialogs, popovers, toasts and loading states.

11 Components

Alert

Notification Banners

dialog.tsx

Dialog Title

Are you sure you want to continue?

Confirm

Dialog

Modal Dialog

drawer.tsx

Drawer Sheet

Option 1: Edit Profile

Option 2: Settings

Submit

Drawer

Slideover Sheet

loader.tsx

Loader

Spinners & Pulse

Modal

Overlays & Popups

popover.tsx

Dimensions

Width: 100%Height: Auto

Popover

Context Popup

progress.tsx

Uploading Assets78%

Progress

Loading Bars

skeleton.tsx

Skeleton

Shimmer States

sonner.tsx

Event Triggered

Undo

Sonner

Toast Stream

toast.tsx

✓

Changes Saved

Your profile settings have updated.

Toast

Popup Alert

tooltip.tsx

Add to Favorites

★Bookmark

Tooltip

Hover Labels

Ui Components

Layout & Containers

Panels, grids and disclosure containers that hold other content.

9 Components

accordion.tsx

Is it accessible?▲

Yes. Adheres to WAI-ARIA standards.

Is it styled?▼

Accordion

Expandable Panels

collapsible.tsx

Toggle Details▲

Expanded Panel Content

Collapsible

Toggle Content

glass-panel.tsx

Glass

Glass Panel

Frosted Aurora Surface

item.tsx

Item Component

→

Item

List Items

magic-bento.tsx

Glow

Tilt

Magic Bento

Glow & Tilt Grid

Masonry Grid

Staggered Layout

GSAPMotion

mobile-mockups.tsx

Mobile Mockups

Device Frame

resizable.tsx

Left

Right

Resizable

Split Panels

Scroll Area

Custom Scrollbar

Ui Components

Cards & Stacks

Cards, decks, folders and scroll-driven stacks.

12 Components

book-flip.tsx

‹3 / 12›

Book Flip

3D Page Turns

card.tsx

Card View

Card

Content Containers

card-stack.tsx

✕2 / 5✓

Card Stack

Swipe-to-Discard Deck

GSAPMotion

components-folder.tsx

Components

Components Folder

Animated File Deck

draggable-card-list.tsx

Design reviewDesign⋮⋮

Ship v2.1Release⋮⋮

Write docsDocs⋮⋮

Draggable Card List

Spring Reorder List

GSAPMotion

folder.tsx

Folder

Tactile File Folder

GSAPMotion

memories-card.tsx

Memories

Memories Card

Stackable Cards

GSAPMotion

scroll-split-cards.tsx

03 / 03The far side

Scroll Split Cards

Panorama Split & Flip

scroll-stack.tsx

Scroll Stack Card

Scroll Stack

Stacking Cards

Secure Envelope

Slide-Out Sleeve

tilted-card.tsx

3D Tilted Card

Tilted Card

3D Parallax Tilt

Wallet

Fintech Cardholder

Ui Components

Data Display

Tables, timelines, counters and readouts.

14 Components

animated-timeline.tsx

v2.0 ReleasedToday

Beta TestingYesterday

Animated Timeline

Animated History

api-playground.tsx

GET/api/v1/users

Status: 200 OKSend

Api Playground

API Tester

avatar-stack.tsx

JDALMKSR+12Join

Trusted by 2,000+ makers

Avatar Stack

Overlapping Faces

counter.tsx

-99++

Counter

Animated Numbers

custom-code-block.tsx

component.tsxCopy

const App = () =>

Custom Code Block

Code Highlighter

Data Grid

Advanced Grid

data-table.tsx

Invoices128 total

Filter▼

☐CustomerStatusAmount

☑Alex RiversPaid$1,250.00

☐Sarah ChenPending$420.00

Page 1 of 12

‹ PrevNext ›

Data Table

Sortable Table

invoice.tsx

INV-#402PAID

UI Kit License$149.00

Support Addon$49.00

Total:$198.00

Invoice

Billing Paper

qr-code.tsx

QR Code

QR Generator

radial-orbital-timeline.tsx

v2.0 ReleasedToday

Beta TestingYesterday

Radial Orbital Timeline

Orbital Interactive

split-flap-display.tsx

DEPART

09:41

Gate A12 · On time

Split-Flap Display

Mechanical Flip Board

Table

Data Layout

Tech Stack

Built-With Logo Groups

timeline.tsx

v2.0 ReleasedToday

Beta TestingYesterday

Timeline

History Feed

Ui Components

Charts, Maps & Graphs

Data visualisation, maps and node graphs.

6 Components

chart.tsx

Revenue Stream+34.2%

Chart

SVG Data Viz

data-maps.tsx

+42% Data Flow

Data Maps

Vector Map Analytics

infrastructure-topology.tsx

apiauthdbcachecore

Infrastructure Topology

Live Service Mesh

map.tsx

Bangladesh

Map

Fleet Tracker Map

network-graph.tsx

API

CORE

Network Graph

Node Graph Canvas

User Graph

User Hierarchy Tree

Ui Components

Media & Carousels

Carousels, galleries, players and tickers.

12 Components

3D Carousel

3D Physics Spring

GSAPMotion

audio-player.tsx

▶

Audio Player

Audio Hero & Bar

Carousel

Slide Showcase

curved-carousel.tsx

Violet004

Curved Carousel

3D Arc Sway Deck

flow-gallery.tsx

Flow Gallery

3D Cascading Stream

gallery.tsx

✦ StudioMotion is first.

Updated

Gallery

5 Carousel & Gallery Variants

Image Compare

Before & After Slider

image-wall.tsx

Image Wall

Camera Over a Wall

marquee.tsx

Trusted by 500+ Companies

React

Next.js

Tailwind

Marquee

Infinite Logo Ticker

squircle-carousel.tsx

Squircle Carousel

Masked Tile Slider

video-accordion.tsx

Active Stream

▶

Video Accordion

Interactive Media

video-player.tsx

▶

Video Player

Video Players

Ui Components

Apps & Messaging

Chat, inbox, cart and other self-contained mini apps.

6 Components

Build a stats widget with Tailwind

✦

Here is your responsive metric card:

<MetricCard value="$48.2k" />📋

📎Ask Lumen anything...

🎙️

↑

Ai-Chat

Streaming Interface

Cart

E-commerce Drawer

Felecia Rower• online

📞📹

I will purchase it for sure. 👍10:00 AM

Awesome! Order confirmed.

10:02 AM✓✓

😊Type a message...

➤

Chat

Messaging Feed

Did you check out the new Avara UI kit?

Yeah! The spring grouping logic is smooth.

Chat Bubble

Spring Motion Feed

How to Succeed with Shopify Store

01:46 PM

★

Tressa GassCompany

Q3 Financial Report.pdf (2.4 MB)

01:55 PM

Louetta EssesImportant

Update on project deliverables

03:04 PM

3 of 24 threadsMark all read

Mails

Inbox Feed

playable-piano.tsx

Playable Piano

Acoustic Synthesizer

Ui Components

Text & Effects

Animated type, cursors, particles and decorative motion.

8 Components

Animated List

Staggered Entrance

animated-typography.tsx

H1. Heading Text

H2. Subtitle Paragraph

Flexible & accessible type system tokens.

Animated Typography

Animated Text

apple-select.tsx

Tap to select text and drag the handles.

Apple Select

iOS Text Selection

circular-text.tsx

▶

Circular Text

Rotating Ring Text

Cursor Animation

10 Fluid Variants

heart-signal.tsx

Telemetry♥ 72 BPM

Heart Signal

Pulse Beacon

particle-canvas.tsx

NEXUS

Particle Canvas

Interactive Particles

selection-frame.tsx

Selected

Selection Frame

Figma Selection Box

Ui Components

More Components

Components not yet sorted into a type.

3 Components

designs-toolkit.tsx

Designs Toolkit

Interactive Demo

falling-tags.tsx

Falling Tags

Interactive Demo

modern-scroll-stack.tsx

New

Modern Scroll Stack

Interactive Demo

Website Sections

Hero Sections

Above-the-fold openers for landing pages.

3 Components

component-wall.tsx

ChangelogThe component library for landing pages.

Component Wall

Camera Over a Screenshot Wall

flavour-carousel.tsx

MATCHA

$6.50Add

Flavour Carousel

Product Flavour Hero

Hero

6 Hero Sections

Website Sections

Marketing Sections

Features, stats, pricing, social proof and sign-ups.

9 Components

bento-showcase.tsx

Need a site?This week!

240+projects

Bento Showcase

Six-Card Marketing Bento

Counter Section

4 Stats Layouts

data-flow.tsx

CRMSheets

ReportAlerts

Data Flow

Sources → Node → Results

faq-section.tsx

FAQQuestions,
answered.

How do I install it?−

Is it free to use?+

Does it support RTL?+

Can I theme it?+

FAQ Section

Accordion & Photo Canvas

platform-grid.tsx

Feature

Platform Grid

Hairline Feature Grid

Pricing Section

Tier & Feature Matrix

review-section.tsx

★★★★★

“Shipped our redesign in a week. Unreal.”

Ava · Growth Lead

‹›

Review Section

Testimonial Grid

newsletter.tsx

Join the newsletter

[email protected]Subscribe

3 Sign-up Layouts

[email protected]Join

You're #1,248 in the queue

Waitlist

Countdown & Queue

Website Sections

Headers & Footers

Navbars, sidebars and footers that frame a page.

3 Components

footer.tsx

Footer

4 Responsive Variants

Navbar

Responsive Header

Sidebar Section

App Shell Layout

Website Sections

Pages & App Screens

Full screens: auth, dashboards, profiles and product pages.

7 Components

Image Viewer

4 Viewer Variants

auth-forms.tsx

[email protected]

Submit

Auth Forms

Book Appointment

Practitioner Booking Flow

Active Customer Queue

14 Agent Agents Online

Live

Dashboard

Analytics Overview

Product Details

4 Unique Layouts

profile-page.tsx

Sadiq Rahman

Design Engineer · Dhaka

At work · 14:20

Profile Page

Glass Bento & 24h Dial

support-dashboard.tsx

Active Customer Queue

14 Agent Agents Online

Live

Support Dashboard

Full SaaS Dashboard

Website Sections

More Sections

Sections not yet sorted into a type.

3 Components

error-section.tsx

Error Section

Interactive Demo

not-found-section.tsx

Not Found Section

Interactive Demo

top-destinations.tsx

Top Destinations

Interactive Demo

GSAP

Explore Built-in Component Previews

Buttons & Actions

Modern Buttons

Copy Button

Floating ContactButton

Kbd

Social Links

Theme Switcher

Toggle

Toggle Group

Verify Badge

Forms & Inputs

Booking Card

Calendar

Color Picker

Date Picker

File Upload

Form

Half Stars

Input

OTP Input

Range Date Picker

Select

Stepper

Wizard

Navigation & Menus

Breadcrumb

Command

ContextMenu

Conversation Timeline

Dock

Menubar

Navigation

Pagination

Table of Contents

Tabs

Overlays & Feedback

Alert

Dialog

Drawer

Loader

Modal

Popover

Progress

Skeleton

Sonner

Toast

Tooltip

Layout & Containers

Accordion

Collapsible

Glass Panel

Item

Magic Bento

Masonry Grid

Mobile Mockups

Resizable

Scroll Area

Cards & Stacks

Book Flip

Card

Card Stack

Components Folder

Draggable Card List

Folder

Memories Card

Scroll Split Cards

Scroll Stack

Secure Envelope

Tilted Card

Wallet

Data Display

Animated Timeline

Api Playground

Avatar Stack

Counter

Custom Code Block

Data Grid

Data Table

Invoice