2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tca4,import { Children, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; const VARIANTS = { plain: "", card: "rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]", dashed: "rounded-[22px] border-[1.5px] border-dashed border-black/[0.12] bg-neutral-50/60 transition-colors hover:border-black/[0.2] hover:bg-neutral-50 dark:border-white/[0.14] dark:bg-white/[0.02] dark:hover:border-white/[0.24]", } as const; const TILE = "flex items-center justify-center rounded-2xl bg-white text-neutral-600 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.07),inset_0_-2px_0_rgb(0_0_0/0.04),0_1px_2px_rgb(0_0_0/0.08),0_2px_6px_-2px_rgb(0_0_0/0.08)] dark:bg-neutral-800 dark:text-neutral-300 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.1),0_1px_2px_rgb(0_0_0/0.4)] [&_svg]:size-5"; export interface EmptyStateProps extends ComponentProps<"div"> { /** plain: no container · card: a white card · dashed: a drop-zone style outline. */ variant?: keyof typeof VARIANTS; } export function EmptyState({ variant = "plain", className, ...props }: EmptyStateProps) { return

; } /** One icon on a raised tile, or several fanned out behind each other. */ export function EmptyStateIcon({ className, children, ...props }: ComponentProps<"div">) { const icons = Children.toArray(children); if (icons.length < 2) { return (

{children}

); } const [left, middle, right] = icons; return (

{left}

{right && (

{right}

)}

{middle}

); } export function EmptyStateTitle({ className, ...props }: ComponentProps<"h3">) { return

; } export function EmptyStateDescription({ className, ...props }: ComponentProps<"p">) { return

; } export function EmptyStateActions({ className, ...props }: ComponentProps<"div">) { return

; } export default EmptyState; 2e:T66bd,

import { Children, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

const VARIANTS = {
  plain: "",
  card: "rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]",
  dashed:
    "rounded-[22px] border-[1.5px] border-dashed border-black/[0.12] bg-neutral-50/60 transition-colors hover:border-black/[0.2] hover:bg-neutral-50 dark:border-white/[0.14] dark:bg-white/[0.02] dark:hover:border-white/[0.24]",
} as const;

const TILE =
  "flex items-center justify-center rounded-2xl bg-white text-neutral-600 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.07),inset_0_-2px_0_rgb(0_0_0/0.04),0_1px_2px_rgb(0_0_0/0.08),0_2px_6px_-2px_rgb(0_0_0/0.08)] dark:bg-neutral-800 dark:text-neutral-300 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.1),0_1px_2px_rgb(0_0_0/0.4)] [&_svg]:size-5";

export interface EmptyStateProps extends ComponentProps<"div"> {
  /** plain: no container · card: a white card · dashed: a drop-zone style outline. */
  variant?: keyof typeof VARIANTS;
}

export function EmptyState({ variant = "plain", className, ...props }: EmptyStateProps) {
  return <div className={cn("group/empty flex flex-col items-center px-6 py-10 text-center", VARIANTS[variant], className)} {...props} />;
}

/** One icon on a raised tile, or several fanned out behind each other. */
export function EmptyStateIcon({ className, children, ...props }: ComponentProps<"div">) {
  const icons = Children.toArray(children);
  if (icons.length < 2) {
    return (
      <div className={cn(TILE, "mb-5 size-12", className)} {...props}>
        {children}
      </div>
    );
  }
  const [left, middle, right] = icons;
  return (
    <div className={cn("relative mb-5 flex h-14 w-32 items-end justify-center", className)} {...props}>
      <div className={cn(TILE, "absolute bottom-0 size-11 -translate-x-9 -rotate-[10deg] transition-transform duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] group-hover/empty:-translate-x-11 group-hover/empty:-rotate-[14deg]")}>{left}</div>
      {right && (
        <div className={cn(TILE, "absolute bottom-0 size-11 translate-x-9 rotate-[10deg] transition-transform duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] group-hover/empty:translate-x-11 group-hover/empty:rotate-[14deg]")}>{right}</div>
      )}
      <div className={cn(TILE, "relative size-12 transition-transform duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] group-hover/empty:-translate-y-1")}>{middle}</div>
    </div>
  );
}

export function EmptyStateTitle({ className, ...props }: ComponentProps<"h3">) {
  return <h3 className={cn("text-[15px] font-semibold tracking-[-0.015em] text-neutral-950 dark:text-white", className)} {...props} />;
}

export function EmptyStateDescription({ className, ...props }: ComponentProps<"p">) {
  return <p className={cn("mt-1.5 max-w-[320px] text-[13.5px] leading-relaxed text-neutral-500 dark:text-neutral-400", className)} {...props} />;
}

export function EmptyStateActions({ className, ...props }: ComponentProps<"div">) {
  return <div className={cn("mt-5 flex flex-wrap items-center justify-center gap-2", className)} {...props} />;
}

export default EmptyState;

2f:T5a1,import { FileText, FolderPlus, ImageIcon, Plus } from "lucide-react"; import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state"; const button = "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97] [&_svg]:size-4"; const primary = `${button} bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200`; const outline = `${button} bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]`; export default function Demo() { return ( No projects yet Create a project to start deploying, or import one from your Git provider. ); } 30:T26a8,

import { FileText, FolderPlus, ImageIcon, Plus } from "lucide-react";
import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state";

const button =
  "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97] [&_svg]:size-4";
const primary = `${button} bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200`;
const outline = `${button} bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]`;

export default function Demo() {
  return (
    <EmptyState variant="card" className="w-full max-w-[420px]">
      <EmptyStateIcon>
        <FileText />
        <FolderPlus />
        <ImageIcon />
      </EmptyStateIcon>
      <EmptyStateTitle>No projects yet</EmptyStateTitle>
      <EmptyStateDescription>Create a project to start deploying, or import one from your Git provider.</EmptyStateDescription>
      <EmptyStateActions>
        <button type="button" className={primary}>
          <Plus />
          New project
        </button>
        <button type="button" className={outline}>
          Import
        </button>
      </EmptyStateActions>
    </EmptyState>
  );
}

31:Tf89,

import { Inbox } from "lucide-react";
import { EmptyState, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state";

export default function Example() {
  return (
    <EmptyState>
      <EmptyStateIcon>
        <Inbox />
      </EmptyStateIcon>
      <EmptyStateTitle>You’re all caught up</EmptyStateTitle>
      <EmptyStateDescription>New notifications will show up here.</EmptyStateDescription>
    </EmptyState>
  );
}

32:T472,import { SearchX } from "lucide-react"; import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state"; const button = "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97] [&_svg]:size-4"; const outline = `${button} bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]`; export default function Example() { return ( No results for “billing webhook” Try a different search, or clear the filters to see every event. ); } 33:T1cea,

import { SearchX } from "lucide-react";
import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state";

const button =
  "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97] [&_svg]:size-4";
const outline = `${button} bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]`;

export default function Example() {
  return (
    <EmptyState variant="card" className="w-full max-w-[420px]">
      <EmptyStateIcon>
        <SearchX />
      </EmptyStateIcon>
      <EmptyStateTitle>No results for “billing webhook”</EmptyStateTitle>
      <EmptyStateDescription>Try a different search, or clear the filters to see every event.</EmptyStateDescription>
      <EmptyStateActions>
        <button type="button" className={outline}>
          Clear filters
        </button>
      </EmptyStateActions>
    </EmptyState>
  );
}

34:T1643,

import { FileImage, FileText, FileVideo } from "lucide-react";
import { EmptyState, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state";

export default function Example() {
  return (
    <EmptyState variant="dashed" className="w-full max-w-[420px] cursor-pointer">
      <EmptyStateIcon>
        <FileImage />
        <FileText />
        <FileVideo />
      </EmptyStateIcon>
      <EmptyStateTitle>Drop files to upload</EmptyStateTitle>
      <EmptyStateDescription>
        or <span className="font-medium text-neutral-950 underline underline-offset-4 dark:text-white">browse</span> · PNG, PDF or MP4 up to 50 MB
      </EmptyStateDescription>
    </EmptyState>
  );
}

35:T5ec,import { Users } from "lucide-react"; import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state"; const button = "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97] [&_svg]:size-4"; const primary = `${button} bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200`; export default function Example() { return (

Name Role Last active

No members yet Invite your team to collaborate on projects in this workspace.

); } 36:T26cc,

import { Users } from "lucide-react";
import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state";

const button =
  "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97] [&_svg]:size-4";
const primary = `${button} bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200`;

export default function Example() {
  return (
    <div className="w-full max-w-[520px] overflow-hidden rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <div className="grid grid-cols-[2fr_1fr_1fr] border-b border-black/[0.06] px-5 py-3 text-[12px] font-medium text-neutral-500 dark:border-white/[0.08] dark:text-neutral-400">
        <span>Name</span>
        <span>Role</span>
        <span>Last active</span>
      </div>
      <EmptyState className="py-12">
        <EmptyStateIcon>
          <Users />
        </EmptyStateIcon>
        <EmptyStateTitle>No members yet</EmptyStateTitle>
        <EmptyStateDescription>Invite your team to collaborate on projects in this workspace.</EmptyStateDescription>
        <EmptyStateActions>
          <button type="button" className={primary}>
            Invite members
          </button>
        </EmptyStateActions>
      </EmptyState>
    </div>
  );
}

37:T469,import { RotateCcw, WifiOff } from "lucide-react"; import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state"; const button = "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97] [&_svg]:size-4"; const outline = `${button} bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]`; export default function Example() { return ( Couldn’t load your projects Check your connection and try again. ); } 38:T1d00,

import { RotateCcw, WifiOff } from "lucide-react";
import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "@/components/scalar-ui/empty-state";

const button =
  "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97] [&_svg]:size-4";
const outline = `${button} bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]`;

export default function Example() {
  return (
    <EmptyState>
      <EmptyStateIcon className="text-red-500 dark:text-red-400">
        <WifiOff />
      </EmptyStateIcon>
      <EmptyStateTitle>Couldn’t load your projects</EmptyStateTitle>
      <EmptyStateDescription>Check your connection and try again.</EmptyStateDescription>
      <EmptyStateActions>
        <button type="button" className={outline}>
          <RotateCcw />
          Try again
        </button>
      </EmptyStateActions>
    </EmptyState>
  );
}

29:["$","section","empty-state",{"id":"empty-state","aria-labelledby":"empty-state-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"empty-state-title","className":"sr-only","children":"Empty State"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"empty-state","gated":{"unlocked":true,"files":[{"name":"empty-state.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"import { Inbox } from \"lucide-react\";\nimport { EmptyState, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from \"@/components/scalar-ui/empty-state\";\n\nexport default function Example() {\n return (\n \n \n \n \n You’re all caught up\n New notifications will show up here.\n \n );\n}\n","html":"$31"},"no-results":{"name":"no-results.tsx","code":"$32","html":"$33"},"upload":{"name":"upload.tsx","code":"import { FileImage, FileText, FileVideo } from \"lucide-react\";\nimport { EmptyState, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from \"@/components/scalar-ui/empty-state\";\n\nexport default function Example() {\n return (\n \n \n \n \n \n \n Drop files to upload\n \n or browse · PNG, PDF or MP4 up to 50 MB\n \n \n );\n}\n","html":"$34"},"in-table":{"name":"in-table.tsx","code":"$35","html":"$36"},"error":{"name":"error.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add empty-state","shadcn":"npx shadcn@latest add https://scalarui.com/r/empty-state.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e","$L3f"]]}]

Empty States

Empty States

Default

No Results

Upload

In a Table

Error