Empty · ui.voila.dev

No projects yet

Create your first project to start receiving proposals from independent freelancers.

<Empty.Root bordered>
	<Empty.Header>
		<Empty.Media variant="icon"><CalendarPlusIcon /></Empty.Media>
		<Empty.Title>No projects yet</Empty.Title>
		<Empty.Description>Create your first project to…</Empty.Description>
	</Empty.Header>
	<Empty.Content>
		<Button>Create a project</Button>
	</Empty.Content>
</Empty.Root>

Empty.Media takes variant="icon" for a tinted icon tile, or plain children for anything else — an avatar, an illustration.

API

Empty.Root

Prop	Type	Default
`bordered`	`boolean`	`false`	Draws a dashed frame around the block, for an empty state standing on its own. Leave it off inside something that already has a border — a card, or a table body.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: empty/components/empty-root.tsx.

Empty.Content

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: empty/components/empty-content.tsx.

Empty.Description

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <p> prop. Source: empty/components/empty-description.tsx.

Empty.Header

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: empty/components/empty-header.tsx.

Empty.Media

Prop	Type	Default
`size`	`"default" \| "lg" \| "sm"`	`"default"`
`variant`	`"default" \| "icon"`	`"default"`
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: empty/components/empty-media.tsx.

Empty.Title

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <h3> prop. Source: empty/components/empty-title.tsx.