Material
Material defines the visual surface, depth, and layering of the interface. It provides a consistent way to distinguish surfaces and establish hierarchy across the interface.
Small Size
8px Corner RadiusFlat
Zero depth shadow (Elevation 0) — flush surface
Default
Soft subtle ambient shadow (Elevation 1) — subtle card lift
Elevated
Floating depth shadow (Elevation 2) — raised card component
Floating
High depth overlay shadow (Elevation 3) — popovers and dialogs
Medium Size
12px Corner RadiusFlat
Zero depth shadow (Elevation 0) — flush surface
Default
Soft subtle ambient shadow (Elevation 1) — subtle card lift
Elevated
Floating depth shadow (Elevation 2) — raised card component
Floating
High depth overlay shadow (Elevation 3) — popovers and dialogs
Large Size
16px Corner RadiusFlat
Zero depth shadow (Elevation 0) — flush surface
Default
Soft subtle ambient shadow (Elevation 1) — subtle card lift
Elevated
Floating depth shadow (Elevation 2) — raised card component
Floating
High depth overlay shadow (Elevation 3) — popovers and dialogs
Basic Usage
A simple material container with default size (medium) and elevation (default):
import { Material } from '@versaui/ui/components/Material';
<Material className="p-6">
<h3>Material Container</h3>
<p>Adaptive surface with elevation depth shadow.</p>
</Material>Corner Radius Types
Control whether the Material surface uses standard pixel corner radii or adaptive control corner radii:
// Default corner radius (standard size-based tokens)
<Material cornerRadiusType="default">Default Radius</Material>
// Control corner radius (adapts dynamically per active theme)
<Material cornerRadiusType="control">Control Radius</Material>
// Custom override corner radius
<Material cornerRadius="24px">Custom Radius</Material>Component Source Code & Installation
You can add the material component to your project manually:
1
Install the following dependencies:
npm
pnpm
yarn
bun
npm install class-variance-authority clsx tailwind-merge2
Copy and paste the following code into your project.
Material.tsx
cn.ts
Loading source code...
3
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Material Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content rendered inside the material container. |
size | 'small' | 'medium' | 'large' | 'medium' | Size variant controlling corner radius and backdrop blur intensity. |
elevation | 'flat' | 'default' | 'elevated' | 'floating' | 'default' | Elevation depth shadow level. |
cornerRadiusType | 'default' | 'control' | 'default' | Type of corner radius token mapping to apply. |
cornerRadius | string | — | Explicit corner radius CSS override value (e.g., "16px"). |
surfaceColor | string | — | Custom surface background color CSS override. |
className | string | '' | Additional CSS classes. |
style | CSSProperties | {} | Inline style overrides. |