Control
Overview
Monitor everything from a single, elegant panel.
Browse
Modular shadcn/ui components with layered styles, animation, and accessible patterns.
Multi-field address form for street, city, region, postal code, and country.
Address input with suggestions and structured output for street, city, state, and postal code.
Click or drag to upload
Circular avatar with upload overlay, drag and drop support, and image preview.
Textarea with live character count, limit enforcement, and warning states.
A styled checkbox component with 8 style presets including modern, glassmorphism, neumorphism, brutalist, retro-mac, windows-95, flat, and skeuomorphic.
Checkbox list with optional select all toggle and indeterminate support.
Paste from clipboard
Click or press Ctrl+V / Cmd+V to paste content
Paste from clipboard with automatic format detection for text, HTML, images, and files.
Popover color picker with preset swatches plus hex and RGB inputs.
Searchable dropdown with keyboard navigation, clear button, and empty state handling.
Multi-select combobox with search filtering, tag display, and keyboard navigation.
Card number, expiry, and CVV inputs with auto-formatting and card type detection.
Amount input with a currency selector and symbol prefix for quick pricing entry.
Calendar based date selection with month and year navigation.
Date range selection with calendar dropdown, presets, and clear action.
Combined date and time picker with calendar dropdown and time input fields.
User feedback form with rating, text input, and submission handling.
Drag files here or click to upload
Accepted types: image/*,.pdf
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)
Drag and drop file upload zone with previews and file details.
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.
Wrapper for form controls with label, description, required indicator, and error messaging.
Account
Login details
Profile
Personal info
Confirm
Review details
Multi-step form with progress indicator, navigation controls, and step content areas.
An input field with a soft glow that blooms on focus for an elevated form experience.
Saved value: Click to rename
Click to edit inline text with enter to save and escape to cancel.
Base text input component with style preset support.
Accessible form label with variant styles.
Input with format masks for phone, credit card, and date with visual placeholders.
A multi-select dropdown with animated open state and selectable chips.
A 6-digit one-time password input with auto-focus navigation. Supports paste, backspace navigation, and keyboard arrows.
A password input with a toggle button to show or hide the password. Uses accessible labels and smooth transitions.
Phone number input with a country code dropdown and inline flag icons.
A polished 6-digit PIN input with animated focus and fill states.
Popover with a compact invite form for name and email.
Selected plan: pro
Single radio button input with label and style preset support.
Group of radio buttons with single selection behavior.
Budget range
Custom dual-handle range slider with value labels and keyboard support.
Selected rating: 3.5
Star rating input for capturing user ratings.
Selected rating: 3.5
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.
Lightweight rich text editor with basic formatting controls.
Simple rich text input with bold, italic, and link toolbar using contenteditable.
Search input with dropdown suggestions, keyboard navigation, and loading states.
Search input with form submission and icon.
Command palette style search input with icon, keyboard shortcut hint (Cmd+K), and focus states with accent color.
Combobox with search filtering, keyboard navigation, and multi-select support.
Dropdown select component with accessible keyboard navigation.
Canvas-based signature capture with clear and save actions, plus touch support.
Range slider with labeled tick marks for clear interval selection.
Budget range
Dual-handle range slider with labels and live min max values.
Tag input with autocomplete suggestions and removable chips.
Add and remove tags with keyboard support, validation, and duplicate prevention.
A multi-line text input with 8 style presets including modern, glassmorphism, neumorphism, brutalist, retro-mac, windows-95, flat, and skeuomorphic.
Hour and minute selector with AM/PM toggle and popup interface.
Toggle button group with single or multiple selection and orientation controls.
Modal dialog for confirmations with accessible cancel and action buttons.
Confirmation dialog with configurable actions and a danger variant.
Accessible modal dialog with overlay and close button.
Slide-out panel from any edge with backdrop, header, and footer slots.
Off-canvas navigation drawer with overlay and swipe-to-close support.
Full-featured modal with backdrop, animations, and size variants.
Floating content panel anchored to a trigger element.
Bottom sheet with drag to dismiss and snap points for quick resizing.
A premium card with an animated aura for feature highlights and launches.
A feature card with a rotating ambient aura for premium highlights.
3D Effect
Move your cursor to see the card tilt with a subtle glare.
No Glare
A gentler tilt effect without the glare overlay.
Hover tilt card with optional glare and depth effect.
Motion
A continuous gradient sweep that frames key content.
Card with a rotating gradient border for premium emphasis.
Track your metrics
All your data in one place with real-time updates
Card component for bento grid layouts. Supports multiple sizes (1x1, 2x1, 1x2, 2x2) with optional gradient backgrounds.
Track product usage, funnel health, and team velocity in one view.
Trigger actions and approvals without manual follow ups.
Maintain compliance with continuous checks.
Visualize handoffs and momentum across every stage.
Stay aligned with the pulse of every project.
Asymmetric bento layout tiles with ambient glow and shine animations.
Card description with supporting text.
This card adapts its styling based on the selected preset.
With enhanced shadow.
Use elevated for emphasis.
Flexible card container with header, content, and footer sections.
Everything you need to design, build, and ship a complete landing experience.
A call to action banner with headline, supporting copy, and primary or secondary actions.
Responsive embeds for videos, tweets, and code demos.
Embeddable content card with responsive iframe support.
Click to reveal details and performance stats.
Clickable card that expands to reveal additional content with smooth animation.
Built for performance with optimized animations and minimal bundle size.
Adapt to your brand with CSS variables and Tailwind classes.
WCAG friendly with keyboard navigation and screen reader support.
A card component for showcasing features with icon, title, and description. Supports default, bordered, gradient, and glass variants.
Feature
Share a single link with engineering and ship production ready UI in minutes.
A compact marketing card with an icon, eyebrow, title, and feature description.
Layered glass surfaces with soft highlights and depth.
Glassmorphism card with blur, layered glow, and optional icon support.
Outline the narrative and visual direction.
Refine the interaction and motion details.
Deliver assets and polish the rollout.
Stacked cards that spread a soft glow on hover.
Featured
A beautiful card with gradient background effects.
A card component with soft gradient glow effects. Great for feature highlights and content sections.
A premium card edge that animates with a soft gradient on hover.
Card with an animated gradient border that energizes on hover.
A cursor-tracking spotlight effect that reveals depth and detail on hover.
Card that appears on hover with rich content preview.
Control
Monitor everything from a single, elegant panel.
Teams
Zoom into active streams and keep them aligned.
Signals
Surface trends with a short, focused summary.
Monitor
Stay ahead with proactive alerts and context.
Flow
Launch quick automations with a single action.
Assets
Collect every asset in one premium library.
A bento grid that expands and rearranges items on hover.
Revenue
vs last period
Users
vs last period
Key performance indicator card with value, change percentage, trend arrow, and sparkline area.
Monthly Revenue
New Users
Conversion Rate
KPI display with target vs actual values, progress bar, and trend indicator.
This Month
48,290
Last Month
42,150
Desktop
12,800 users
Mobile
18,400 users
Compare two metrics side by side with visual bars and percentage difference.
Monthly insights on launches, conversion, and messaging.
An email capture card with heading, subtext, and optional consent checkbox.
For individuals getting started
For growing teams
For large organizations
Pricing plan card with title, price, period, features list, and CTA button. Includes popular or featured variant with highlight.
Product Lead
Building products that help teams ship faster. Previously at Stripe and Notion.
18
Projects
4
Teams
96
Reviews
User profile card with avatar, name, bio, stats, and action buttons.
Full card skeleton with animated shimmer sweep.
Trusted by teams at
A trusted by section with logo tiles for customer validation.
Tracks your cursor with a glowing spotlight that reveals detail.
Interactive card that tracks the cursor with a glowing spotlight highlight.
A cursor-following glow that reveals depth and detail.
Card with a cursor-following spotlight glow and soft hover lift.
Review the release plan and timelines.
Approve final UI and interaction polish.
Deploy and monitor the rollout.
Stacked cards that fan out on hover and focus for a layered showcase.
Monthly recurring revenue
Active workspaces
Conversion rate
Metric display card with value, label, optional icon, and change indicator.
Animated statistics card with counting animation. Supports prefix/suffix, decimal values, and multiple visual variants.
Collect signals and shape the experience roadmap.
Layer content to guide focus with clarity.
Reveal the stacked narrative as the user scrolls.
Sticky stacked cards that reveal as the user scrolls.
Momentum
Keep the highest impact stories on top.
Updated yesterday
Impact
Capture the moments worth celebrating.
Updated last week
Focus
Swipe to save the items that matter most.
Updated 2 hours ago
1 of 3
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.”
A card component for displaying customer testimonials with avatar, name, role, company, quote text with quotation styling, and optional star rating.
A responsive 3D tilt effect with depth and motion.
3D perspective card that tilts based on cursor position.
Month view calendar with selectable days and event dots.
Track your key metrics and performance
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
Pinterest-style masonry layout using CSS columns for cards of varying heights.
Custom scrollbar styling with overflow detection and gradient fade indicators.
Drag the divider to resize. This layout adapts to different content needs.
Two-pane layout with a resizable divider, supporting horizontal and vertical orientations.
Left panel
Drag the handle to resize the layout and keep key metrics visible.
Right panel
Keep a running feed alongside the main workspace.
Resizable side by side panels with a drag handle.
Simple bar chart with labels, values, and optional horizontal layout.
Basic bar chart with vertical or horizontal layouts.
Overview of key metrics
Wrapper component with title, subtitle, legend slot, and responsive chart area.
Ring chart with centered value and label.
This week
Avery Cole
Growth team
Jordan Lee
Product
Sam Rivera
Design
Morgan Patel
Ops
Ranked list with positions, avatars, scores, and optional trend badges.
Line chart with multiple series, points, labels, and optional area fill.
Monthly recurring revenue
Active subscribers
Retention rate
Avg order value
Responsive grid of stat cards with configurable column counts.
Active users
34.2k
Sessions
8.6k
Tiny sparkline or bar chart for inline data visualization.
Pie or donut chart with legend and percentage labels.
Weekly revenue
$42.8k
Active trials
1,204
Compact metric row with a tiny inline sparkline.
Weekly installs
9.2k
Bounce rate
28%
Inline mini chart for quick trend snapshots in tables or cards.
Invoice sent
2 min agoInvoice #1234 was sent to client@example.com
New user registered
15 min agojohn@example.com signed up for a trial
Payment received
1 hour ago$2,400 from Acme Inc
Project deployed
3 hours agoVertical activity feed with icon, title, description, timestamp, and connector line.
Monthly recurring revenue
Counts up to a target value with Framer Motion easing, optional prefix and suffix, and locale formatting.
Monthly calendar grid with events and navigation.
Progress ring with animated stroke and optional value label, built with SVG and Framer Motion.
Desktop
684
Mobile
416
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 |
|---|---|---|---|
| Projects | 3 | Unlimited | Unlimited |
| Realtime analytics | |||
| Seats | 1 | 10 | Unlimited |
| Automations | Basic | Advanced | Custom |
| SLA |
Feature comparison table for plans or tiers with boolean checkmarks.
Spreadsheet style grid with selectable cells, editing, and resizable columns.
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 |
Sortable, filterable data table with pagination and search.
| 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
Table with column filters, filter badges, and row count display.
| Churn | 12 | -0.4% |
| Signups | 1,204 | +6% |
| Trials | 418 | +2% |
| Upgrades | 96 | -1% |
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 |
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 |
Table with sortable column headers, sort direction indicators, and optional striped rows.
Definition list with term and description pairs in a card layout.
Included
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.
Checklist list with checkmark icons, title, and optional descriptions.
Permissions, audit trails, and access policies in one place.
Trigger workflows whenever teams ship or publish updates.
Build rich surfaces that still feel fast and focused.
Micro interactions that keep every page feeling premium.
Responsive grid of feature items with icons, titles, descriptions, and optional links.
Horizontal filter bar with search input, filter chips, and clear all button.
Audit analytics
Validate tracking coverage
InsightsRefresh onboarding
Align steps with new flow
ProductDesign usage report
Build flexible data views
DesignQA billing checks
Verify invoices
OpsLaunch summary
Share outcome with team
CommsDraggable kanban board with columns and cards powered by DnD Kit.
Design system audit
Review component library
DesignAPI integration
Connect to backend services
DevUser research
Conduct interviews
ResearchDraggable 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
Grid layout of label and value pairs for settings or details.
Definition list for metadata with horizontal or vertical layouts.
Storage used
of 100 GB
API calls
of 10,000 limit
Team seats
Horizontal bar with label, value, and filled percentage visualization.
Monthly active users
Net revenue
Large number display with count animation, unit suffix, and optional comparison value.
Goal 80%
Last 30 days
Target 90%
Circular metric display with percentage ring and centered label.
Page Views
124,892
vs last week
Bounce Rate
32.4%
vs last month
Metric display with trend line visualization and period comparison label.
Users
Uptime
Revenue
Animates from a starting number to a target value using requestAnimationFrame. Supports prefix, suffix, decimals, and multiple easing functions.
Formatted price with currency symbol, strikethrough for discounts, and multiple size variants.
Billing
Save more when billed annually
Segmented toggle for switching between billing cadences.
Progress bar with animated indicator and customizable value.
Linear progress bar with label, value, and optional segments.
Multi-segment progress bar for category breakdowns.
Generates a QR code from a value string with configurable size and error correction.
Selected rating: 3.5
Rating display with half steps, custom icons, and optional readonly mode.
Visual divider between content sections.
Shimmering skeleton placeholders with text, avatar, card, and image variants.
Share insights
Capture the key learnings
Draft recap
Summarize next steps
Review with team
Align on priorities
Drag and drop list for reordering custom list items with a grab handle.
Active users
34.2k
Churn rate
2.1%
Tiny inline chart for displaying quick trends in compact spaces.
Monthly revenue
$54,200
Previous
$49,800
Active accounts
1,280
Previous
1,315
Before and after comparison with trend indicator.
New signups
Since last period
Churn rate
Since last period
Revenue today
Since last period
Compact metric display with value, label, trend indicator, and optional icon slot.
Status badge with colored dot and label for online, offline, pending, or error states.
Status indicator pill with tooltip for operational, degraded, and outage states.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,250.00 | ||
Styled table component with header, body, and row variants.
Align stakeholders and goals
Finalize interface and states
Release to early adopters
Vertical timeline with animated steps and status styling for sequences or schedules.
Discovery call
Aug 02Align on goals, scope, and constraints.
Prototype handoff
Aug 05Deliver clickable flows for review.
Stakeholder review
Aug 09Collect feedback and approval notes.
Launch prep
Aug 12Finalize assets and rollout plan.
Vertical timeline with connector lines, icons, and date labels.
Scroll to see all 120 items (real component virtualizes for performance)
Windowed list for efficient rendering of long datasets.
Our users span across the world
Interactive SVG world map visualization.
Planned maintenance
We will deploy updates at 02:00 UTC.
Full-width dismissible banner for announcements with icon and close button.
New workspace update is ready for review
Dismissible banner with icon, message, and optional action button.
Small badge component with multiple style variants for labels or tags.
Grouped badges for displaying multiple status labels or tags.
Information callout box with tip, info, warning, and danger variants. Supports collapsible content.
Once reports are generated, they will show up here.
Centered empty state placeholder with icon, text, and optional action.
Information
Success
Warning
Error
Contextual alert component for inline feedback with icon, title, and action support.
Small count badge with 99+ overflow, dot variant, and optional pulse animation.
Bell icon button with unread badge and dropdown list of notifications.
Dropdown panel for notifications with unread count, mark as read, and clear all actions.
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 row with icon, title, description, timestamp, and unread indicator.
Sync complete
Your dashboard is ready with the latest data.
Toast notification with variants, auto-dismiss, and optional action button.
Account
Profile details
Workspace
Team preferences
Launch
Invite collaborators
Multi-step progress indicator with horizontal and vertical layouts.
Corner badge showing discount percentage or custom sale text with configurable position.
Configurable skeleton loader with text, avatar, and card layouts.
Range slider with track, range, and thumb components.
Bottom-positioned lightweight notification with optional action button and auto-dismiss.
Avatar with image fallback and a small status indicator badge.
Badge with dot indicator for success, warning, error, info, and pending states.
Simple status indicator dot with online, offline, busy, and away variants. Supports pulse animation.
Toggle switch for boolean settings, built with accessible primitives.
Stackable toast notifications with auto-dismiss, variants, and slide-in animation.
Accessible tooltip with provider, trigger, and content primitives.
Rich tooltip with arrow, delay, and multiple positions.
Word by word
Everyproductdeservesacinematicrevealmoment
Letter by letter
Reveal each character
From below
Animatefromanydirectionyouprefer
Reveal text by letter or word as it enters the viewport.
Animated gradient text with flowing motion and semantic color stops. Uses Framer Motion for a smooth, continuous sweep.
Seamless transitions between product highlights.
Morphs between words with a smooth blur and slide transition.
Scrambles characters before resolving into a crisp headline, perfect for dramatic reveals.
Everywordarriveswithitsownmomentasyouscroll
Words reveal sequentially as users scroll through your content
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.
Highlights words in sequence as the user scrolls.
Animates text typing character by character with configurable speed, delay, and an optional blinking cursor.
Types and deletes phrases in a loop with a blinking cursor for a lively terminal effect.
Rotates through a list of words with a smooth flip animation.
Move your cursor to reveal a soft glow that follows your movement.
A neutral white glow for a cleaner, minimal aesthetic.
Cursor spotlight overlay with spring follow and blur control.
Pattern
A dot grid with gentle wave motion for depth.
Animated dot grid background with a soft wave motion.
Atmosphere
Streaking highlights that add motion and energy to sections.
Animated meteor streaks background for hero sections or cards.
Animated SVG blob that morphs between shapes with smooth transitions. Perfect for dynamic backgrounds or visual interest.
Texture
Subtle noise that gives sections a premium tactile feel.
Subtle animated grain overlay for sections and cards.
Scroll layers
Guide attention with layered motion and smooth scroll timing.
Foreground content moves with a faster cadence.
Background shapes drift softly to create dimension.
The message stays centered as the scene shifts.
Layered parallax section with foreground and background motion.
Interactive particle field with floating particles that respond to mouse movement. Optional connection lines for a network effect.
Animated connector beams that link nodes with a flowing motion trail.
A rotating gradient border draws attention to key content.
Hover to pause the animation for better readability.
Animated conic gradient border wrapper with configurable radius and hover pause.
Realtime insights
Track core metrics as they update.
Smart alerts
Stay ahead with instant notifications.
Workflow automation
Connect tools without the overhead.
Design review
Collaborate on the final polish.
Realtime insights
Track core metrics as they update.
Smart alerts
Stay ahead with instant notifications.
Workflow automation
Connect tools without the overhead.
Design review
Collaborate on the final polish.
An infinite scrolling strip with premium cards for logos, partners, or testimonials.
Click to trigger confetti
Animated confetti effect component perfect for celebrations. Includes a ready-to-use ConfettiButton wrapper.
Triggered confetti celebration effect that bursts outward from the center.
Spotlight
Move your cursor to reveal the highlight and bring focus to key details.
A spotlight section that tracks the cursor and reveals content inside the highlight.
Craft beautiful interfaces with accessible primitives.
Optimized for speed and minimal bundle size.
3D card component that flips on hover or click to reveal content on the back. Supports both horizontal and vertical flip animations.
A mouse-controlled particle system with dynamic connections and physics interactions.
A button with a gooey liquid effect that deforms and morphs on hover.
Flexible infinite scrolling marquee component for text, images, or any content. Supports vertical and horizontal scrolling with customizable speed and fade effects.
Morph
The card morphs its silhouette to keep the focus on your content.
Card that morphs its shape and silhouette on hover for dynamic emphasis.
Animated text component featuring gradient flow, shimmer, glitch, and reveal effects.
Parallax
Layered shapes move at different speeds to create depth as you scroll.
Velocity
1.3x
Depth
240px
Cadence
Smooth
Layered parallax scroll card that offsets shapes at different speeds.
Parallax
Hover to reveal depth and motion.
A 3D card that tilts on hover with multi-layer parallax depth effects.
Animated pulsing ring effect for notification indicators and status badges.
Scroll progress indicator with bar and circle variants.
Skeleton loading shimmer animation for placeholder content while data loads.
Spotlight cursor
Move your cursor to reveal a soft accent glow that tracks every motion.
Spotlight overlay that follows the cursor to reveal a soft accent glow.
Bouncing dots loader with staggered animation for inline loading states.
Circular orbiting dots that create a dynamic spinner.
Loading your dashboard
Full-page loading overlay with spinner and optional message.
Circular pulse loader with a soft expanding ring.
Card skeleton placeholder with shimmer animation and configurable rows.
Skeleton block with a sweeping shimmer highlight.
Animated bars that mimic a sound wave while loading.
16:9 Video
Video placeholder
1:1 Square
4:3 Landscape
Container that maintains a specified aspect ratio with common presets for video, photo, and square.
Now playing
Studio Session
UI only audio player with play/pause, progress, volume control, and time display.
Release notes
See the latest tokens and components ready for production.
Customer story
Highlight creative teams and the work they are shipping.
Marketing
Line up hero visuals and messaging before launch day.
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
Image carousel with smooth fade transitions, autoplay, keyboard navigation, and dot indicators.
Screenshot mockup frames for phone, tablet, laptop, and browser.
Analytics
Track every handoff with a clear visual timeline.
Reports
Pull key metrics into a single scrollable story.
Workflow
Drag through updates without losing your place.
Review
Momentum scrolling keeps long galleries smooth.
Launch
Highlight the big moments with premium cards.
A horizontal gallery with drag to scroll momentum and springy cards.
Before and after image comparison with a draggable slider handle.
Grid gallery with lightbox modal, keyboard navigation (arrows, escape), and thumbnail strip.
Zoomable image component with smooth magnification on interaction.
Image gallery overlay with zoom, pan, and navigation controls.
Media carousel
Image spotlight
Short reel
Podcast clip
Studio capture
Video teaser
Horizontal media carousel with navigation buttons and dot indicators.
Editorial still
Short motion clip
Audio highlight
Feature closeup
Behind the scenes
Mood board audio
Masonry style grid for mixed media items with hover overlays.
Video embed
Responsive video embed with YouTube or Vimeo links.
Responsive video container with a play overlay, aspect ratios, and YouTube or Vimeo support.
Video
Custom video player with play/pause, progress bar, volume control, and fullscreen toggle.
Everyday Cotton Tee
Subtotal
$64.00
Cart row with thumbnail, title, price, quantity controls, subtotal, and remove button.
Review your totals before placing the order.
Nimbus Travel Backpack
Qty 1
Everyday Cotton Tee
Qty 2
Steel Water Bottle
Qty 1
Shipping calculated at checkout.
Order totals panel with items list, subtotal, shipping, tax, discount line, promo input, and checkout call to action.
Price display with currency symbol, strikethrough for discounts, and optional sale badge.
E-commerce product card with image, title, price, rating stars, add-to-cart button, sale badge, and wishlist toggle.
Numeric stepper with minus/plus buttons, number input, min/max limits, and disabled states.
Read-only star rating display with filled, empty, and half stars using inline SVG, plus optional review count.
Heart icon toggle button with filled/outline states and optional count badge.
Complete checkout form with contact, shipping address, and payment sections. Supports 8 style presets with self-contained Tailwind classes.
Email and password login form with validation states, remember me, forgot password, and social login buttons.
Email input form for password reset with success and error states.
Password input with strength meter, show/hide toggle, and requirements checklist.
Registration form with password strength indicator, validation states, and terms checkbox.
Version entry with tags, date, and collapsible details.
function greet(name: string) {
return `Hello, ${name}!`;
}
console.log(greet("World"));Code display with optional highlighted HTML and a copy button.
Side by side code diff viewer with line numbers and highlights.
OpenGraph style preview card with image, title, description, and domain.
“Clarity in the UI makes every decision faster and every handoff smoother.”
Maya Patel
Design Director
Styled blockquote with attribution and optional avatar.
Retro terminal window with title bar, prompt, and typing effect.
Form with avatar upload, display name, email, and timezone fields for account management.
Dropdown for selecting a language with search filter and flag icons.
Stay informed on releases and improvements.
Release notes
Monthly updates and highlights.
Beta previews
Early access to upcoming features.
Notifications about your team and projects.
Mentions
Alerts when someone mentions you.
Task reminders
Upcoming due dates and assignments.
Grouped notification settings with toggle switches, labels, and descriptions.
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.
Card with toggles for various privacy options like profile visibility and data sharing.
Toggle group for light, dark, and system theme preferences with inline SVG icons.
Dark and light mode toggle with smooth icon transitions.
Social
20Sofia Alvarez commented on the Q1 roadmap
2 min agoMarcus Lee uploaded the new brand kit
12 min agoNia Patel closed the onboarding checklist
1 hour agoTeam Ops shared updated workspace guidelines
3 hours agoRiley Chen completed the QA pass
YesterdayActivity Feed
SocialList of activity items with avatar, action text, and timestamp.
Riley Chen published a new update
2 hours agoShared the Q1 launch checklist with the team.
Mara Lopez uploaded a preview
YesterdayAdded the revised onboarding flow screens.
Onboarding Flow
PDF, 4.2 MB
Activity Feed Item
SocialTimeline 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
Alert resolved
Latency back to normal
New signup
Avery joined the Pro plan
Weekly report ready
Dashboard summary was generated
Alert resolved
Latency back to normal
Activity Ticker
SocialLive scrolling activity feed with looping updates and optional pause on hover.
Avatar Group
SocialStacked avatar group with overflow count.
Hey, how are you?
I'm doing great! Just finished the new designs.
Nice! Can you send them over?
Chat Bubble
SocialMessage bubble with avatar, timestamp, tail pointer for left/right alignment, and read receipt dots.
Comment Box
SocialComment input with avatar, submit action, and live character count.
Jordan Lee
2 hours agoLoved the update. The new flow feels faster and clearer.
Sam Rivera
1 hour agoThis is exactly what we needed. Great work!
Comment Card
SocialCompact comment card with avatar, name, timestamp, body text, like and reply actions.
Really like the new layout. The spacing feels a lot calmer than the previous version.
Agreed. The alignment changes also make the navigation more obvious.
Can we add a note for the animation timing? It feels a bit fast on mobile.
Comment Thread
SocialNested comment display with reply action, like count, and indented replies.
Emoji picker
Choose a reaction
Recent
All emojis
Emoji Picker
SocialEmoji selection grid with category tabs and search filtering.
Thanks
@jordanlee for the feedback!
Working with AL@alexmorganALAlex Morgan@alexmorganProduct designer exploring tech and creativity. on the new feature.
Mention Badge
SocialInline @username badge with avatar and optional hover card for profile preview.
Mention Input
SocialText input that supports @mentions with dropdown suggestions and highlighted mentions.
Hey, did you see the new design specs?
Yes! They look great. Let me review them this afternoon.
Message Bubble
SocialChat message bubble with alignment, timestamp, and read receipt.
Reaction Picker
SocialEmoji reaction bar with expandable grid and recently used section.
Share Buttons
SocialRow of social share buttons for X, LinkedIn, and copy link actions.
Share Menu
SocialShare button with dropdown menu for Twitter, LinkedIn, Email, and copy link.
User Avatar
SocialUser avatar with fallback initials, status indicator, and size variants.
Overlapping avatars with overflow count.
User Avatar Group
SocialStacked avatar group with overflow count.
Sarah Chen
Marcus Johnson
Emily Rodriguez
User List
SocialList of users with avatar, name, status indicator, and action buttons.
Thanks @stevie for the feedback.
User Mention
SocialInline mention badge for linking to user profiles.
Alex Morgan
Product designer exploring the intersection of tech and creativity.
3.2k
Followers
218
Following
142
Posts
User Profile Card
SocialProfile card with avatar, name, bio, stats (followers, following, posts), and follow button.