Empty 01
NewA first-use empty state for a list page: a line illustration, one sentence, a primary action with an import link, and three starter templates.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/empty-01.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Empty01 } from '@/components/empty-01/empty-01'
export default function Page() {
return (
<main>
<Empty01 />
</main>
)
}Files
What the command adds to your project, and where.
components/empty-01/empty-01.tsxThe section. Import it into any page and render it; it fills the width of its parent.
It also installs the components it is built from, unless you already have them: Button, Input, Empty.
The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Empty states
- Empty 02A search with no results: the query in the heading, a spelling suggestion, filters you can remove as chips, popular searches to try instead, and a way to contact support.
- Empty 03Three states a page can land in, as one component with a variant prop: no access (with a request form), offline (retry and last-synced time) and something went wrong (with a copyable error id).