v 0.0.1-alpha
Components
Documentation
Blog
Blocks
Figma
Search
⌘K
Figma Preview
Early Access
Figma Preview
Early Access
Early Access
Figma Preview
Components
Documentation
Blog
Blocks
Figma
Getting Started
Installation
Fundamentals
Components
Animations
Getting Started
Introduction
Installation
CLI
Figma
Changelog
Installation
Nextjs
Vite
Manual
Fundamentals
Color styles
Typography
Icons
Theme
Components
Accordion
Alert
Alert Dialog
Avatar
Badge
Banner
Breadcrumb
Button
Calendar
Check Box
Code Area
Collapsible
Combobox
Command
Currency Input
Date Picker
Dialog
Divider
Drawer
Dropdown
File Upload
Form
Hover Card
Input
Label
One Time Password Field
Pagination
Password
Phone Number
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Text Area
Tooltip
Animations
Fade
Coming Soon
Infinite Scroll
Coming Soon
Pointer
Coming Soon
components
Sonner
Display non-intrusive notifications or alerts
Source Code
Sonner
Preview
Code
Loading
Installation
Install the following dependencies:
pnpm
npm
yarn
bun
Wrap your application with the
Toaster
component from
sonner
.
app/layout.tsx
Usage
Imports
/components/ui/sonner
Code
Usage
Examples
Variant
Preview
Code
Loading
Placement
Preview
Code
Loading
Position
Preview
Code
Loading
Sonner Expand
Preview
Code
Loading
Slider
Spinner