Feedback

Empty State

A compact empty state that gives the user a clear next step.

No saved views

Create a view when you need one.

1import { Button, EmptyState } from "@hyzrui/core";
2 
3export function Example() {
4  return <EmptyState title="No saved views" description="Create a view when you need one." action={<Button size="sm">Create view</Button>} />;
5}

Installation

Install the primitive source, then keep editing it inside your app. The command names the component file you want copied.

1pnpm dlx hyzrui add empty-state

Usage

Import the component from the generated source folder and compose it with normal React props.

1import { EmptyState } from "@hyzrui/core";

1<EmptyState className="my-empty-state" />

Customization

Every primitive accepts local props and class names, then inherits design tokens from HyzrThemeProvider . Copy the file, keep the markup, and tune the CSS until it matches your product.

No saved views

Create a view when you need one.

Radius--hui-radiusControls the default corner system for buttons, inputs, cards, overlays, and nested surfaces.

Foreground--hui-foregroundControls the page and component text colors. Dark mode uses the same component source with different tokens.

Surface--hui-surfaceControls card, dialog, popover, and input surfaces.

Border--hui-borderControls separators, input strokes, card outlines, and menu edges.

Primary--hui-primaryControls the main action color and the matching foreground color for solid controls.

Font--hui-font-familyControls the font stack used by every primitive inside the provider.

Control size--hui-control-font-sizeControls the default font size for buttons, inputs, selects, tabs, command rows, and menu triggers.

Control weight--hui-font-weight-controlControls the default weight of buttons, tabs, menus, badges, and compact actions.

Control height--hui-control-heightControls the default field and trigger height across forms and navigation.

Button height--hui-button-heightControls button height independently from form fields.

Button padding--hui-button-paddingControls horizontal button spacing without changing the text size.

Card padding--hui-card-paddingControls card, dialog, sheet, drawer, and panel interior spacing.

Border width--hui-border-widthControls default edge width for controls, cards, tables, and floating panels.

Focus width--hui-focus-widthControls keyboard focus outline thickness.

Motion duration--hui-transition-durationControls shared hover timing for controls and surfaces.

Hover lift--hui-hover-liftControls subtle hover lift for raised styles.

Overlay--hui-overlayControls dialog, sheet, drawer, and command overlay strength.

Floating offset--hui-floating-offsetControls menu, command, popover, and hover-card distance from the trigger.

Source fileEdit src/lib/hyzrui/components/empty-state.tsx directly once the primitive is installed in your app.

Local classTarget .hui-empty-state for local refinements that should not become global theme tokens.

1import { defineHyzrTheme } from "@hyzrui/core";
2 
3export const theme = defineHyzrTheme({
4  id: "product",
5  density: "comfortable",
6  radius: 10,
7  shadow: 0.08,
8  colors: {
9    background: "#fbfbfc",
10    foreground: "#09090b",
11    surface: "#ffffff",
12    border: "#e4e4e7",
13    primary: "#18181b",
14    primaryForeground: "#ffffff",
15  },
16  typography: {
17    controlSize: 14,
18    controlWeight: 500,
19    headingWeight: 680,
20  },
21  sizing: {
22    controlHeight: 38,
23    buttonHeight: 34,
24    buttonPadding: 14,
25    cardPadding: 18,
26  },
27  borders: {
28    radius: 10,
29    radiusSm: 7,
30    radiusLg: 16,
31    width: 1,
32    focusWidth: 2,
33  },
34  motion: {
35    duration: 150,
36    hoverLift: 0,
37    hoverMix: 5,
38  },
39});

See the customization guide for the full theme shape, style presets, scoped CSS overrides, and source-edit workflow.

Examples

These examples show the same primitive in realistic combinations and states.

Empty inbox

Always give an empty state a clear next action so it doesn't feel like a dead end.

Your inbox is empty

When teammates send you messages, they'll show up here.

1import { Inbox } from "lucide-react";
2import { Button, EmptyState } from "@hyzrui/core";
3 
4export function EmptyInbox() {
5  return (
6    <EmptyState
7      icon={<Inbox size={20} />}
8      title="Your inbox is empty"
9      description="When teammates send you messages, they'll show up here."
10      action={<Button size="sm">Compose message</Button>}
11    />
12  );
13}

API Reference

Props are intentionally small. For deeper changes, edit the component source file directly.

Prop	Type	Default	Description
`className`	string	-	Adds classes to the copied component without replacing the default structure.
`children`	React.ReactNode	-	The rendered content for compound or wrapper components.
`...props`	HTMLAttributes	-	Forwards native element props such as id, aria attributes, and event handlers.
`title`	string	-	Title shown in the empty state.
`description`	string	-	Supporting copy.
`icon`	React.ReactNode	-	Optional icon.
`action`	React.ReactNode	-	Optional action control.