Klarhimmel UI
Klarhimmel ↗

Empty state

Stable

What a list or page shows when there is nothing yet: an icon, one sentence and one next step.

npx shadcn add @klarhimmel/empty-state @klarhimmel/button

When to use

  • Use for

    A first-run list, an empty search, a cleared inbox.

  • Not for

    Errors. Use a Banner. Not for loading. Use Skeleton.

  • Pairs with

    Button, Card, lists and tables.

Preview

No bookings yet

Bookings appear here as soon as a guest reserves a room.

empty-state.tsx
import { Inbox } from 'lucide-react';
import { Theme } from '@/components/klarhimmel/theme/style';
import { Button } from '@/components/klarhimmel/ui/button';
import { EmptyState } from '@/components/klarhimmel/ui/empty-state';

export default function Example() {
  return (
    <Theme theme="brand">
      <EmptyState icon={<Inbox />} title="No bookings yet" action={<Button>Add a booking</Button>}>
        Bookings appear here as soon as a guest reserves a room.
      </EmptyState>
    </Theme>
  );
}

Install

Import

import { EmptyState } from '@/components/klarhimmel/ui/empty-state';
Lands in
components/klarhimmel/ui/empty-state.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

Examples

  • Search

    No rooms match "balcony sauna"

    Try fewer words, or clear the filters to see all 12 rooms.

    import { SearchX } from 'lucide-react';
import { Button } from '@/components/klarhimmel/ui/button';
import { EmptyState } from '@/components/klarhimmel/ui/empty-state';

export default function EmptyStateSearch() {
  return (
    <EmptyState
      level={2}
      icon={<SearchX />}
      title={'No rooms match "balcony sauna"'}
      description="Try fewer words, or clear the filters to see all 12 rooms."
      action={<Button variant="secondary">Clear filters</Button>}
    />
  );
}

  • Compact

    No messages from guests

    New messages show up here. You will also get an email.

    import { Card } from '@/components/klarhimmel/ui/card';
import { EmptyState } from '@/components/klarhimmel/ui/empty-state';

export default function EmptyStateCompact() {
  return (
    <Card className="w-full max-w-md p-2">
      <EmptyState level={4} title="No messages from guests" description="New messages show up here. You will also get an email." />
    </Card>
  );
}

API reference

PropTypeDefaultDescription
titlestring-Required. The heading.
description / childrenReactNode-One sentence under the title.
iconReactNode-A lucide icon element.
actionReactNode-The next step, usually a Button.
level2 | 3 | 43Heading level, to fit the page outline.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
TabMoves to the action button, if there is one
Enter / SpaceActivates the action

The title is a heading (level 3 by default; set level to fit the page outline). The icon is hidden from assistive tech.

Accessibility