Layout
Structure and organize content — cards, accordions, steppers, alerts, and layout primitives.
The fundamental content container. Glass gradient background with hover lift animation. Every card gets rounded-3xl, backdrop-blur-xl, and a depth shadow that intensifies on hover. Use variant="outline" for lighter secondary containers.
Default (Subtle)
Full glass gradient with hover lift. Primary container for dashboard panels, feature blocks, or data groups.
Outline
Lighter glass for secondary content. Less visual weight — use inside other cards or for supporting information.
Collapsible content sections for FAQs, documentation, or detailed settings. Rounded container with glass hover on triggers. Use when you have multiple sections of content that users browse selectively.
Visual divider with glass-appropriate opacity. Use between sections or with a label for logical grouping like "OR" in auth forms.
Content above the divider
Content below the divider
Alternative content
Multi-step process indicator. The active step indicator uses glass gradient with the same depth treatment as cards. Perfect for onboarding wizards, deployment pipelines, or setup flows.
Keyboard shortcut indicators with glass keycap styling. Use inline with text to teach users about available shortcuts in your interface.
Contextual banners with glass background and semantic coloring. Use to communicate important status changes, warnings, or success confirmations that persist on the page.