Skip to content

Loading components…

Components Installation

139 components

Backgrounds

Fluid Morph Background
Aurora Mesh Background
Blob Scene BackgroundPro
Layered Wave Hero Background
Low Poly Grid BackgroundPro
Ripple Grid Background
Dot Matrix Field
Topographic Lines BackgroundPro
Paper Grain Surface
Blueprint Grid Background

Buttons

Kinetic Button
Liquid Chrome Button
Choco Drip ButtonPro
Clay Pop Button
Brutalist Slam Button
Liquid Blob ButtonPro
Before After Split Button
Arrow Trail Button
Async State Button
Magnetic Fill ButtonPro
Split Action ButtonPro
Copy Command Button
Confirm Inline Button
Segmented Control
Toggle Switch

Bento

Bento Command Grid
Isometric Tech StackPro

Cards

Signal Card
Glassmorph Pricing CardPro
Typewriter Tooltip Card
Flip Reveal Image CardPro
Aurora Ledger Card
Editorial Article Stack
Service Index Card
Course Progress Card
Project Phase Card
Aperture Reveal CardPro
Expense Orbit Card
Editorial Book Slider
Analytics Bento CardPro
Tech Stack Matrix Card
Glare Tracking CardPro
Quick Links Card
Timeline Fold CardPro
Animated Chart CardPro
Rate Limit Status Card
Metric Dashboard CardPro
Scanner Stream CardPro
Payment Method Card
Market Pulse Card
Contribution Heatmap Card
Profile Presence Card
Testimonial Quote Card
Testimonial WallPro
Changelog Entry CardPro
Team Member Card

Effects

Halftone Cursor FieldPro
Spotlight Bento Card
Skeuo Icon Tile Row
Code Tilt Card

Navbars

Command NavbarPro
Magnetic Action DockPro
Editor Command Toolbar
Glass Sidebar NavPro
Floating Pill Navbar
Mega Menu NavbarPro
Mobile Tab Bar

Heroes

Launch HeroPro

Inputs

Field Grid Input

Dialogs

Confirm DialogPro
Focus Dialog
Morphing Media DialogPro

Breadcrumbs

Sliding Breadcrumbs
Overflow Breadcrumbs

Tooltips

Intent Tooltip
Command Tooltip

Media

Kinetic Image RevealPro
Image Comparison Lens
Masonry Gallery LightboxPro

Icon buttons

Morphing Icon Button
Hold Confirm Icon ButtonPro

Cursors

Context Cursor Label
Focus Lens CursorPro
Magnetic Snap CursorPro
Crosshair Coordinate CursorPro
Drag Hint Cursor

Animated blocks

Pulse Command Bar
Floating Signal CardsPro
Rising Image GridPro
Infinite Brand Marquee
Motion Snap CarouselPro

Text effects

Encrypted Reveal Text
Water Drop TitlePro
Video Mask WordmarkPro
Geometric Type Grid
Anime Scramble HeadlinePro
Anime Stagger Wordmark
Typography Rhythm CardsPro
Split Line Reveal
Kinetic Word RotatorPro

Sections

Product Screenshot HeroPro
Split Statement Hero
Feature Row Section
CTA Band
Announcement Bar

Logos

Logo Wall
Pausable Logo Marquee
Sample Logo Marks

Forms

OTP Input
Combobox Select
Tag Input
File DropzonePro
Password Field
Range Slider Dual
Date Range FieldPro
Textarea Autosize

Contact

Contact Form SectionPro
Newsletter Inline Form

Location

Location Card

Pricing

Pricing TablePro
Usage Pricing CalculatorPro

Navigation

Docs Sidebar TreePro
Table of Contents Rail
Pagination
Underline Tabs

Footers

Sitemap Footer
Minimal Footer

FAQ and guides

FAQ Accordion
Setup Steps

Data display

Stat Strip
Sparkline Metric
Comparison TablePro
Vertical Timeline

Overlays

Command Palette DialogPro
Drawer Sheet
Hover Preview Card

Feedback

Toast StackPro
Empty State
Skeleton Set

Components/Cards

Course Progress Card

free

A tactile course card with accessible lesson progress and optional next-lesson context.

Preview background

U1course-progress-card

Loading specimen…

Try the component. Then make it your own.

Customize preview

Canvas Padding (0)

Preview Width (100)

Inner Padding (0)

Corner Radius (12)

Scale (100)

Canvas Color

#18181f

Frame Color

#18181f

Frame Border

#42404a

Front-end accessibility

7 of 12 lessons

Accessible forms in React

58% complete

Up next

Error summaries and focus management