kagadmodyaa

Empty 03

New
Empty 02Not Found 01

Three 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).

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/empty-03.json

Needs 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 { Empty03 } from '@/components/empty-03/empty-03'

export default function Page() {
  return (
    <main>
      <Empty03 />
    </main>
  )
}

Files

What the command adds to your project, and where.

  • components/empty-03/empty-03.tsx

    The 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, Empty, Native Select, Spinner, Textarea.

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

See all 3 Empty states blocks