FeedbackAvailable

Empty

An empty state with context and a useful next action.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/empty.json

Usage

Import the component into your project and keep the source code under your control.

tsx
'use client';

import Link from 'next/link';

import {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from '@/components/ui/empty';
import { Button } from '@/components/ui/button';

export default function Demo() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyTitle>No saved components</EmptyTitle>
        <EmptyDescription>
          Save a component from the catalog to see it here.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button
          nativeButton={false}
          render={<Link href="/en/docs/components/button" />}
        >
          Browse Button
        </Button>
      </EmptyContent>
    </Empty>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • Distinguish loading, progress, success, error and empty data as appropriate. Keep messages understandable without color.
  • The indicator needs no hover. Only actions and dismiss controls receive focus. Respect reduced motion.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
string?Extends the root visual styles without changing its semantics.
ReactNode?Compose the exported subcomponents as shown in the runnable example.

Accessibility

Rules that should remain intact when adapting the component to a product.

Keep visible text labels and the semantic HTML shown in the example.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.