Files
TicketingSystem/client/src/components/ui/sonner.tsx
T
josh 17697ecf3b Phase 1c: shadcn/ui primitives + CSS-variable theme tokens
- components.json, @/* path alias in tsconfig + vite config
- Tailwind config: CSS-variable-backed color tokens, animation plugin
- index.css: :root (light) and .dark token blocks (slate base) — currently
  pinned to dark via class on <html> so visual appearance is unchanged
- src/lib/utils.ts: cn() helper (clsx + tailwind-merge)
- src/components/ui/: 16 primitives — button, input, label, textarea, badge,
  avatar, separator, skeleton, dialog, dropdown-menu, select, tabs, tooltip,
  sonner, alert-dialog, popover
- Nothing replaced yet; existing components still in place. Used in Phase 3.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-18 15:35:19 -04:00

25 lines
753 B
TypeScript

import { Toaster as Sonner } from 'sonner';
type ToasterProps = React.ComponentProps<typeof Sonner>;
const Toaster = ({ ...props }: ToasterProps) => {
return (
<Sonner
theme="dark"
className="toaster group"
toastOptions={{
classNames: {
toast:
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
},
}}
{...props}
/>
);
};
export { Toaster };