Primitives
Core atomic components that form the foundation of Crystal UI
CrystalTile
The core fractal primitive. Renders progressively more detail as scale increases: dot, micro, icon, chip, mini-card, card, panel, detail.
CrystalCard
Themed card container with header, body, and footer slots. Supports multiple padding sizes.
Small Padding
padding='sm'
Compact card content for tight spaces.
Default Padding
padding='md'
Standard card with medium padding.
With Footer
Has header, body, and footer
Large padding variant with footer slot.
CrystalChip
Compact element for tags, filters, or status indicators. Five variants and three sizes.
Variants
Sizes
With Close
Clickable primitives
Pass onClick and a card, tile or chip becomes a button: focusable, and Enter or Space activates it. Surfaces are open by default; pass bordered for an edge.
Filter chips
Selected: All
Clickable card and tile
Quarterly report
Open it with a click, Enter or Space
No border: the fill gives the card its edge.
Opened: 0
CrystalGlassCard
Frosted glass card with backdrop blur. Supports hover lift and optional glow effects.
Default
Translucent background with backdrop blur.
Hoverable
Lifts on hover with border transition.
Glow on Hover
Adds a violet glow shadow on hover.
CrystalGradientText
Inline gradient text using Crystal accent tokens. Polymorphic via the as prop.
Intelligent
Build something extraordinary with Crystal.
$4.2M ARRCrystalAmbientGlow
Subtle animated background glow effect. Three variants: full (page bg), spot (behind element), and corner.
CrystalLinkUnderline
Animated underline link effect. Pure CSS animation with configurable color, thickness, and direction.