Components
CrystalTile
The foundational building block of Crystal UI — a themed surface container.
CrystalTile is Crystal's most fundamental component. It provides a themed surface with configurable elevation, padding, and border radius that automatically adapts to the active theme and crystallization.
Import
import { CrystalTile } from '@artasce/crystal-ui';Usage
<CrystalTile>
<h3>Basic Tile</h3>
<p>Content inside a themed surface.</p>
</CrystalTile>Props
CrystalTile Props
| Token | Variable | Value |
|---|---|---|
variant | 'surface' | 'elevated' | 'outline' | 'surface' |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' |
radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' |
className | string | — |
children | React.ReactNode | — |
Values update live with theme changes. Click any row to copy the CSS variable.
Variants
Surface (Default)
Standard card surface with border:
<CrystalTile variant="surface">
Default surface treatment
</CrystalTile>Elevated
Raised surface with shadow:
<CrystalTile variant="elevated">
Elevated with shadow depth from crystallization
</CrystalTile>Outline
Border-only container:
<CrystalTile variant="outline">
Minimal outline style
</CrystalTile>Theme Comparison
See how CrystalTile adapts across different themes:
Theme Comparison
diamond
Primary
Accent
onyx
Primary
Accent
garnet
Primary
Accent
sapphire
Primary
Accent
Crystallization Impact
The active crystallization preset affects CrystalTile's appearance:
| Crystallization | Radius | Shadow | Border |
|---|---|---|---|
| Clean | 8px | Subtle | 1px |
| Dream | 16px | Diffused | 1px |
| Edge | 4px | Minimal | 1px |
| Luxe | 12px | Deep | 1px |
| Bold | 8px | Prominent | 2px |