Browse

Components

Modular shadcn/ui components with layered styles, animation, and accessible patterns.

Showing 328 of 328 components

Buttons

13

Add to Cart Button

Buttons

E-commerce button with loading spinner, success checkmark, and animated state transitions.

Aurora Button

Buttons

An animated button with a flowing gradient effect that shifts between your primary and secondary colors. Perfect for calls-to-action.

Border Beam Button

Buttons

A button with an animated beam that travels around the border for a premium call to action.

Button

Buttons

A versatile button component with multiple variants including default, outline, fancy, ghost, and secondary styles.

Copy Button

Buttons

Click to copy text with animated feedback and tooltip support.

Quick actions stay within reach as you work.

New note
Schedule
Automate

Floating Action Button

Buttons

Speed dial style floating action button with expandable quick actions.

2,560 followers
9,842 followers

Follow Button

Buttons

Follow and following toggle with follower count label.

Like Button

Buttons

Toggleable heart button with count display and active state.

Magnetic Button

Buttons

A button that subtly follows the cursor when hovering near it. Uses Framer Motion for smooth, spring-based tracking with customizable magnetic strength.

Ripple Button

Buttons

A button with an interactive ripple effect that responds to clicks and taps.

Shimmer Button

Buttons

A button with an animated shimmer/shine effect on hover. Uses pure CSS animation for optimal performance.

Stacked layout (default)

Or continue with

Inline layout

Social Auth Buttons

Buttons

Google, GitHub, and Apple sign-in buttons with inline SVG icons. Supports stacked or inline layout.

Or continue with

Social Login Buttons

Buttons

Google, GitHub, Apple, and Discord sign-in buttons with icons and optional divider.

Inputs

52
Shipping address

Address Input

Inputs

Multi-field address form for street, city, region, postal code, and country.

Autocomplete Address

Inputs

Address input with suggestions and structured output for street, city, state, and postal code.

JL

Click or drag to upload

Avatar Upload

Inputs

Circular avatar with upload overlay, drag and drop support, and image preview.

Keep it short and clear.46 / 180

Character Counter

Inputs

Textarea with live character count, limit enforcement, and warning states.

Checkbox

Inputs

A styled checkbox component with 8 style presets including modern, glassmorphism, neumorphism, brutalist, retro-mac, windows-95, flat, and skeuomorphic.

Checkbox Group

Inputs

Checkbox list with optional select all toggle and indeterminate support.

Paste from clipboard

Click or press Ctrl+V / Cmd+V to paste content

Clipboard Paste

Inputs

Paste from clipboard with automatic format detection for text, HTML, images, and files.

Color Picker

Inputs

Popover color picker with preset swatches plus hex and RGB inputs.

Combobox

Inputs

Searchable dropdown with keyboard navigation, clear button, and empty state handling.

ReactTypeScript

Combobox Multi

Inputs

Multi-select combobox with search filtering, tag display, and keyboard navigation.

Credit Card Input

Inputs

Card number, expiry, and CVV inputs with auto-formatting and card type detection.

$

Currency Input

Inputs

Amount input with a currency selector and symbol prefix for quick pricing entry.

Date Picker

Inputs

Calendar based date selection with month and year navigation.

Date Range Picker

Inputs

Date range selection with calendar dropdown, presets, and clear action.

Date Time Picker

Inputs

Combined date and time picker with calendar dropdown and time input fields.

Share your feedback

We would love to hear what you think.

Feedback Form

Inputs

User feedback form with rating, text input, and submission handling.

Drag files here or click to upload

Accepted types: image/*,.pdf

File Dropzone

Inputs

Drag and drop upload area with preview, progress, and file type validation.

Drag files here or click to upload

Accepted: image/* (max 2.0 MB)

File Upload

Inputs

Drag and drop file upload zone with previews and file details.

Floating Input

Inputs

An input field with a label that floats up when focused or filled. Smooth animation provides a clean, modern form experience.

We will only use this for account updates.

Please enter a valid email.

Form Field

Inputs

Wrapper for form controls with label, description, required indicator, and error messaging.

Account

Login details

Profile

Personal info

Confirm

Review details

Step 1 of 3

Form Stepper

Inputs

Multi-step form with progress indicator, navigation controls, and step content areas.

Glow Input

Inputs

An input field with a soft glow that blooms on focus for an elevated form experience.

Saved value: Click to rename

Inline Edit

Inputs

Click to edit inline text with enter to save and escape to cancel.

Input

Inputs

Base text input component with style preset support.

Label

Inputs

Accessible form label with variant styles.

Masked Input

Inputs

Input with format masks for phone, credit card, and date with visual placeholders.

Multi Select

Inputs

A multi-select dropdown with animated open state and selectable chips.

OTP Input

Inputs

A 6-digit one-time password input with auto-focus navigation. Supports paste, backspace navigation, and keyboard arrows.

Password Input

Inputs

A password input with a toggle button to show or hide the password. Uses accessible labels and smooth transitions.

Phone Input

Inputs

Phone number input with a country code dropdown and inline flag icons.

Pin Input

Inputs

A polished 6-digit PIN input with animated focus and fill states.

Popover Form

Inputs

Popover with a compact invite form for name and email.

Selected plan: pro

Radio

Inputs

Single radio button input with label and style preset support.

Radio Group

Inputs

Group of radio buttons with single selection behavior.

Budget range

MinimumMaximum
2080

Range Slider

Inputs

Custom dual-handle range slider with value labels and keyboard support.

Selected rating: 3.5

Rating

Inputs

Star rating input for capturing user ratings.

Selected rating: 3.5

Rating Input

Inputs

Configurable rating input with star or heart icons, hover previews, optional half steps, and readonly mode.

Formatting toolbar supports bold, italic, underline, and bullet list.

Rich Text Editor

Inputs

Lightweight rich text editor with basic formatting controls.

Rich Text Input

Inputs

Simple rich text input with bold, italic, and link toolbar using contenteditable.

Search Autocomplete

Inputs

Search input with dropdown suggestions, keyboard navigation, and loading states.

Search the library

Find components, blocks, and layouts.

Try searching for 'button' or 'card'

Search Form

Inputs

Search input with form submission and icon.

Cmd+K
Type to preview loadingPress Cmd+K to focus

Search Input

Inputs

Command palette style search input with icon, keyboard shortcut hint (Cmd+K), and focus states with accent color.

AnalyticsGrowth

Searchable Select

Inputs

Combobox with search filtering, keyboard navigation, and multi-select support.

Select

Inputs

Dropdown select component with accessible keyboard navigation.

Sign inside the area belowAwaiting signature

Signature Pad

Inputs

Canvas-based signature capture with clear and save actions, plus touch support.

50
0
25
50
75
100

Slider Marks

Inputs

Range slider with labeled tick marks for clear interval selection.

Budget range

MinimumMaximum
2080

Slider Range

Inputs

Dual-handle range slider with labels and live min max values.

DesignUX

Tag Input

Inputs

Tag input with autocomplete suggestions and removable chips.

0 of 6 tags

Tags Input

Inputs

Add and remove tags with keyboard support, validation, and duplicate prevention.

Textarea

Inputs

A multi-line text input with 8 style presets including modern, glassmorphism, neumorphism, brutalist, retro-mac, windows-95, flat, and skeuomorphic.

Selected: None

Time Picker

Inputs

Hour and minute selector with AM/PM toggle and popup interface.

Toggle Group

Inputs

Toggle button group with single or multiple selection and orientation controls.

Overlays

8

Alert Dialog

Overlays

Modal dialog for confirmations with accessible cancel and action buttons.

Confirm Dialog

Overlays

Confirmation dialog with configurable actions and a danger variant.

Dialog

Overlays

Accessible modal dialog with overlay and close button.

Drawer

Overlays

Slide-out panel from any edge with backdrop, header, and footer slots.

Mobile Drawer

Overlays

Off-canvas navigation drawer with overlay and swipe-to-close support.

Modal

Overlays

Full-featured modal with backdrop, animations, and size variants.

Popover

Overlays

Floating content panel anchored to a trigger element.

Sheet

Overlays

Bottom sheet with drag to dismiss and snap points for quick resizing.

Cards

34
HighlightNew

Ambient glow

A premium card with an animated aura for feature highlights and launches.

Ambient Glow Card

Cards

A feature card with a rotating ambient aura for premium highlights.

3D Effect

Interactive Tilt

Move your cursor to see the card tilt with a subtle glare.

No Glare

Subtle Motion

A gentler tilt effect without the glare overlay.

Animated Card Hover

Cards

Hover tilt card with optional glare and depth effect.

Motion

Animated Gradient Border

A continuous gradient sweep that frames key content.

Animated Gradient Border Card

Cards

Card with a rotating gradient border for premium emphasis.

Analytics

Track your metrics

Dashboard

All your data in one place with real-time updates

Bento Card

Cards

Card component for bento grid layouts. Supports multiple sizes (1x1, 2x1, 1x2, 2x2) with optional gradient backgrounds.

Overview

Realtime insights

Track product usage, funnel health, and team velocity in one view.

Automation

Smart workflows

Trigger actions and approvals without manual follow ups.

Security

Guardrails

Maintain compliance with continuous checks.

Ops

Pipeline clarity

Visualize handoffs and momentum across every stage.

Momentum

Orbit overview

Stay aligned with the pulse of every project.

Bento Grid

Cards

Asymmetric bento layout tiles with ambient glow and shine animations.

Card Title

Card description with supporting text.

This card adapts its styling based on the selected preset.

Elevated Card

With enhanced shadow.

Use elevated for emphasis.

Card

Cards

Flexible card container with header, content, and footer sections.

Product walkthrough

Responsive embeds for videos, tweets, and code demos.

Embed Card

Cards

Embeddable content card with responsive iframe support.

Expandable Card

Cards

Clickable card that expands to reveal additional content with smooth animation.

Lightning fast

Built for performance with optimized animations and minimal bundle size.

Customizable

Adapt to your brand with CSS variables and Tailwind classes.

Accessible

WCAG friendly with keyboard navigation and screen reader support.

Feature Card

Cards

A card component for showcasing features with icon, title, and description. Supports default, bordered, gradient, and glass variants.

Feature

Instant handoff

Share a single link with engineering and ship production ready UI in minutes.

Feature Highlight

Cards

A compact marketing card with an icon, eyebrow, title, and feature description.

NewBeta

Glass Card

Layered glass surfaces with soft highlights and depth.

Glass Card

Cards

Glassmorphism card with blur, layered glow, and optional icon support.

Layer 1

Concept Pitch

Outline the narrative and visual direction.

Hover to spread glowLayer 1
Layer 2

Design Sprint

Refine the interaction and motion details.

Hover to spread glowLayer 2
Layer 3

Launch Prep

Deliver assets and polish the rollout.

Hover to spread glowLayer 3

Glow Card Stack

Cards

Stacked cards that spread a soft glow on hover.

Featured

Gradient Card

A beautiful card with gradient background effects.

Gradient Card

Cards

A card component with soft gradient glow effects. Great for feature highlights and content sections.

Hover Glow

Hover Border Gradient

A premium card edge that animates with a soft gradient on hover.

Hover Border Gradient Card

Cards

Card with an animated gradient border that energizes on hover.

Interactive

Hover Card

A cursor-tracking spotlight effect that reveals depth and detail on hover.

Hover Card

Cards

Card that appears on hover with rich content preview.

Control

Overview

Monitor everything from a single, elegant panel.

Open overview

Teams

Workstreams

Zoom into active streams and keep them aligned.

View lanes

Signals

Insights

Surface trends with a short, focused summary.

Read insights

Monitor

Alerts

Stay ahead with proactive alerts and context.

Review alerts

Flow

Automation

Launch quick automations with a single action.

Start flow

Assets

Library

Collect every asset in one premium library.

Browse library

Interactive Bento Grid

Cards

A bento grid that expands and rearranges items on hover.

Revenue

$48,35212.5%

vs last period

Users

2,8413.2%

vs last period

KPI Card

Cards

Key performance indicator card with value, change percentage, trend arrow, and sparkline area.

Monthly Revenue

$84,500/ $100,000
Progress to target85%
vs last period12.4%

New Users

1,842/ 1,500
Progress to target100%
vs last month2.1%

Conversion Rate

3.8%/ 5.0%
Progress to target76%

KPI Widget

Cards

KPI display with target vs actual values, progress bar, and trend indicator.

This Month

48,290

Last Month

42,150

12.7% higher

Desktop

12,800 users

Mobile

18,400 users

30.4% higher

Metric Comparison

Cards

Compare two metrics side by side with visual bars and percentage difference.

Get product updates

Monthly insights on launches, conversion, and messaging.

Newsletter Signup

Cards

An email capture card with heading, subtext, and optional consent checkbox.

Starter

For individuals getting started

$9/month
  • Up to 5 projects
  • Basic analytics
  • Email support
Most Popular

Pro

For growing teams

$29/month
  • Unlimited projects
  • Advanced analytics
  • Priority support
  • Custom integrations

Enterprise

For large organizations

$99/month
  • Everything in Pro
  • Dedicated account manager
  • SLA guarantee
  • Custom contracts
  • On-premise option

Pricing Card

Cards

Pricing plan card with title, price, period, features list, and CTA button. Includes popular or featured variant with highlight.

AT

Avery Taylor

Product Lead

Building products that help teams ship faster. Previously at Stripe and Notion.

18

Projects

4

Teams

96

Reviews

Profile Card

Cards

User profile card with avatar, name, bio, stats, and action buttons.

Shimmer Card

Cards

Full card skeleton with animated shimmer sweep.

Trusted by teams at

Acme
TechCorp
Globex
initech
Umbrella

Social Proof

Cards

A trusted by section with logo tiles for customer validation.

Interactive

Spotlight Card

Tracks your cursor with a glowing spotlight that reveals detail.

Spotlight Card

Cards

Interactive card that tracks the cursor with a glowing spotlight highlight.

Focus

Spotlight Hover Card

A cursor-following glow that reveals depth and detail.

Spotlight Hover Card

Cards

Card with a cursor-following spotlight glow and soft hover lift.

Stage 1

Launch Preview

Review the release plan and timelines.

Tap to exploreStack 1
Stage 2

Design Review

Approve final UI and interaction polish.

Tap to exploreStack 2
Stage 3

Go Live

Deploy and monitor the rollout.

Tap to exploreStack 3

Stack Cards

Cards

Stacked cards that fan out on hover and focus for a layered showcase.

Monthly recurring revenue

$0
vs previous period12.4%

Active workspaces

0
vs previous period3.2%

Conversion rate

4.2%
vs previous periodStable

Stat Card

Cards

Metric display card with value, label, optional icon, and change indicator.

0+
Happy Users
0.0%
Uptime
$0M
Revenue

Stats Card

Cards

Animated statistics card with counting animation. Supports prefix/suffix, decimal values, and multiple visual variants.

Phase 1

Gather insights

Collect signals and shape the experience roadmap.

Phase 2

Design the flow

Layer content to guide focus with clarity.

Phase 3

Launch with impact

Reveal the stacked narrative as the user scrolls.

Sticky Reveal Cards

Cards

Sticky stacked cards that reveal as the user scrolls.

Momentum

Plan the next release

Keep the highest impact stories on top.

Updated yesterday

Impact

Highlight the wins

Capture the moments worth celebrating.

Updated last week

Focus

Explore the new sprint

Swipe to save the items that matter most.

Updated 2 hours ago

PassSave

1 of 3

Swipe Cards

Cards

Tinder-style swipeable card stack with drag gestures and action buttons.

This component library has completely transformed our development workflow. The attention to detail is incredible.
S
Sarah Chen
Product Manager at Acme Inc

Testimonial Card

Cards

A card component for displaying customer testimonials with avatar, name, role, company, quote text with quotation styling, and optional star rating.

3D

Tilt Card

A responsive 3D tilt effect with depth and motion.

Tilt Card

Cards

3D perspective card that tilts based on cursor position.

Layout

6
February 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Calendar

Layout

Month view calendar with selectable days and event dots.

Analytics Overview

Track your key metrics and performance

Dashboard Header

Layout

Page header with title, date range picker placeholder, and action buttons area.

Short card

120px tall

Tall card

200px tall

Medium card

150px tall

Another tall

180px tall

Compact

100px tall

Standard

160px tall

Masonry Grid

Layout

Pinterest-style masonry layout using CSS columns for cards of varying heights.

Item 1

Scroll to see overflow indicators and custom scrollbar styling.

Item 2

Scroll to see overflow indicators and custom scrollbar styling.

Item 3

Scroll to see overflow indicators and custom scrollbar styling.

Item 4

Scroll to see overflow indicators and custom scrollbar styling.

Item 5

Scroll to see overflow indicators and custom scrollbar styling.

Item 6

Scroll to see overflow indicators and custom scrollbar styling.

Item 7

Scroll to see overflow indicators and custom scrollbar styling.

Item 8

Scroll to see overflow indicators and custom scrollbar styling.

Item 9

Scroll to see overflow indicators and custom scrollbar styling.

Item 10

Scroll to see overflow indicators and custom scrollbar styling.

Item 11

Scroll to see overflow indicators and custom scrollbar styling.

Item 12

Scroll to see overflow indicators and custom scrollbar styling.

Scroll Area

Layout

Custom scrollbar styling with overflow detection and gradient fade indicators.

Navigation

  • Dashboard
  • Projects
  • Settings

Content Area

Drag the divider to resize. This layout adapts to different content needs.

Split Layout

Layout

Two-pane layout with a resizable divider, supporting horizontal and vertical orientations.

Left panel

Project overview

Drag the handle to resize the layout and keep key metrics visible.

Syncs every 5 minutes

Right panel

Live activity

Keep a running feed alongside the main workspace.

Last updated 2m ago

Split Pane

Layout

Resizable side by side panels with a drag handle.

Charts

11
Mon18
Tue26
Wed22
Thu30
Fri28
Mon
18
Tue
26
Wed
22
Thu
30
Fri
28

Bar Chart

Charts

Simple bar chart with labels, values, and optional horizontal layout.

Mon18
Tue26
Wed22
Thu30
Fri28
Mon
18
Tue
26
Wed
22
Thu
30
Fri
28

Bar Chart Simple

Charts

Basic bar chart with vertical or horizontal layouts.

Weekly Performance

Overview of key metrics

RevenueExpenses
Chart visualization area

Chart Container

Charts

Wrapper component with title, subtitle, legend slot, and responsive chart area.

Donut Chart

Charts

Ring chart with centered value and label.

Top performers

This week

  1. 1
    AC

    Avery Cole

    Growth team

    98,240+4.2%
  2. 2
    JL

    Jordan Lee

    Product

    92,610+2.1%
  3. 3
    SR

    Sam Rivera

    Design

    88,455-1.5%
  4. 4
    MP

    Morgan Patel

    Ops

    84,1200.0%

Leaderboard

Charts

Ranked list with positions, avatars, scores, and optional trend badges.

MonTueWedThuFriSatSun
Visits
Signups

Line Chart

Charts

Line chart with multiple series, points, labels, and optional area fill.

Monthly recurring revenue

$0
vs previous period6.8%

Active subscribers

0
vs previous period1.2%

Retention rate

93%
vs previous periodStable

Avg order value

$0
vs previous period2.4%

Metric Grid

Charts

Responsive grid of stat cards with configurable column counts.

Active users

34.2k

Sessions

8.6k

Mini Chart

Charts

Tiny sparkline or bar chart for inline data visualization.

Revenue mix100%
Product52%
Services28%
Partners20%

Pie Chart

Charts

Pie or donut chart with legend and percentage labels.

Weekly revenue

$42.8k

Active trials

1,204

Spark Line

Charts

Compact metric row with a tiny inline sparkline.

Weekly installs

9.2k

Bounce rate

28%

Sparkline

Charts

Inline mini chart for quick trend snapshots in tables or cards.

Display

46
  1. Invoice sent

    2 min ago

    Invoice #1234 was sent to client@example.com

  2. New user registered

    15 min ago

    john@example.com signed up for a trial

  3. Payment received

    1 hour ago

    $2,400 from Acme Inc

  4. Project deployed

    3 hours ago

Activity Timeline

Display

Vertical activity feed with icon, title, description, timestamp, and connector line.

$0

Monthly recurring revenue

Animated Counter

Display

Counts up to a target value with Framer Motion easing, optional prefix and suffix, and locale formatting.

February 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
26
27
28
29
30
31
1
2
31 events
Sprint planning
4
5
6
71 events
Design review
8
9
10
11
121 events
Launch check
13
14
15
16
17
181 events
Customer interviews
19
20
21
22
23
241 events
Metrics recap
25
26
27
28
1

Calendar Grid

Display

Monthly calendar grid with events and navigation.

0%
Activation
0%
Retention

Circular Progress

Display

Progress ring with animated stroke and optional value label, built with SVG and Framer Motion.

Desktop

684

Mobile

416

62%38%

Comparison Bar

Display

Side by side comparison bars with labels, values, and percentage split.

Feature

Starter

$12

For solo builders

Recommended

Team

$29

Collaboration ready

Enterprise

Custom

Scale with support

Projects3UnlimitedUnlimited
Realtime analytics
Seats110Unlimited
AutomationsBasicAdvancedCustom
SLA

Comparison Table

Display

Feature comparison table for plans or tiers with boolean checkmarks.

Workspace
Owner
Plan
Seats
Status
Northwind
L. Wolfe
Pro
12
Active
Atlas
J. Park
Team
7
Active
Quasar
M. Kim
Starter
3
Trial
Orbit
A. Singh
Enterprise
24
Active
Keystone
R. Diaz
Team
9
Paused

Data Grid

Display

Spreadsheet style grid with selectable cells, editing, and resizable columns.

Aurora Labs
EnterpriseActive422 hours ago
Northwind
TeamActive18Yesterday
Halo Studio
StarterTrial63 days ago
Nova Supply
TeamPaused12Last week
Helix Digital
EnterpriseActive641 hour ago
Signal Ops
TeamActive242 days ago
Showing 6 of 7 recordsSelected 0 of 7 rows
Page 1 of 2

Data Table

Display

Sortable, filterable data table with pagination and search.

ProductCategoryPriceStock
Widget ProHardware$299In Stock
Cloud SuiteSoftware$149Available
Sensor KitHardware$89Low Stock
Data SyncSoftware$49Available
Power BankHardware$59Out of Stock
Analytics ProSoftware$199Available

Showing 6 of 6 rows

Data Table Filter

Display

Table with column filters, filter badges, and row count display.

Churn12-0.4%
Signups1,204+6%
Trials418+2%
Upgrades96-1%

Data Table Mini

Display

Compact sortable table with optional striped rows for quick datasets.

Acme CorpActive$12,400
Globex IncPending$8,200
InitechActive$24,100
UmbrellaInactive$3,500

Data Table Simple

Display

Lightweight sortable table with column headers, row click, and semantic styling.

Initech$241,000+8.7%Active
Helix Digital$178,000+15.3%Active
Aurora Labs$124,000+12.4%Active
Globex Inc$89,500-3.2%Pending
Umbrella Corp$35,200-1.5%Inactive

Data Table Sortable

Display

Table with sortable column headers, sort direction indicators, and optional striped rows.

Response time
Average of 320 ms across the last 24 hours.
Data retention
Events stored for 18 months in regional storage.
Sync cadence
Updates every 5 minutes for connected sources.
Access level
Read and write for workspace admins.

Definition List

Display

Definition list with term and description pairs in a card layout.

Included

Everything you need to report faster

Give every team member a clear view of performance.

  • Unified reporting

    All metrics in one consistent view.

  • Custom dashboards

    Tailor insights for each team.

  • Granular permissions

    Keep data visible to the right people.

  • Export ready

    Send updates to CSV or PDF in seconds.

Feature Checklist

Display

Checklist list with checkmark icons, title, and optional descriptions.

Automation hooks

Trigger workflows whenever teams ship or publish updates.

Layered experiences

Build rich surfaces that still feel fast and focused.

Delightful polish

Micro interactions that keep every page feeling premium.

Feature Grid

Display

Responsive grid of feature items with icons, titles, descriptions, and optional links.

File Preview

Display

File list with type icons, file metadata, and download actions.

Filter Bar

Display

Horizontal filter bar with search input, filter chips, and clear all button.

Backlog

2

Audit analytics

Validate tracking coverage

Insights

Refresh onboarding

Align steps with new flow

Product

In progress

1

Design usage report

Build flexible data views

Design

Review

1

QA billing checks

Verify invoices

Ops

Done

1

Launch summary

Share outcome with team

Comms

Kanban Board

Display

Draggable kanban board with columns and cards powered by DnD Kit.

To Do

3

Design system audit

Review component library

Design

API integration

Connect to backend services

Dev

User research

Conduct interviews

Research

Kanban Column

Display

Draggable card column for kanban boards with reorder support.

Environment

Production

Last deploy 2 hours ago

Region

London

Active failover enabled

Database

Postgres 15

99.99% uptime

Storage

2.4 TB

68% utilized

Requests

1.2M

Past 30 days

Incidents

0 open

All clear

Key Value Grid

Display

Grid layout of label and value pairs for settings or details.

Workspace
Nova Studio
Plan
Enterprise
Region
Europe
Owner
Sasha Lee
Workspace
Nova Studio
Plan
Enterprise
Region
Europe
Owner
Sasha Lee

Key Value List

Display

Definition list for metadata with horizontal or vertical layouts.

Storage used

of 100 GB

42 GB
42%

API calls

of 10,000 limit

8,421
84%

Team seats

3 / 5
60%

Metric Bar

Display

Horizontal bar with label, value, and filled percentage visualization.

Monthly active users

0users
Compared toLast month 45,120

Net revenue

0.0k
Target140k

Metric Display

Display

Large number display with count animation, unit suffix, and optional comparison value.

Goal 80%

Last 30 days

Target 90%

Metric Ring

Display

Circular metric display with percentage ring and centered label.

Page Views

124,892

8.3%

vs last week

Bounce Rate

32.4%

2.1%

vs last month

Metric Trend

Display

Metric display with trend line visualization and period comparison label.

0

Users

0.0%

Uptime

$0

Revenue

Number Counter

Display

Animates from a starting number to a target value using requestAnimationFrame. Supports prefix, suffix, decimals, and multiple easing functions.

$29.99
$49.99$79.99
$199.00$299.00
$499.00$699.00

Price Display

Display

Formatted price with currency symbol, strikethrough for discounts, and multiple size variants.

Billing

Save more when billed annually

Pricing Toggle

Display

Segmented toggle for switching between billing cadences.

Uploading72%

Progress

Display

Progress bar with animated indicator and customizable value.

Streaming64%
Storage100%
Media
48%
Projects
30%
Backups
23%

Progress Bar

Display

Linear progress bar with label, value, and optional segments.

Images
36%
Videos
20%
Docs
30%
Backups
14%

Progress Bar Segmented

Display

Multi-segment progress bar for category breakdowns.

QR Code

Display

Generates a QR code from a value string with configurable size and error correction.

Selected rating: 3.5

Rating Stars

Display

Rating display with half steps, custom icons, and optional readonly mode.

Overview
Details
Left
Right

Separator

Display

Visual divider between content sections.

Skeleton

Display

Shimmering skeleton placeholders with text, avatar, card, and image variants.

Share insights

Capture the key learnings

Today

Draft recap

Summarize next steps

Tomorrow

Review with team

Align on priorities

This week

Sortable List

Display

Drag and drop list for reordering custom list items with a grab handle.

Active users

34.2k

Churn rate

2.1%

Sparkline Chart

Display

Tiny inline chart for displaying quick trends in compact spaces.

Monthly revenue

$54,200

Previous

$49,800

8.8%vs previous period

Active accounts

1,280

Previous

1,315

2.7%vs last week

Stat Comparison

Display

Before and after comparison with trend indicator.

New signups

1,2848.4%

Since last period

Churn rate

2.1%1.6%

Since last period

Revenue today

$42.3k

Since last period

Stat Widget

Display

Compact metric display with value, label, trend indicator, and optional icon slot.

Online
Pending
Offline
Error

Status Indicator

Display

Status badge with colored dot and label for online, offline, pending, or error states.

System statusOperational
System statusDegraded
System statusOutage

System Status

Display

Status indicator pill with tooltip for operational, degraded, and outage states.

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
INV006PendingBank Transfer$200.00
INV007UnpaidCredit Card$300.00
Total$2,250.00

Table

Display

Styled table component with header, body, and row variants.

  • 1

    Kickoff

    Week 1

    Align stakeholders and goals

  • 2

    Design

    Week 2

    Finalize interface and states

  • 3

    Launch

    Week 3

    Release to early adopters

Timeline

Display

Vertical timeline with animated steps and status styling for sequences or schedules.

Discovery call

Aug 02

Align on goals, scope, and constraints.

Prototype handoff

Aug 05

Deliver clickable flows for review.

Stakeholder review

Aug 09

Collect feedback and approval notes.

Launch prep

Aug 12

Finalize assets and rollout plan.

Timeline Vertical

Display

Vertical timeline with connector lines, icons, and date labels.

Activity 1

Updated seconds ago

#1

Activity 2

Last touched today

#2

Activity 3

Needs review

#3

Activity 4

Updated seconds ago

#4

Activity 5

Last touched today

#5

Activity 6

Needs review

#6

Activity 7

Updated seconds ago

#7

Activity 8

Last touched today

#8

Activity 9

Needs review

#9

Activity 10

Updated seconds ago

#10

Scroll to see all 120 items (real component virtualizes for performance)

Virtual List

Display

Windowed list for efficient rendering of long datasets.

Global Presence

Our users span across the world

50,000+
Active Users
120+
Countries

World Map

Display

Interactive SVG world map visualization.

Feedback

25

Planned maintenance

We will deploy updates at 02:00 UTC.

Alert Banner

Feedback

Full-width dismissible banner for announcements with icon and close button.

New workspace update is ready for review

Announcement Banner

Feedback

Dismissible banner with icon, message, and optional action button.

NewBetaOutlineMutedGhost

Badge

Feedback

Small badge component with multiple style variants for labels or tags.

ReactTypeScriptTailwind CSSNext.jsNode.js
ReactTypeScriptTailwind CSSNext.jsNode.js
ReactTypeScriptTailwind CSSNext.jsNode.js

Badge Group

Feedback

Grouped badges for displaying multiple status labels or tags.

Pro Tip
Use keyboard shortcuts to speed up your workflow. Press Cmd+K to open the command palette.
Note
This feature is available on all paid plans.
Caution
This action will affect all team members. Make sure everyone is notified before proceeding.
Danger
Deleting your account is permanent and cannot be undone.

Callout

Feedback

Information callout box with tip, info, warning, and danger variants. Supports collapsible content.

No reports yet

Once reports are generated, they will show up here.

Empty State

Feedback

Centered empty state placeholder with icon, text, and optional action.

Inline Alert

Feedback

Contextual alert component for inline feedback with icon, title, and action support.

55999999+99+DotPulse

Notification Badge

Feedback

Small count badge with 99+ overflow, dot variant, and optional pulse animation.

Notification Bell

Feedback

Bell icon button with unread badge and dropdown list of notifications.

Notification Center

Feedback

Dropdown panel for notifications with unread count, mark as read, and clear all actions.

Notifications

2

Notification Center Panel

Feedback

Panel with notification items, mark all read button, and filter controls.

New comment from Jordan

Loved the update. The new flow feels faster.

2 minutes ago

Alex liked your post

Your design system article received a new like.

1 hour ago

Weekly digest ready

Your activity summary for this week is available.

2 days ago

Notification Item

Feedback

Notification row with icon, title, description, timestamp, and unread indicator.

Sync complete

Your dashboard is ready with the latest data.

Notification Toast

Feedback

Toast notification with variants, auto-dismiss, and optional action button.

Account

Profile details

2

Workspace

Team preferences

3

Launch

Invite collaborators

Progress Steps

Feedback

Multi-step progress indicator with horizontal and vertical layouts.

Sale
25% Off
New
50% Off

Sale Badge

Feedback

Corner badge showing discount percentage or custom sale text with configurable position.

Skeleton Loader

Feedback

Configurable skeleton loader with text, avatar, and card layouts.

Slider

Feedback

Range slider with track, range, and thumb components.

Snackbar

Feedback

Bottom-positioned lightweight notification with optional action button and auto-dismiss.

Status Avatar

Feedback

Avatar with image fallback and a small status indicator badge.

Healthy
Review
Failed
Queued
Pending

Status Badge

Feedback

Badge with dot indicator for success, warning, error, info, and pending states.

OnlineOfflineBusyAway
With pulse:OnlineBusy
Sizes:OnlineOnlineOnlineOnline

Status Dot

Feedback

Simple status indicator dot with online, offline, busy, and away variants. Supports pulse animation.

Off

Switch

Feedback

Toggle switch for boolean settings, built with accessible primitives.

New message

You have a new comment waiting.

Payment received

Invoice #2041 was paid.

Toast Stack

Feedback

Stackable toast notifications with auto-dismiss, variants, and slide-in animation.

Tooltip

Feedback

Accessible tooltip with provider, trigger, and content primitives.

Focus info

Tooltip Fancy

Feedback

Rich tooltip with arrow, delay, and multiple positions.

Text Effects

9

Word by word

Everyproductdeservesacinematicrevealmoment

Letter by letter

Reveal each character

From below

Animatefromanydirectionyouprefer

Animated Text Reveal

Text Effects

Reveal text by letter or word as it enters the viewport.

Primary Flow

Accent Energy

Spotlight Shine

Muted Glow

Gradient Text

Text Effects

Animated gradient text with flowing motion and semantic color stops. Uses Framer Motion for a smooth, continuous sweep.

Seamless transitions between product highlights.

Build for momentum

Morph Text

Text Effects

Morphs between words with a smooth blur and slide transition.

Scramble Text

Text Effects

Scrambles characters before resolving into a crisp headline, perfect for dramatic reveals.

Everywordarriveswithitsownmomentasyouscroll

Words reveal sequentially as users scroll through your content

Scroll Reveal Text

Text Effects

Reveals words or characters as you scroll, creating a story-like reading flow.

Scroll-drivenemphasiscanguidethereadertowardthemostimportantideaswithoutbreakingtheflow.

Scroll the page to see each word highlight in sequence.

Text Highlight On Scroll

Text Effects

Highlights words in sequence as the user scrolls.

Typewriter Text

Text Effects

Animates text typing character by character with configurable speed, delay, and an optional blinking cursor.

Typing Delete Text

Text Effects

Types and deletes phrases in a loop with a blinking cursor for a lively terminal effect.

Built forteams

Word Rotate Text

Text Effects

Rotates through a list of words with a smooth flip animation.

Backgrounds

7

Effects

18
A
B
C

Animated Beam Connectors

Effects

Animated connector beams that link nodes with a flowing motion trail.

Premium Feature

A rotating gradient border draws attention to key content.

Pause on Hover

Hover to pause the animation for better readability.

Animated Border Gradient

Effects

Animated conic gradient border wrapper with configurable radius and hover pause.

Analytics

Realtime insights

Track core metrics as they update.

Alerts

Smart alerts

Stay ahead with instant notifications.

Ops

Workflow automation

Connect tools without the overhead.

Studio

Design review

Collaborate on the final polish.

Analytics

Realtime insights

Track core metrics as they update.

Alerts

Smart alerts

Stay ahead with instant notifications.

Ops

Workflow automation

Connect tools without the overhead.

Studio

Design review

Collaborate on the final polish.

Animated Marquee Strip

Effects

An infinite scrolling strip with premium cards for logos, partners, or testimonials.

Click to trigger confetti

Confetti

Effects

Animated confetti effect component perfect for celebrations. Includes a ready-to-use ConfettiButton wrapper.

Confetti Burst

Effects

Triggered confetti celebration effect that bursts outward from the center.

Spotlight

Cursor guided focus

Move your cursor to reveal the highlight and bring focus to key details.

  • Real time tracking
  • Soft reveal mask
  • Premium presentation
  • Smooth motion

Cursor Spotlight

Effects

A spotlight section that tracks the cursor and reveals content inside the highlight.

Design

Craft beautiful interfaces with accessible primitives.

Performance

Optimized for speed and minimal bundle size.

Flip Card

Effects

3D card component that flips on hover or click to reveal content on the back. Supports both horizontal and vertical flip animations.

Move your cursor

Interactive Particle System

Effects

A mouse-controlled particle system with dynamic connections and physics interactions.

Liquid Morphing Button

Effects

A button with a gooey liquid effect that deforms and morphs on hover.

Design
Develop
Ship
Scale
Iterate

Marquee

Effects

Flexible infinite scrolling marquee component for text, images, or any content. Supports vertical and horizontal scrolling with customizable speed and fade effects.

Morph

Adaptive shape

The card morphs its silhouette to keep the focus on your content.

Morph Card

Effects

Card that morphs its shape and silhouette on hover for dynamic emphasis.

Gradient spotlightShimmer highlightShimmer highlightHover glitch

Multi Effect Text

Effects

Animated text component featuring gradient flow, shimmer, glitch, and reveal effects.

Parallax

Parallax scroll focus

Layered shapes move at different speeds to create depth as you scroll.

Velocity

1.3x

Depth

240px

Cadence

Smooth

Parallax Scroll

Effects

Layered parallax scroll card that offsets shapes at different speeds.

Parallax

Layered motion

Hover to reveal depth and motion.

Parallax Tilt Card

Effects

A 3D card that tilts on hover with multi-layer parallax depth effects.

Pulse Ring

Effects

Animated pulsing ring effect for notification indicators and status badges.

Scroll progress0%
Reading progress0%
0%

Scroll Progress Bar

Effects

Scroll progress indicator with bar and circle variants.

Shimmer Effect

Effects

Skeleton loading shimmer animation for placeholder content while data loads.

Spotlight cursor

Follow the highlight

Move your cursor to reveal a soft accent glow that tracks every motion.

  • Smooth tracking
  • Subtle glow
  • Premium focus
  • Lightweight

Spotlight Cursor

Effects

Spotlight overlay that follows the cursor to reveal a soft accent glow.

Loaders

7

Media

14

16:9 Video

Video placeholder

1:1 Square

Square

4:3 Landscape

4:3

Aspect Ratio Box

Media

Container that maintains a specified aspect ratio with common presets for video, photo, and square.

Now playing

Ambient Focus

Studio Session

0:424:05
72%

Audio Player

Media

UI only audio player with play/pause, progress, volume control, and time display.

Design system updates

Release notes

Design system updates

See the latest tokens and components ready for production.

Studio spotlight

Customer story

Studio spotlight

Highlight creative teams and the work they are shipping.

Campaign previews

Marketing

Campaign previews

Line up hero visuals and messaging before launch day.

Swipe or drag to navigate

Carousel

Media

Horizontal slide carousel with autoplay, dot navigation, and swipe indicators.

Forest path with morning light

Morning trail through the forest

Mountain ridge at sunrise

Ridge glow at first light

Lakeside cabin in the mist

Still waters by the cabin

Waterfall in a lush valley

Light through the falls

Carousel Fade

Media

Image carousel with smooth fade transitions, autoplay, keyboard navigation, and dot indicators.

ui-destination.app
Device preview

Device Frame

Media

Screenshot mockup frames for phone, tablet, laptop, and browser.

Drag to explore5 items

Analytics

Signal Pipeline

Track every handoff with a clear visual timeline.

Reports

Rapid Insights

Pull key metrics into a single scrollable story.

Workflow

Team Sync

Drag through updates without losing your place.

Review

Review Mode

Momentum scrolling keeps long galleries smooth.

Launch

Launch Deck

Highlight the big moments with premium cards.

Drag to Scroll Gallery

Media

A horizontal gallery with drag to scroll momentum and springy cards.

BeforeAfter
After image

Image Comparison

Media

Before and after image comparison with a draggable slider handle.

Image Gallery

Media

Grid gallery with lightbox modal, keyboard navigation (arrows, escape), and thumbnail strip.

Image Zoom

Media

Zoomable image component with smooth magnification on interaction.

Lightbox

Media

Image gallery overlay with zoom, pan, and navigation controls.

Media carousel

Browse the latest media updates.

Product feature
IMAGE

Product feature

Image spotlight

Launch highlight
VIDEO1:24

Launch highlight

Short reel

Team update
AUDIO38 min

Team update

Podcast clip

Behind the scenes
IMAGE

Behind the scenes

Studio capture

Campaign preview
VIDEO0:46

Campaign preview

Video teaser

Media Carousel

Media

Horizontal media carousel with navigation buttons and dot indicators.

City lights
IMAGE

City lights

Editorial still

Studio reel
VIDEO2:14

Studio reel

Short motion clip

Podcast teaser
AUDIO34 min

Podcast teaser

Audio highlight

Product detail
IMAGE

Product detail

Feature closeup

Launch recap
VIDEO1:02

Launch recap

Behind the scenes

Soundtrack
AUDIO52 min

Soundtrack

Mood board audio

Media Grid

Media

Masonry style grid for mixed media items with hover overlays.

Video embed

Product overview

Responsive video embed with YouTube or Vimeo links.

16/9
Product overview

Video Embed

Media

Responsive video container with a play overlay, aspect ratios, and YouTube or Vimeo support.

Video

Product overview

0:00 / 0:00

Video Player

Media

Custom video player with play/pause, progress bar, volume control, and fullscreen toggle.

Social

20
Sofia Alvarez

Sofia Alvarez commented on the Q1 roadmap

2 min ago
ML

Marcus Lee uploaded the new brand kit

12 min ago
Nia Patel

Nia Patel closed the onboarding checklist

1 hour ago
TO

Team Ops shared updated workspace guidelines

3 hours ago
RC

Riley Chen completed the QA pass

Yesterday

Activity Feed

Social

List of activity items with avatar, action text, and timestamp.

R

Riley Chen published a new update

2 hours ago

Shared the Q1 launch checklist with the team.

M

Mara Lopez uploaded a preview

Yesterday

Added the revised onboarding flow screens.

Preview

Onboarding Flow

PDF, 4.2 MB

Activity Feed Item

Social

Timeline style activity entry with avatar, action text, timestamp, and optional attachment preview.

New signup

Avery joined the Pro plan

2m

Weekly report ready

Dashboard summary was generated

18m

Alert resolved

Latency back to normal

1h

Activity Ticker

Social

Live scrolling activity feed with looping updates and optional pause on hover.

Avery Taylor
Riley James
ML
+2

Avatar Group

Social

Stacked avatar group with overflow count.

J

Hey, how are you?

10:42 AMRead
M

I'm doing great! Just finished the new designs.

10:43 AMDelivered
J

Nice! Can you send them over?

10:44 AMSent

Chat Bubble

Social

Message bubble with avatar, timestamp, tail pointer for left/right alignment, and read receipt dots.

JL
0/280 characters

Comment Box

Social

Comment input with avatar, submit action, and live character count.

Jordan Lee

Jordan Lee

2 hours ago

Loved the update. The new flow feels faster and clearer.

SR

Sam Rivera

1 hour ago

This is exactly what we needed. Great work!

Comment Card

Social

Compact comment card with avatar, name, timestamp, body text, like and reply actions.

J
Jordan LeeJust now

Really like the new layout. The spacing feels a lot calmer than the previous version.

12 likes
S
Samir Patel2 minutes ago

Agreed. The alignment changes also make the navigation more obvious.

3 likes
A
Ava Wright20 minutes ago

Can we add a note for the animation timing? It feels a bit fast on mobile.

5 likes

Comment Thread

Social

Nested comment display with reply action, like count, and indented replies.

Emoji picker

Choose a reaction

Recent

All emojis

Emoji Picker

Social

Emoji selection grid with category tabs and search filtering.

Thanks jordanlee@jordanlee for the feedback!

Working with AL@alexmorganALAlex Morgan@alexmorganProduct designer exploring tech and creativity. on the new feature.

Mention Badge

Social

Inline @username badge with avatar and optional hover card for profile preview.

Mention Input

Social

Text input that supports @mentions with dropdown suggestions and highlighted mentions.

Hey, did you see the new design specs?

10:30 AMRead

Yes! They look great. Let me review them this afternoon.

10:32 AMDelivered

Message Bubble

Social

Chat message bubble with alignment, timestamp, and read receipt.

Reaction Picker

Social

Emoji reaction bar with expandable grid and recently used section.

Share Buttons

Social

Row of social share buttons for X, LinkedIn, and copy link actions.

Share Menu

Social

Share button with dropdown menu for Twitter, LinkedIn, Email, and copy link.

AL
GH
AT

User Avatar

Social

User avatar with fallback initials, status indicator, and size variants.

Avery Taylor
Riley James
ML
CM
+1
Avery Taylor
Riley James
ML
CM
+1
Avery Taylor
Riley James
ML
CM
+1

Overlapping avatars with overflow count.

User Avatar Group

Social

Stacked avatar group with overflow count.

S

Sarah Chen

Product Designeronline
M

Marcus Johnson

Engineeraway
E

Emily Rodriguez

Marketing Leadoffline

User List

Social

List of users with avatar, name, status indicator, and action buttons.

Thanks @stevie for the feedback.

User Mention

Social

Inline mention badge for linking to user profiles.

Alex Morgan

Alex Morgan

Product designer exploring the intersection of tech and creativity.

3.2k

Followers

218

Following

142

Posts

User Profile Card

Social

Profile card with avatar, name, bio, stats (followers, following, posts), and follow button.

Ecommerce

7

Auth

5

Content

6

Marketing

3

Settings

6

Account settings

Update your profile information and preferences.

Profile photo

JPG, PNG, or GIF. Max 2MB.

Account Settings Form

Settings

Form with avatar upload, display name, email, and timezone fields for account management.

Language Selector

Settings

Dropdown for selecting a language with search filter and flag icons.

Product updates

Stay informed on releases and improvements.

Release notes

Monthly updates and highlights.

Beta previews

Early access to upcoming features.

Workspace activity

Notifications about your team and projects.

Mentions

Alerts when someone mentions you.

Task reminders

Upcoming due dates and assignments.

Notification Toggle

Settings

Grouped notification settings with toggle switches, labels, and descriptions.

Privacy settings

Control how your information is shared across the workspace.

Public profile

Allow others to view your profile details.

Activity status

Show when you are active in the workspace.

Personalized recommendations

Use activity to tailor recommendations.

Data sharing

Share anonymized usage data to improve the product.

Privacy Settings

Settings

Card with toggles for various privacy options like profile visibility and data sharing.

Theme Switcher

Settings

Toggle group for light, dark, and system theme preferences with inline SVG icons.

Theme Toggle

Settings

Dark and light mode toggle with smooth icon transitions.