NotificationCard

NotificationCard forma parte del apartado «Patterns» del kit. Composiciones listas para usar: KPIs, perfiles, precios, eventos, posts y más.

Instalación#

bash

pnpm add @tsukira/ui

tsx

import { NotificationCard } from "@tsukira/ui"; export function Ejemplo() {  return <NotificationCard />;}

Los ejemplos detallados de NotificationCard están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.

NotificationCardPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>

Prop	Tipo	Default	Descripción
`icon`	`ReactNode`	—	Icono (emoji o SVG).
`tone`	`'brand' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'ink'`	—	Tono del icono + acentos.
`title`*	`ReactNode`	—	Título principal.
`description`	`ReactNode`	—	Descripción.
`time`	`ReactNode`	—	Marca de tiempo (ej. "hace 5 min").
`unread`	`boolean`	—	Sin leer — pinta puntito y resalta.
`action`	`ReactNode`	—	Acción a la derecha (botón).
`onDismiss`	`(() => void)`	—	Cerrar (X) — si se pasa, muestra botón de descartar.