🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Empty

Empty is a component for displaying empty states when there's no content to show.

Empty states communicate to users when a view, list, search result, or content area has no data to display. This component provides a structured way to present empty states with icons, titles, descriptions, and call-to-action elements through composable subcomponents.

Use empty states to guide users toward productive actions, explain why content is missing, or provide encouragement when getting started with a feature. Effective empty states reduce confusion and improve user experience by turning moments of absence into opportunities for engagement.

Example

No results found

We couldn't find any items matching your criteria. Try adjusting your filters or search terms.

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@strongtie/design-system/empty"
import { FileQuestion } from "lucide-react"

export function EmptyDefault() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FileQuestion />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>
          We couldn't find any items matching your criteria. Try adjusting your
          filters or search terms.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Clear filters</Button>
      </EmptyContent>
    </Empty>
  )
}

Installation


npm install @strongtie/design-system

import { Empty } from "@strongtie/design-system/empty"

Components

This module exports the following components:

Empty
EmptyHeader
EmptyTitle
EmptyDescription
EmptyContent
EmptyMedia

Props

`<EmptyMedia>`

Prop	Type	Default	Description
`variant`	`"default" \| "icon" \| null`	`default`

Example

No results found

We couldn't find any items matching your criteria. Try adjusting your filters or search terms.

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@strongtie/design-system/empty"
import { FileQuestion } from "lucide-react"

export function EmptyDefault() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FileQuestion />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>
          We couldn't find any items matching your criteria. Try adjusting your
          filters or search terms.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Clear filters</Button>
      </EmptyContent>
    </Empty>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

empty

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Dropdown Menu Field

On This Page

Example Installation Components Props <EmptyMedia>Example Styling Classes Accessibility

Contribute

Empty

Empty is a component for displaying empty states when there's no content to show.

Example

No results found

We couldn't find any items matching your criteria. Try adjusting your filters or search terms.

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@strongtie/design-system/empty"
import { FileQuestion } from "lucide-react"

export function EmptyDefault() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FileQuestion />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>
          We couldn't find any items matching your criteria. Try adjusting your
          filters or search terms.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Clear filters</Button>
      </EmptyContent>
    </Empty>
  )
}

Installation


npm install @strongtie/design-system

import { Empty } from "@strongtie/design-system/empty"

Components

This module exports the following components:

Empty
EmptyHeader
EmptyTitle
EmptyDescription
EmptyContent
EmptyMedia

Props

`<EmptyMedia>`

Prop	Type	Default	Description
`variant`	`"default" \| "icon" \| null`	`default`

Example

No results found

We couldn't find any items matching your criteria. Try adjusting your filters or search terms.

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@strongtie/design-system/empty"
import { FileQuestion } from "lucide-react"

export function EmptyDefault() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FileQuestion />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>
          We couldn't find any items matching your criteria. Try adjusting your
          filters or search terms.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Clear filters</Button>
      </EmptyContent>
    </Empty>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

empty

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Dropdown Menu Field

On This Page

Example Installation Components Props <EmptyMedia>Example Styling Classes Accessibility

Contribute