Page statefeedback

Section state wrapper for loading, slow, ready, empty, error and partial states with skeleton kinds and an async retry.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/page-state

의존 아이템button empty locale skeleton style

Default

page-state-demo.tsx

"use client";
import * as React from "react";import { Button } from "@/components/ui/button";import { PageState, type PageStateName } from "@/components/ui/page-state";
const names: PageStateName[] = ["loading", "ready", "empty", "error", "partial"];
export default function PageStateDemo() {  const [state, setState] = React.useState<PageStateName>("loading");  return (    <div className="flex flex-col gap-4">      <div className="flex flex-wrap gap-2">        {names.map((name) => (          <Button key={name} size="sm" variant={name === state ? "default" : "outline"} onClick={() => setState(name)}>            {name}          </Button>        ))}      </div>      <PageState state={state} skeleton="list" onRetry={() => setState("loading")}>        <p className="text-sm">Loaded content</p>      </PageState>    </div>  );}