@hyebin4334/admin-ui

shadcn-based admin UI components — personal experiment for AI tooling (Figma Make / v0 / Cursor).

16 components extracted from a PoC for evaluating code → Figma → AI workflow.

Install

pnpm add @hyebin4334/admin-ui
# or npm / yarn

Requires React 19+ and Tailwind CSS 4+.

Usage

import "@hyebin4334/admin-ui/globals.css";
import { Button, Card, CardHeader, CardTitle } from "@hyebin4334/admin-ui";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello</CardTitle>
      </CardHeader>
      <Button>Click</Button>
    </Card>
  );
}

Components

Avatar · Badge · Button · ButtonGroup · Card · Checkbox · Field · Input · Label · Pagination · Select · Separator · Skeleton · Spinner · Switch · Table · Tabs · Textarea

Example pages (reference)

미리 만들어둔 어드민 페이지 패턴 — AI 도구(Figma Make / v0 / Cursor)가 참고해서 비슷한 화면을 생성하도록 활용.

import {
  ProductListPage,
  ProductCreatePage,
  UserListPage,
} from "@hyebin4334/admin-ui/examples";

• ProductListPage — 상품 조회 (Tabs + Filter Card + Table + Pagination)
• ProductCreatePage — 상품 등록 (Section Card 여러 개 + Form)
• UserListPage — 회원 목록 (Inline search + Table + Pagination)

Build & publish

pnpm install
pnpm build               # tsup → dist/ (ESM + CJS + .d.ts)
pnpm publish --access public

License

MIT