new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

empty/usage

18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Empty component imports

The Empty component exports six named imports: Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, and EmptyTitle. Import them from @/components/ui/empty

EmptyMedia usage with icon variant

To display an icon in the empty state, use EmptyMedia with the icon variant and pass the icon component as a child: ```tsx <EmptyMedia variant="icon"> <Icon /> </EmptyMedia> ```

EmptyMedia usage with Avatar

To display an avatar in the empty state, use EmptyMedia with the default variant and pass an Avatar component as a child: ```tsx <EmptyMedia> <Avatar> <AvatarImage src="..." /> <AvatarFallback>CN</AvatarFallback> </Avatar> </EmptyMedia> ```

EmptyContent usage example

Use the EmptyContent component to display interactive content such as a button, input, or link: ```tsx <EmptyContent> <Button>Add Project</Button> </EmptyContent> ```

EmptyTitle example

Example of EmptyTitle component: <EmptyTitle>No data</EmptyTitle>

EmptyDescription example

Example of EmptyDescription component: <EmptyDescription>You do not have any notifications.</EmptyDescription>

EmptyContent example

Example of EmptyContent component: <EmptyContent><Button>Add Project</Button></EmptyContent>

Empty component basic usage example

Basic Empty component usage: <Empty><EmptyHeader><EmptyMedia variant="icon"><Icon /></EmptyMedia><EmptyTitle>No data</EmptyTitle><EmptyDescription>No data found</EmptyDescription></EmptyHeader><EmptyContent><Button>Add data</Button></EmptyContent></Empty>

Empty component with InputGroup

You can add an InputGroup component to the EmptyContent component to include input fields in the empty state.

EmptyMedia with icon variant example

Example of EmptyMedia with icon variant: <EmptyMedia variant="icon"><Icon /></EmptyMedia>

EmptyMedia with avatar example

Example of EmptyMedia with avatar: <EmptyMedia><Avatar><AvatarImage src="..." /><AvatarFallback>CN</AvatarFallback></Avatar></EmptyMedia>

EmptyTitle basic example

To display a title in the empty state: ```tsx <EmptyTitle>No data</EmptyTitle> ```

Empty component import statement

Import the Empty component and all its sub-components using: import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"

Empty component basic usage example

Basic empty state structure: ```tsx <Empty> <EmptyHeader> <EmptyMedia variant="icon"> <Icon /> </EmptyMedia> <EmptyTitle>No data</EmptyTitle> <EmptyDescription>No data found</EmptyDescription> </EmptyHeader> <EmptyContent> <Button>Add data</Button> </EmptyContent> </Empty> ```

EmptyMedia icon variant example

To use the icon variant in EmptyMedia: ```tsx <EmptyMedia variant="icon"> <Icon /> </EmptyMedia> ```

EmptyMedia with Avatar example

To display an avatar in EmptyMedia using the default variant: ```tsx <EmptyMedia> <Avatar> <AvatarImage src="..." /> <AvatarFallback>CN</AvatarFallback> </Avatar> </EmptyMedia> ```

EmptyDescription basic example

To display a description in the empty state: ```tsx <EmptyDescription>You do not have any notifications.</EmptyDescription> ```

EmptyContent with button example

To add content like a button to the empty state: ```tsx <EmptyContent> <Button>Add Project</Button> </EmptyContent> ```

Give your agent this brain