Feedback Components
Toast notifications, alerts, progress indicators, and loading spinners.
CrystalToaster (Recommended)
The primary toast system, powered by Sonner. Automatically adapts to the current Crystal theme (dark/light detection via DARK_THEMES).
Setup
Add CrystalToaster once in your layout or providers file:
import { CrystalToaster } from '@artasce/crystal-ui';
export default function Layout({ children }) {
return (
<>
{children}
<CrystalToaster />
</>
);
}Trigger Toasts
import { toast } from '@artasce/crystal-ui';
toast.success('Saved!', { description: 'Your changes have been saved.' });
toast.error('Error', { description: 'Something went wrong.' });
toast.info('Note', { description: 'This is informational.' });
toast.warning('Warning', { description: 'Be careful!' });
toast('Default toast');CrystalToaster Props
| Token | Variable | Value |
|---|---|---|
position | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'bottom-right' |
richColors | boolean | true |
closeButton | boolean | true |
duration | number | 4000 |
Values update live with theme changes. Click any row to copy the CSS variable.
Crystal Token Mapping
CrystalToaster maps toast styles to Crystal tokens:
| Toast Type | Background Token | Text |
|---|---|---|
| Default | crystal-background-secondary | crystal-foreground-primary |
| Success | crystal-status-success | white |
| Error | crystal-status-error | white |
| Warning | crystal-status-warning | black |
| Info | crystal-accent-primary | white |
Legacy Toast (Radix)
A Radix-based toast system is also available but CrystalToaster is preferred:
// Legacy — prefer CrystalToaster + toast instead
import { Toaster, useToast } from '@artasce/crystal-ui';Alert
Static alert banner for inline messages. Supports crystallization prop.
import { Alert, AlertTitle, AlertDescription } from '@artasce/crystal-ui';
import { InfoIcon, AlertTriangleIcon } from 'lucide-react';
<Alert>
<InfoIcon />
<AlertTitle>Note</AlertTitle>
<AlertDescription>Crystal themes are now free for everyone.</AlertDescription>
</Alert>
<Alert variant="destructive">
<AlertTriangleIcon />
<AlertTitle>Error</AlertTitle>
<AlertDescription>Failed to save changes.</AlertDescription>
</Alert>Alert Props (Crystal additions)
| Token | Variable | Value |
|---|---|---|
variant | 'default' | 'destructive' | 'default' |
crystallization | CrystalCrystallization | — |
Values update live with theme changes. Click any row to copy the CSS variable.
Progress
Determinate progress bar. Uses Crystal primary color for the indicator.
import { Progress } from '@artasce/crystal-ui';
<Progress value={66} />Progress
<Progress />The indicator width is controlled via translateX transform based on the value prop (0-100).
Spinner
Animated loading indicator using lucide-react Loader2 icon.
import { Spinner } from '@artasce/crystal-ui';
<Spinner />
<Spinner className="size-8 text-primary" />Uses animate-spin and includes role="status" and aria-label="Loading" for accessibility.
Import All
import {
CrystalToaster, toast,
Alert, AlertTitle, AlertDescription,
Progress,
Spinner,
} from '@artasce/crystal-ui';