Component
Showcase
A comprehensive collection of beautifully crafted components following Apple's design principles.
Buttons
Various button styles and states
Primary Buttons
Main call-to-action buttons
Button Variants
Different button styles for various use cases
Icon Buttons
Compact icon-only buttons
Cards
Content containers with various styles
Default Card
A basic card with shadow
This is a standard card component with default styling. Perfect for displaying content with clear hierarchy.
Glass Card
Frosted glass effect
Features a beautiful glass morphism effect with backdrop blur and transparency.
Elevated Card
Hover to see the lift effect
This card has a hover lift animation and enhanced shadow for interactive elements.
Total Revenue
$45,231.89
+20.1% from last month
Interactive Card
Click to interact
Hover and click states for interactive content.
Badges & Tags
Labels and status indicators
Badge Variations
Form Elements
Input fields and form controls
Input Fields
Various input types and states
Selection Controls
Checkboxes, radios, and toggles
Checkboxes
Radio Buttons
Toggle Switch
Alerts & Notifications
Feedback and notification components
Information
Success!
Warning
Error
Modals & Dialogs
Overlay components for focused interactions
Modal Example
Click the button to open a modal dialog
Tabs & Navigation
Organize content with tabbed interfaces
Settings
Manage your account settings and preferences
Account Information
Progress & Loading
Loading states and progress indicators
Progress Bars
Skill Levels
Loading States
Content Loading
Lists & Navigation
Various list styles and navigation components
Recent Activity
Your latest actions and updates
New user registered
John Doe created an account
2 hours ago
Payment received
$120.00 from Acme Corp
5 hours ago
New comment
Sarah commented on your post
1 day ago
Navigation Menu
Sidebar-style navigation
Miscellaneous
Additional UI components and patterns
Tooltips
Chips
Typography
Text styles and formatting components
Text Elements
Blockquote
"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs
Inline Code
Use npm install to install dependencies or yarn add package-name for specific packages.
Definition List
- SolidJS
- A declarative JavaScript library for building user interfaces.
- TypeScript
- A typed superset of JavaScript that compiles to plain JavaScript.
Avatars
User profile pictures and avatar groups
Avatar Variations
Sizes
With Status
Avatar Group
Extended Form Elements
Additional input types and form controls
Textarea
Select Dropdown
File Upload
Drop files here or click to upload
image/*, .pdf, .doc, .docx files only • Max 10MB per file • Max 5 files
Tooltips & Popovers
Contextual information on hover or click
Interactive Elements
Tooltips
Popovers
Data Table
Advanced data display with sorting and search
User Management
A sortable, searchable data table
Name | Email | Role | Status | Joined |
|---|---|---|---|---|
J | john@example.com | Admin | Active | Jan 15, 2024 |
S | sarah@example.com | Developer | Active | Feb 3, 2024 |
R | robert@example.com | Designer | Inactive | Mar 10, 2024 |
Showing 1 to 3 of 5 results