shadcn.io is an independent project built on shadcn/ui
A book icon, the title Get started with our guide, and a line about setting up a project. The action reads Read the documentation, with an external-link icon.
Use it when the next step is reading, not creating. If they can start immediately, use a Button that creates the project. In Vue, Ark UI does not open the guide.
Installation
Anatomy
Usage
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon"><BookOpenIcon aria-hidden="true" /></EmptyMedia>
<EmptyTitle>Get started with our guide</EmptyTitle>
<EmptyDescription>
Learn how to set up your first project and start building.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button :asChild="true" variant="link">
<a href="#">
Read the documentation<ExternalLinkIcon aria-hidden="true" data-icon="inline-end" />
</a>
</Button>
</EmptyContent>
</Empty>FAQ
Where does the external icon sit?
After the label, with data-icon="inline-end". The button's own gap separates the words and the icon, and sizes the icon for you.
What is in the header?
BookOpenIcon in EmptyMedia with variant="icon", the title "Get started with our guide", and a description about setting up the first project.
Where does the link sit?
In EmptyContent, after EmptyHeader. The content is a centered column, so the link sits under the description.
API Reference
Empty
Sets variant="icon". The rest is on the Empty page.
Button
Sets asChild and variant="link". The rest is on the Button page.
