Modern Frosted Glass UI
Modern, elegant components with a translucent glass effect
Analytics Dashboard
Track your performance metrics
User Profile
Manage your account settings
Notifications
Recent updates and alerts
Design system with reusable components
A showcase of reusable UI components with animations and interactions.
Atomic Design System
This component library follows atomic design principles, organizing components into atoms, molecules, organisms, templates, and pages.
Atoms
The basic building blocks of matter. In UI, atoms are small, self-contained components like buttons, inputs, and labels.
Button
Input
Badge
Avatar
Skeleton
Icon
Label
Divider
Molecules
Groups of atoms bonded together. Molecules are relatively simple combinations of components that function as a unit.
Form Field
Search Bar
User Badge
Stats Card
Total Revenue
$24,532
Organisms
Groups of molecules joined together to form a relatively complex, distinct section of an interface.
Task Card
Tasks
Review design proposals
highTodayTeam meeting
mediumToday
Chart Card
Weekly Revenue
Revenue trends over time
Authentication Form
Sign In
Enter your credentials to access your account
Templates
Page-level objects that place components into a layout and articulate the design's underlying content structure.
Pages
Specific instances of templates that show what a UI looks like with real representative content.
Component Organization
The components are organized in the following directory structure: