Staaarter

Empty State

A feature section framed like any other (badge, heading, description) that leads into a dashed-border empty-state panel: an icon in a rounded tile, a title, a short description, and a single call-to-action button.

By Staaarter Team
Feature
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/empty-state-feature.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature93.tsx instead.

Usage

The file also exports feature93Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature93, feature93Demo } from "@/components/blocks/feature/feature93";

export default function Page() {
  return <Feature93 {...feature93Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringnoneBadge label above the heading.
headingReactNodenoneSection heading.
descriptionstringnoneSupporting copy under the heading.
emptyIconLucideIconnoneIcon shown in the empty-state panel's rounded tile.
emptyTitlestringnoneTitle inside the empty-state panel.
emptyDescriptionstringnoneShort supporting copy inside the empty-state panel.
cta{ label: string; href: string }noneSingle call-to-action button inside the panel.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • Fully static server component, no client-side state.
  • The CTA renders as a real link via `Button`'s `render` prop (`render={<Link href={cta.href} />}`), not a functional submit action.
  • The empty-state panel uses a dashed border to visually distinguish it from the solid-border cards used elsewhere in the category.