Generates toast notifications.
Toast
Installation
npx shadcn@latest add @caprice/toastnpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, getSchema, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { cva, cx: cn } = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };export { getSchema };Copy and paste the following code into your project.
'use client';import { Toast as ToastPrimitive } from '@base-ui/react/toast';export const useToastManager = ToastPrimitive.useToastManager;export const createToastManager = ToastPrimitive.createToastManager;const toastManager = createToastManager();/** * Provides a context for creating and managing toasts. * * Documentation: [Caprice UI Toast](https://caprice-ui.com/docs/components/toast) * * API Reference: [Base UI Toast](https://base-ui.com/react/components/toast#provider) */export namespace Provider { export type Props = React.ComponentProps<typeof ToastPrimitive.Provider>;}export function Provider({ ...props }: Provider.Props) { return ( <ToastPrimitive.Provider data-slot="toast-provider" toastManager={toastManager} {...props} /> );}/** * A portal element that moves the viewport to a different part of the DOM. * By default, the portal element is appended to `<body>`. * Renders a `<div>` element. * * Documentation: [Caprice UI Toast](https://caprice-ui.com/docs/components/toast) * * API Reference: [Base UI Toast](https://base-ui.com/react/components/toast#portal) */export namespace Portal { export type Props = React.ComponentProps<typeof ToastPrimitive.Portal>;}export function Portal({ ...props }: Portal.Props) { return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />;}/** * A container for the contents of a toast. * Renders a `<div>` element. * * Documentation: [Caprice UI Toast](https://caprice-ui.com/docs/components/toast) * * API Reference: [Base UI Toast](https://base-ui.com/react/components/toast#content) */export namespace Content { export type Props = React.ComponentProps<typeof ToastPrimitive.Content>;}export function Content({ ...props }: Content.Props) { return <ToastPrimitive.Content data-slot="toast-content" {...props} />;}export function List() { const { toasts } = useToastManager(); return ( <Portal> <Viewport> {toasts.map((toast) => ( <Root key={toast.id} toast={toast}> <Content /> </Root> ))} </Viewport> </Portal> );}/** * A container viewport for toasts. * Renders a `<div>` element. * * Documentation: [Caprice UI Toast](https://caprice-ui.com/docs/components/toast) * * API Reference: [Base UI Toast](https://base-ui.com/react/components/toast#viewport) */export namespace Viewport { export type State = ToastPrimitive.Viewport.State; export type Props = React.ComponentProps<typeof ToastPrimitive.Viewport>;}export function Viewport({ ...props }: Viewport.Props) { return <ToastPrimitive.Viewport data-slot="toast-viewport" {...props} />;}/** * Groups all parts of an individual toast. * Renders a `<div>` element. * * Documentation: [Caprice UI Toast](https://caprice-ui.com/docs/components/toast) * * API Reference: [Base UI Toast](https://base-ui.com/react/components/toast#root) */export namespace Root { export type State = ToastPrimitive.Root.State; export type Props = React.ComponentProps<typeof ToastPrimitive.Root>; export type ToastObject = ToastPrimitive.Root.ToastObject;}export function Root({ ...props }: Root.Props) { return <ToastPrimitive.Root data-slot="toast" {...props} />;}/** * A title that labels the toast. * Renders an `<h2>` element. * * Documentation: [Caprice UI Toast](https://caprice-ui.com/docs/components/toast) * * API Reference: [Base UI Toast](https://base-ui.com/react/components/toast#title) */export namespace Title { export type State = ToastPrimitive.Title.State; export type Props = React.ComponentProps<typeof ToastPrimitive.Title>;}export function Title({ ...props }: Title.Props) { return <ToastPrimitive.Title data-slot="toast-title" {...props} />;}/** * A description that describes the toast. * Can be used as the default message for the toast when no title is provided. * Renders a `<p>` element. * * Documentation: [Caprice UI Toast](https://caprice-ui.com/docs/components/toast) * * API Reference: [Base UI Toast](https://base-ui.com/react/components/toast#description) */export namespace Description { export type State = ToastPrimitive.Description.State; export type Props = React.ComponentProps<typeof ToastPrimitive.Description>;}export function Description({ ...props }: Description.Props) { return <ToastPrimitive.Description data-slot="toast-description" {...props} />;}/** * Performs an action when clicked. * Renders a `<button>` element. * * Documentation: [Caprice UI Toast](https://caprice-ui.com/docs/components/toast) * * API Reference: [Base UI Toast](https://base-ui.com/react/components/toast#action) */export namespace Action { export type State = ToastPrimitive.Action.State; export type Props = React.ComponentProps<typeof ToastPrimitive.Action>;}export function Action({ ...props }: Action.Props) { return <ToastPrimitive.Action data-slot="toast-action" {...props} />;}/** * Closes the toast when clicked. * Renders a `<button>` element. * * Documentation: [Caprice UI Toast](https://caprice-ui.com/docs/components/toast) * * API Reference: [Base UI Toast](https://base-ui.com/react/components/toast#close) */export namespace Close { export type State = ToastPrimitive.Close.State; export type Props = React.ComponentProps<typeof ToastPrimitive.Close>;}export function Close({ ...props }: Close.Props) { return <ToastPrimitive.Close data-slot="toast-close" {...props} />;}Update the import paths to match your project setup.
Usage
import * as Toast from "@/components/caprice-ui/toast"import * as Toast from "@caprice-ui/react/toast"Examples
API Reference
Last updated on