EmptyState

Responsive empty state with clear primary and secondary actions, labelled structure, and reduced-motion entrance.

InterfaceSource ready8 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/empty-state.json
Interactive preview
Interface

No projects yet

Create a project to collect references, decisions, and files in one place.

Install with the CLI

# adds EmptyState to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/empty-state.json

Or install the package

// npm install @uigrids/react-ui
import { EmptyState } from '@uigrids/react-ui'

export default function App() {
  return <EmptyState />
}

Props

PropTypeDefaultDescription
titlestring'No projects yet'Configures the title option.
descriptionstring'Create a project to collect references...Configures the description option.
actionLabelstring'Create project'Configures the action label option.
secondaryLabelstring'Import project'Configures the secondary label option.
iconunknownInboxConfigures the icon option.
onActionunknown-Configures the on action option.
onSecondaryunknown-Configures the on secondary option.
classNamestring''Additional CSS classes for the outer element.