Sonner

crenspire-glass-ui/sonner

FreeComponent

An opinionated toast component for React.

Live preview

live · rendered by the registry

Rendered by crenspire/glass-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://glass-ui.crenspire.com/r/sonner.json

Source

components/ui/glass/sonner.tsxglass-ui.crenspire.com/r/sonner.json

1"use client"
2 
3import * as React from "react"
4import { Toaster as BaseToaster } from "@/components/ui/sonner"
5 
6/**
7 * Glass UI Toaster - Toast notifications with glassmorphism effects
8 * 
9 * The Toaster component automatically uses glass effects for all toast notifications.
10 * Toasts will have:
11 * - Glass background with backdrop blur
12 * - Glass borders and shadows
13 * - Color-coded borders for different toast types (success, error, warning, info)
14 * - Glass-styled action and cancel buttons
15 * 
16 * @example
17 * ```tsx
18 * import { Toaster } from "@/components/ui/glass"
19 * import { toast } from "sonner"
20 * 
21 * // Add to your root layout
22 * export default function RootLayout({ children }) {
23 *   return (
24 *     <html>
25 *       <body>
26 *         {children}
27 *         <Toaster />
28 *       </body>
29 *     </html>
30 *   )
31 * }
32 * 
33 * // Use in your components
34 * toast.success('Success!', { description: 'Action completed' })
35 * toast.error('Error!', { description: 'Something went wrong' })
36 * toast.warning('Warning!', { description: 'Please review' })
37 * toast.info('Info', { description: 'Useful information' })
38 * 
39 * // With custom styling (additional glass variants)
40 * toast('Custom Toast', {
41 *   description: 'With custom glass effect',
42 *   className: 'glass-frosted backdrop-blur-[var(--blur-frosted)]',
43 * })
44 * ```
45 */
46export { BaseToaster as Toaster }
47

What it pulls in

npm packages

next-themes
sonner

Other registry items

sonner

Files it writes

lib/utils.ts
lib/glass-utils.ts
lib/hover-effects.ts
app/globals.css
components/ui/glass/sonner.tsx

More from crenspire/glass-ui

All 49 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Accordionaccordion	crenspire/glass-ui	Components	Free	2 deps · 5 files
Alertalert	crenspire/glass-ui	Components	Free	no deps · 5 files
Alert Dialogalert-dialog	crenspire/glass-ui	Components	Free	1 dep · 5 files
Avataravatar	crenspire/glass-ui	Components	Free	1 dep · 5 files
Badgebadge	crenspire/glass-ui	Components	Free	no deps · 5 files
Breadcrumbbreadcrumb	crenspire/glass-ui	Components	Free	2 deps · 5 files
Buttonbutton	crenspire/glass-ui	Components	Free	1 dep · 5 files
Button Groupbutton-group	crenspire/glass-ui	Components	Free	no deps · 5 files