Carregando…

Notification Card

Display

Persistent notification card with icon slot, title, timestamp and message — for feed/list layouts.

Instalação via CLI

$ npx kikitocn add notification-card

Interno:

@/lib/utils

Exemplo de uso

Notification CardExample.tsx

import { NotificationCard } from "@/components/ui/cn/notification-card/NotificationCard";

export function NotificationCardExample() {
  return (
    <NotificationCard title="Título" intent="primary">
      Notification Card
    </NotificationCard>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`title*`	`string`	—	Título da notificação
`children*`	`ReactNode`	—	Mensagem/corpo
`date`	`Date`	`new Date()`	Data/hora exibida como timestamp
`icon`	`ReactNode`	—	Ícone exibido no slot à esquerda
`intent`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'primary'`	Cor semântica do slot de ícone
`unread`	`boolean`	`false`	Mostra o indicador de não-lida (dot)
`onClick`	`(e: MouseEvent) => void`	—	Handler de clique (torna o card focável)
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…