Empty

Un état vide avec icône, titre et description.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

No messages

New messages will show up here.

empty.tsx

'use client';import { InboxIcon } from 'lucide-react';import {  Empty,  EmptyDescription,  EmptyHeader,  EmptyMedia,  EmptyTitle,} from '@/components/ui/empty';export default function Demo() {  return (    <Empty animated className="w-80 border">      <EmptyHeader>        <EmptyMedia variant="icon">          <InboxIcon />        </EmptyMedia>        <EmptyTitle>No messages</EmptyTitle>        <EmptyDescription>New messages will show up here.</EmptyDescription>      </EmptyHeader>    </Empty>  );}

Animation

Avec animated, il monte de 8 px en fondu à son apparition (320 ms, CSS @starting-style).

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add empty

Ou depuis le paquet npm :

import { Empty } from '@whoa-studio/ui/empty';

Exports : Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription.