Empty State

Empty State for a useful, keyboard-friendly product interface.

Make it yours.

Install the editable source and its dependencies into your React + Tailwind project.

Scroll horizontally for long lines

pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/empty-state.json

Use it

Scroll horizontally for long lines

"use client";
import {useState} from 'react';
import {EmptyState} from '@/components/jez-ui/ui/empty-state';
import {Button} from '@/components/jez-ui/ui/button';

export default function Example(){
const [notice,setNotice]=useState('');
return <><EmptyState action={<Button onClick={()=>setNotice('Your first idea starts here.')}>Create an idea</Button>}/><p role="status">{notice}</p></>;
}

Props & types

Scroll horizontally for long lines

{
  title?: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
}

Source

View 2 source files

registry/ui/empty-state.tsx

Scroll horizontally for long lines

"use client";
import * as React from "react";
import { cn } from "./utils";
export function EmptyState({
  title = "Nothing here yet",
  description = "Create your first item to get started.",
  action,
  className,
}: {
  title?: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "grid justify-items-center gap-3 rounded-xl border border-dashed border-border px-6 py-12 text-center",
        className,
      )}
    >
      <h3 className="text-xl">{title}</h3>
      <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
      {action}
    </div>
  );
}

registry/ui/utils.ts

Scroll horizontally for long lines

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

Dependencies

clsx@2.1.1 · tailwind-merge@3.5.0

Accessibility & behaviour

Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.

Read the accessibility and performance guide →