Park UI

Usage

import { createToaster } from '@ark-ui/react/toast'
import { XIcon } from 'lucide-react'
import { Button } from '~/components/ui/button'
import { IconButton } from '~/components/ui/icon-button'
import * as Toast from '~/components/ui/toast'

const [Toaster, toast] = createToaster({
  placement: 'top-end',
  render(toast) {
    return (
      <Toast.Root>
        <Toast.Title>{toast.title}</Toast.Title>
        <Toast.Description>{toast.description}</Toast.Description>
        <Toast.CloseTrigger asChild>
          <IconButton size="sm" variant="link">
            <XIcon />
          </IconButton>
        </Toast.CloseTrigger>
      </Toast.Root>
    )
  },
})

export const Demo = () => (
  <>
    <Button
      variant="outline"
      onClick={() => toast.create({ title: 'Title', description: 'Description' })}
    >
      Create Toast
    </Button>
    <Toaster />
  </>
)

Installation

Add Component

Insert code snippet into your project. Update import paths as needed.

import { Toast } from '@ark-ui/react/toast'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { toast } from 'styled-system/recipes'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(toast)

export const Root = withProvider(styled(Toast.Root), 'root')
export const CloseTrigger = withContext(styled(Toast.CloseTrigger), 'closeTrigger')
export const Description = withContext(styled(Toast.Description), 'description')
export const Group = withContext(styled(Toast.Group), 'group')
export const Title = withContext(styled(Toast.Title), 'title')

export interface RootProps extends ComponentProps<typeof Root> {}
export interface CloseTriggerProps extends ComponentProps<typeof CloseTrigger> {}
export interface DescriptionProps extends ComponentProps<typeof Description> {}
export interface GroupProps extends ComponentProps<typeof Group> {}
export interface TitleProps extends ComponentProps<typeof Title> {}

import { Toast } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { toast } from 'styled-system/recipes'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(toast)

export const Root = withProvider(styled(Toast.Root), 'root')
export const CloseTrigger = withContext(styled(Toast.CloseTrigger), 'closeTrigger')
export const Description = withContext(styled(Toast.Description), 'description')
export const Group = withContext(styled(Toast.Group), 'group')
export const Title = withContext(styled(Toast.Title), 'title')

export interface RootProps extends ComponentProps<typeof Root> {}
export interface CloseTriggerProps extends ComponentProps<typeof CloseTrigger> {}
export interface DescriptionProps extends ComponentProps<typeof Description> {}
export interface GroupProps extends ComponentProps<typeof Group> {}
export interface TitleProps extends ComponentProps<typeof Title> {}

Not yet available

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

import { toastAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'

export const toast = defineSlotRecipe({
  className: 'toast',
  slots: toastAnatomy.keys(),
  base: {
    root: {
      background: 'bg.default',
      borderRadius: 'l3',
      boxShadow: 'lg',
      minWidth: 'xs',
      p: '4',
      position: 'relative',
      _open: {
        animation: 'slideInFromBottom 0.2s ease-out',
      },
      _closed: {
        animation: 'slideOutFromBottom 0.2s ease-out',
      },
    },
    group: {
      p: '4',
    },
    title: {
      color: 'fg.default',
      fontWeight: 'semibold',
      textStyle: 'sm',
    },
    description: {
      color: 'fg.muted',
      textStyle: 'sm',
    },
    closeTrigger: {
      position: 'absolute',
      top: '3',
      right: '3',
    },
  },
})