Components
Sonner
Toast notifications.
Use Toaster and the toast helper to show transient notifications.
import { Button, toast, Toaster } from '@tile-ui/react';
export default function SonnerDemo() {
return (
<div className="component-preview__stack">
<div className="button-group">Registry install
pnpm dlx shadcn@latest add @tile-ui/sonnerPackage usage
import { Toaster } from '@tile-ui/react';
<Toaster position="bottom-right" />Highlights
- Six types
- Positions and duration
- Rich colors and themes
Registry dependencies
| Item | Purpose |
|---|---|
sonner | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
Toaster
| Prop | Type | Default |
|---|---|---|
position | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center' | — |
duration | number | — |
closeButton | boolean | — |
richColors | boolean | — |
theme | 'light' | 'dark' | 'system' | — |