An 8-bit styled empty state built from composable retro primitives — header, media, title, description, and content slots. Use it as a placeholder when a list, table, or view has no data yet.
"use client"; import { Button } from "@/components/ui/8bit-button"; import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle, } from "@/components/ui/8bit-empty"; export default function Default() { return ( <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro"> <Empty> <EmptyHeader> <EmptyTitle>No Characters Yet</EmptyTitle> <EmptyDescription> You haven't created any Characters yet. Get started by creating your first character. </EmptyDescription> </EmptyHeader> <EmptyContent> <div className="flex flex-wrap justify-center gap-6"> <Button>Create Character</Button> <Button variant="outline">Import Character</Button> </div> </EmptyContent> </Empty> </div> ); }
Part of 8bitcn — browse the full library on 21st.dev.