Components

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

Share Buttons

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

Shimmer Button

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

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

Or continue with

Social Login Buttons

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

Wishlist Button

Heart icon toggle button with filled/outline states and optional count badge.

Cards

HighlightNew

Ambient glow

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

Ambient Glow Card

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

Animated Card Hover

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

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

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.

Pipeline clarity

Visualize handoffs and momentum across every stage.

Momentum

Orbit overview

Stay aligned with the pulse of every project.

Bento Grid

Asymmetric bento layout tiles with ambient glow and shine animations.

Jordan Lee

2 hours ago

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

Comment Card

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

Credit Card Input

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

Launch your next product faster

Everything you need to design, build, and ship a complete landing experience.

Get started Book a demo

CTA Banner

Cards

A call to action banner with headline, supporting copy, and primary or secondary actions.

Product walkthrough

Responsive embeds for videos, tweets, and code demos.

Embed Card

Embeddable content card with responsive iframe support.

Expandable Card

Click to reveal details and performance stats.

Expandable Card

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

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

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

Design

Craft beautiful interfaces with accessible primitives.

Performance

Optimized for speed and minimal bundle size.

Flip Card

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

NewBeta

Glass Card

Layered glass surfaces with soft highlights and depth.

Glass Card

Hover to spread glowLayer 1

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

Layer 1

Concept Pitch

Outline the narrative and visual direction.

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

Stacked cards that spread a soft glow on hover.

Featured

Gradient Card

A beautiful card with gradient background effects.

Gradient Card

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

Card with an animated gradient border that energizes on hover.

Revenue

$48,35212.5%

vs last period

Users

2,8413.2%

vs last period

KPI Card

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

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

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

Morph

Adaptive shape

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

Morph Card

I agree to receive product updates.

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

Get product updates

Monthly insights on launches, conversion, and messaging.

Newsletter Signup

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

Parallax Tilt Card

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

Starter

$9/month

5 projects
Basic analytics
Email support

Popular

Pro

$29/month

Unlimited projects
Advanced analytics
Priority support
Custom integrations

Pricing Card

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

Image placeholder

Sale

Nimbus Travel Backpack

128 reviews

$89.00$120.00

Product Card

E-commerce product card with image, title, price, rating stars, add-to-cart button, sale badge, and wishlist toggle.

Avery Taylor

Product Lead

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

Projects

Teams

Reviews

Profile Card

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

Shimmer Card

Full card skeleton with animated shimmer sweep.

Skeleton Card

Card skeleton placeholder with shimmer animation and configurable rows.

Trusted by

Social Proof

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

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

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

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

Monthly recurring revenue

vs previous period12.4%

Active workspaces

vs previous period3.2%

Conversion rate

4.2%

vs previous periodStable

Stat Card

Statistic display card with value, label, optional icon, trend indicator, and optional sparkline area.

Stats Card

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

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

Product Manager at Acme Inc

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.”

Sarah Chen

Testimonial Card

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

Tilt Card

A responsive 3D tilt effect with depth and motion.

Tilt Card

3D perspective card that tilts based on cursor position.

Inputs

Address Input

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

Color Picker

Popover color picker with preset swatches, recent colors, and custom hex input.

Amount

▼

Currency Input

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

Date Range Picker

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

Drag files here or click to upload

Accepted: image/*

File Upload

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

Email address

Full name

Floating Input

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

Glow Input

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

Phone

Credit Card

Date

Masked Input

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

Mention Input

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

Focus areas

Multi Select

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

OTP Input

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

Password Input

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

Phone number

Phone Input

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

Pin Input

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

Selected rating: 3.5

Rating Input

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

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

Rich Text Editor

Lightweight rich text editor with basic formatting controls.

Rich Text Input

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

Cmd+K

Search Input

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

DesignUX

Tag Input

Tag input with autocomplete suggestions and removable chips.

0 of 6 tags

Tags Input

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

Text Effects

Animated Text Reveal

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

Right click here

Keyboard navigation supports arrows, Enter, and Escape.

Context Menu

Right click menu with nested submenus and keyboard navigation.

Primary Flow

Accent Energy

Spotlight Shine

Muted Glow

Gradient Text

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

Morphs between words with a smooth blur and slide transition.

Multi Effect Text

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

Scramble Text

Everywordarriveswithitsownmoment.Scrolltorevealthestory.

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

Scroll down to reveal

Scroll Reveal Text

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

Highlights words in sequence as the user scrolls.

Typewriter Text

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

Typing Delete Text

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

Built forteams

Word Rotate Text

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

Display

Monthly recurring revenue

Animated Counter

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

Calendar Grid

Monthly calendar grid with events and navigation.

Activation

Retention

Circular Progress

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


Aurora Labs	Enterprise	Active	42	2 hours ago
Northwind	Team	Active	18	Yesterday
Halo Studio	Starter	Trial	6	3 days ago
Nova Supply	Team	Paused	12	Last week
Helix Digital	Enterprise	Active	64	1 hour ago
Signal Ops	Team	Active	24	2 days ago

Showing 6 of 7 records

Page 1 of 2

Data Table

Sortable, filterable data table with pagination and search.

Backlog

Audit analytics

Validate tracking coverage

Insights

Refresh onboarding

Align steps with new flow

Product

In progress

Design usage report

Build flexible data views

Design

Review

QA billing checks

Verify invoices

Done

Launch summary

Share outcome with team

Comms

Kanban Board

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

Users

0.0%

Uptime

Revenue

Number Counter

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

Uploading72%

Progress

Progress bar with animated indicator and customizable value.

Skeleton

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

Active users

34.2k

Churn rate

2.1%

Sparkline Chart

Tiny inline chart for displaying quick trends in compact spaces.

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

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

Activity 1

Updated seconds ago

Activity 2

Last touched today

Activity 3

Needs review

Activity 4

Updated seconds ago

Activity 5

Last touched today

Activity 6

Needs review

Activity 7

Updated seconds ago

Activity 8

Last touched today

Activity 9

Needs review

Activity 10

Updated seconds ago

#10

Virtual List

Windowed list for efficient rendering of long datasets.

Feedback

NewBetaOutlineMutedGhost

Badge

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

Slider

Range slider with track, range, and thumb components.

Status Avatar

Avatar with image fallback and a small status indicator badge.

Off

Switch

Toggle switch for boolean settings, built with accessible primitives.

Tooltip

Accessible tooltip with provider, trigger, and content primitives.

Settings

Account Settings Form

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

Language Selector

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

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

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

Theme Switcher

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

Backgrounds

Pattern

Dot Wave

A dot grid with gentle wave motion for depth.

Dot Pattern Background

Animated dot grid background with a soft wave motion.

Atmosphere

Meteor Drift

Streaking highlights that add motion and energy to sections.

Meteors Background

Animated meteor streaks background for hero sections or cards.

Morphing Background

Morphing Blob

Animated SVG blob that morphs between shapes with smooth transitions. Perfect for dynamic backgrounds or visual interest.

Texture

Grain Overlay

Subtle noise that gives sections a premium tactile feel.

Noise Texture Background

Subtle animated grain overlay for sections and cards.

Interactive Particles

Particle Field

Interactive particle field with floating particles that respond to mouse movement. Optional connection lines for a network effect.

Components

170

Sofia Alvarez commented on the Q1 roadmap

2 min ago

Marcus Lee uploaded the new brand kit

12 min ago

Nia Patel closed the onboarding checklist

1 hour ago

Team Ops shared updated workspace guidelines

3 hours ago

Riley Chen completed the QA pass

Yesterday

Activity Feed

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

Riley Chen published a new update

2 hours ago

Shared the Q1 launch checklist with the team.

Mara Lopez uploaded a preview

Yesterday

Added the revised onboarding flow screens.

Preview

Onboarding Flow

PDF, 4.2 MB

Activity Feed Item

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

New signup

Avery joined the Pro plan

Weekly report ready

Dashboard summary was generated

18m

Alert resolved

Latency back to normal

Activity Ticker

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

Planned maintenance

We will deploy updates at 02:00 UTC.

Alert Banner

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

Animated Beam Connectors

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

Animated Border Gradient

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.

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.

Workflow automation

Connect tools without the overhead.

Studio

Design review

Collaborate on the final polish.

Animated Marquee Strip

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

Animated Spotlight

Cursor spotlight overlay with spring follow and blur control.

New workspace update is ready for review

Announcement Banner

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

16:9 Video

Video placeholder

1:1 Square

Square

4:3 Landscape

4:3

Aspect Ratio Box

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

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

Autocomplete Address

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

Click or drag to upload

Avatar Upload

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

Bar Chart

Simple bar chart with labels, values, and configurable height.

Bar Chart Simple

Basic bar chart with vertical or horizontal layouts.

Block Demo

Helper to render block previews from a slug.

Bottom Nav Bar

Mobile-style bottom navigation with icons, labels, and active state.

Breadcrumb Dropdown

Components

Breadcrumbs with an overflow dropdown for deep navigation paths.

Breadcrumb Trail

Components

Animated breadcrumbs with an overflow dropdown for longer navigation paths.

Calendar

Use keyboard shortcuts to speed up your workflow. Press Cmd+K to open the command palette.

Month view calendar with selectable days and event dots.

Pro Tip

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

Swipe or drag to navigate

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

Release notes

Design system updates

See the latest tokens and components ready for production.

Customer story

Studio spotlight

Highlight creative teams and the work they are shipping.

Marketing

Campaign previews

Line up hero visuals and messaging before launch day.

Carousel

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

Morning trail through the forest

Ridge glow at first light

Still waters by the cabin

Light through the falls

Carousel Fade

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

No image

Everyday Cotton Tee

$32.00

Cart Item

Cart row with thumbnail, title, inline quantity selector, price, and remove button.

v2.4.0Feb 8, 2026

AddedFixedChanged

Analytics exports and access updates

Added exports for CSV and PDF.
Fixed activity feed ordering on slower networks.
Changed access rules for shared dashboards.

v2.3.1Jan 30, 2026

Fixed

Minor fixes for onboarding

Changelog Entry

Keep it short and clear.46 / 180

Version entry with tags, date, and collapsible details.

Character Counter

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

Weekly Performance

Overview of key metrics

RevenueExpenses

Chart visualization area

Chart Container

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

Hey, how are you?

10:42 AM

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

10:43 AM

Nice! Can you send them over?

10:44 AM

Chat Bubble

Select all updatesProduct updatesRelease notes and feature announcements.Company newsStories from the team and milestones.EventsWebinars and community sessions.

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

Checkbox Group

Checkbox list with optional select all toggle and indeterminate support.

Order summary

Review your totals before placing the order.

Shipping calculated at checkout.

Checkout Summary

Order totals panel with subtotal, shipping, tax, discount line, and checkout call to action.

Paste from clipboard

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

Clipboard Paste

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

Code Block

1export function Stats() {

Code display with optional highlighted HTML and a copy button.

Changes

AdditionsDeletions

Before

2 const total = 1200;

1export function Stats() {

2 const total = 1432;

3 return (

4 <p>Total active users</p>

5 );

Code Diff

Side by side code diff viewer with line numbers and highlights.

Combobox

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

ReactTypeScript

Combobox Multi

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

Command Dialog

Command palette dialog with search, sections, and keyboard navigation.

Command Palette

Global command overlay with search, keyboard shortcuts, and filtered actions.

Comment Box

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

Jordan LeeJust now

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

12 likes

Samir Patel2 minutes ago

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

3 likes

Ava Wright20 minutes ago

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

5 likes

Comment Thread

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

Desktop

684

Mobile

416

62%38%

Comparison Bar

Horizontal bar with two values, labels, and percentage split.

Feature	Starter $12 For solo builders	Recommended Team $29 Collaboration ready	Enterprise Custom Scale with support
Projects	3	Unlimited	Unlimited
Realtime analytics
Seats	1	10	Unlimited
Automations	Basic	Advanced	Custom
SLA

Comparison Table

Feature comparison table for plans or tiers with boolean checkmarks.

Component Demos

Demo switchboard for rendering component previews by slug.

Component Preview

Preview wrapper with tabs for preview, usage, and code.

Click to trigger confetti

Confetti

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

Confetti Burst

Triggered confetti celebration effect that bursts outward from the center.

Confirm Dialog

Confirmation dialog with configurable actions and a danger variant.

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

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

Analytics Overview

Track your key metrics and performance

Dashboard Header

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

Data Grid

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

Product	Category	Price	Stock

Widget Pro	Hardware	$299	In Stock
Cloud Suite	Software	$149	Available
Sensor Kit	Hardware	$89	Low Stock
Data Sync	Software	$49	Available
Power Bank	Hardware	$59	Out of Stock
Analytics Pro	Software	$199	Available

Showing 6 of 6 rows

Data Table Filter

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


Churn	12	-0.4%
Signups	1,204	+6%
Trials	418	+2%
Upgrades	96	-1%

Data Table Mini

Compact sortable table with optional striped rows for quick datasets.


Acme Corp	Active	$12,400
Globex Inc	Pending	$8,200
Initech	Active	$24,100
Umbrella	Inactive	$3,500

Data Table Simple

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

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

Date Picker

Calendar based date selection with month and year navigation.

Date Time Picker

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

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

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

ui-destination.app

Device Frame

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

72%Capacity

99.4%Uptime

Donut Chart

Ring chart with centered value and label.

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

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

Drawer

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

No reports yet

Once reports are generated, they will show up here.

Empty State

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

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

Permissions, audit trails, and access policies in one place.

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

Launch ready layouts

Compose sections quickly with reliable spacing and scale.

Browse layouts

Secure by default

Theme aware tokens

Light and dark styles that stay on brand without rework.

Learn more

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

Components

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

Drag files here or click to upload

Accepted types: image/*,.pdf

File Dropzone

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

Filter Bar

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

Email address

We will only use this for account updates.

Please enter a valid email.

Form Field

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

Account

Profile

Personal info

Confirm

Review details

Username

Password

Step 1 of 3

Form Stepper

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

BeforeAfter

Image Comparison

Before and after image comparison with a draggable slider handle.

Image Gallery

This is an informational alert for general messages.

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

Information

Success

Your profile has been updated successfully.

Warning

Your session will expire in 5 minutes.

Error

Failed to save changes. Please try again.

Inline Alert

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

Saved value: Click to rename

Inline Edit

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

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

A bento grid that expands and rearranges items on hover.

Interactive Particle System

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

To Do

Design system audit

Review component library

Design

API integration

Connect to backend services

Dev

User research

Conduct interviews

Research

Kanban Column

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

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

Definition list for metadata with horizontal or vertical layouts.

Lightbox

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

MonTueWedThuFriSatSun

Visits

Signups

Line Chart

ui-destination.vercel.app

Multi series line chart with optional legend and axis labels.

UI Destination

Curated UI components and blocks for modern product teams.

Link Preview

Components

OpenGraph style preview card with image, title, description, and domain.

Loading Dots

Bouncing dots loader with staggered animation for inline loading states.

Login Form

Email and password login form with validation states, remember me, forgot password, and social login buttons.

Marquee

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

Short card

120px tall

Tall card

200px tall

Medium card

150px tall

Another tall

180px tall

Compact

100px tall

Standard

160px tall

Masonry Grid

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

IMAGE

City lights

Editorial still

VIDEO2:14

Studio reel

Short motion clip

AUDIO34 min

Podcast teaser

Audio highlight

IMAGE

Product detail

Feature closeup

VIDEO1:02

Launch recap

Behind the scenes

AUDIO52 min

Soundtrack

Mood board audio

Media Grid

Masonry style grid for mixed media items with hover overlays.

Mega Menu

Dropdown navigation with columns, icons, descriptions, and featured items.

Menu Dropdown

Hover or click dropdown menu with nested submenus and accessible focus states.

Message Bubble

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

Storage used

of 100 GB

42 GB

42%

API calls

of 10,000 limit

Team seats

Metric Bar

Compared toLast month 45,120

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

Monthly active users

0users

Net revenue

0.0k

Target140k

Metric Display

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

72%Completion

Goal 80%

58%Retention

Last 30 days

94%Support SLA

Target 90%

Metric Ring

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

Metric display with trend line visualization and period comparison label.

Active users

34.2k

Sessions

8.6k

Mini Chart

Tiny sparkline or bar chart for inline data visualization.

Mobile Drawer

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

Navbar

Components

Responsive navbar with a mobile hamburger toggle and optional actions.

NNimbus

Scroll the page to preview the transparency shift.

Pair with hero content or dashboards for a clean entry.

Navbar Sticky

Sticky top navigation bar with scroll-aware transparency and optional actions.

55999999+99+DotPulse

Notification Badge

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

Notification Bell

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

Notification Center

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

Sync complete

Your dashboard is ready with the latest data.

Notification Toast

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

Orbit Spinner

Circular orbiting dots that create a dynamic spinner.

Loading your dashboard

Page Loader

Full-page loading overlay with spinner and optional message.

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

Layered parallax scroll card that offsets shapes at different speeds.

Scroll layers

Parallax storytelling

Guide attention with layered motion and smooth scroll timing.

Depth layers

Foreground content moves with a faster cadence.

Calm motion

Background shapes drift softly to create dimension.

Balanced focus

The message stays centered as the scene shifts.

Parallax Section

Layered parallax section with foreground and background motion.

Password Reset Form

Email input form for password reset with success and error states.

At least 8 characters
One uppercase letter
One lowercase letter
One number
One special character

Password Strength

Password input with strength meter, show/hide toggle, and requirements checklist.

Pie Chart

Pie or donut chart with legend and optional center labels.

Popover Form

Popover with a compact invite form for name and email.

Preview Wrapper

Preview container with theme and light or dark controls.

Price Display

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

Price Tag

Price display with currency symbol, strikethrough for discounts, and optional sale badge.

Billing

Save more when billed annually

Pricing Toggle

Segmented toggle for switching between billing cadences.

Streaming64%

Progress Bar

Animated progress bar with moving stripe accents.

Progress Bar Segmented

Multi-segment progress bar for category breakdowns.

Account

Profile details

Workspace

Team preferences

Launch

Invite collaborators

Progress Steps

Multi-step progress indicator with horizontal and vertical layouts.

Pulse Loader

Circular pulse loader with a soft expanding ring.

Pulse Ring

Animated pulsing ring effect for notification indicators and status badges.

Generating

QR Code

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

Quantity Selector

Numeric stepper with minus/plus buttons, number input, min/max limits, and disabled states.

Quick Actions

Grid of action buttons with icons and optional descriptions.

Quote Block

Styled blockquote with attribution and optional avatar.

Budget range

MinimumMaximum

2080

Range Slider

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

128 reviews

42 reviews

1024 reviews

Rating Display

Read-only star rating display with filled, empty, and half stars using inline SVG, plus optional review count.

Selected rating: 3.5

Rating Stars

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

Reaction Picker