Orentis UI Component Guide
Comprehensive showcase of all UI components in Light Glassmorphism design system
Typography
Heading 1 (h1)
Heading 2 (h2)
Heading 3 (h3)
Heading 4 (h4)
Heading 5 (h5)
Heading 6 (h6)
This is a paragraph of text demonstrating the base body typography. It uses the Inter font at 1rem size with appropriate line height for readability.
This is muted text for secondary information, captions, or helper text.
Buttons
Button variants: Primary, Secondary, Outline, Glass. Sizes: Small, Default, Large, Block, Icon.
Forms & Inputs
Cards
User Profile
John Doe
Senior Developer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Project Stats
Notifications
New pull request #1245 from feature/auth-refactor
2 minutes ago
Code review approved
15 minutes ago
Alerts & Notifications
Success! Your changes have been saved successfully.
The data has been synchronized with the server.
Warning: Please review your settings.
Some configurations may not be compatible with the latest update.
Error: Failed to connect to database.
Please check your connection settings and try again.
Information: New feature available.
Try the new analytics dashboard for deeper insights.
Badges & Tags
Badges come in various styles: solid colors, glass, and different semantic meanings (success, warning, error, info).
Avatars
Isabella Smith
Product Designer
Avatars can display initials, images, or Phosphor icons. Available in different sizes (small, default, large).
Progress Indicators
Progress Bars
Spinners & Loaders
Skeleton Loaders
Tables
Basic Table
| # | Name | Role | Status | Actions | |
|---|---|---|---|---|---|
| 1 | John Doe | john@example.com | Administrator | Active | |
| 2 | Jane Smith | jane@example.com | Editor | Pending | |
| 3 | Bob Wilson | bob@example.com | Viewer | Inactive |
Navigation
Horizontal Navigation
Vertical Navigation (Sidebar)
Main Content Area
This is where the main content would appear when navigating through the sidebar.
Modals & Dialogs
Tooltips
Tooltips provide helpful context on hover or focus. They work on buttons, links, icons, and plain text elements.
Dropdowns & Menus
Tabs & Accordion
Tabs
Dashboard Content
This is the dashboard tab content. It would contain key metrics and overview information.
Analytics Content
Analytics and charts would go here.
Reports Content
Detailed reports and exports.
Settings Content
Configuration and preferences.
Accordion
Glassmorphism is a design trend that creates a frosted glass effect using backdrop-filter blur, semi-transparent backgrounds, and subtle borders. It creates depth and hierarchy while maintaining a modern, clean aesthetic.
Add the Phosphor Icons script to your page, then use data-phosphor-icon="icon-name" on any element. The library will automatically replace it with the appropriate SVG icon.
The design system uses CSS custom properties for all colors. Primary: Indigo (#4F46E5), Secondary: Violet (#7C3AED), Accent: Cyan (#06B6D4). All colors have light/dark variants for theming.