Components
- AccordionDone
- AlertDone
- Alert DialogDone
- Aspect RatioNo Change
- AvatarDone
- BadgeDone
- BreadcrumbDone
- ButtonDone
- Button GroupDone
- CalendarNo Change
- CardDone
- CarouselDone
- ChartNo Change
- CheckboxDone
- CollapsibleNo Change
- ComboboxDone
- CommandDone
- Context MenuDone
- Data TableDone
- Date PickerDone
- DialogDone
- DrawerDone
- Dropdown MenuDone
- EmptyNo Change
- FieldNo Change
- React Hook FormNo Change
- Hover CardDone
- InputDone
- Input GroupDone
- Input OTPDone
- ItemDone
- KbdDone
- LabelDone
- MenubarDone
- Navigation MenuDone
- PaginationDone
- PopoverDone
- ProgressDone
- Radio GroupDone
- ResizableNo Change
- Scroll AreaNo Change
- SelectDone
- SeparatorDone
- SheetDone
- SidebarNo Change
- SkeletonDone
- SliderDone
- SonnerDone
- SpinnerDone
- SwitchDone
- TableNo Change
- TabsDone
- TextareaDone
- ToastDone
- ToggleDone
- Toggle GroupDone
- TooltipDone
- TypographyDone
Toasts (Sonner)
Toast layout now mirrors Alert exactly—square frame, frosted glass, mono headline, and variant-colored accent bar with matching icons.
Interactive demo
Trigger notifications
Each toast shares the Alert component’s structure, colors, and icon treatments.
Installation
pnpm dlx shadcn@latest add @omni/sonner
Usage
import { Toaster } from "@/components/ui/sonner"
import { toast } from "sonner"<Toaster position="top-right" />
toast.error("Incident", {
description: "Deployments in Osaka are paused.",
icon: <TriangleAlert className="size-3.5" />,
})