@material-shadcn/ui

Figma Dashboard 디자인에서 추출한 디자인 토큰 + React 컴포넌트 라이브러리.

Stone/Neutral 컬러 팔레트 기반, Geist 폰트, --ms-* CSS 커스텀 프로퍼티 시스템.

Install

npm install @material-shadcn/ui

Setup

/* globals.css */
@import "@material-shadcn/ui/tokens.css";
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-sans/style.min.css');

Usage

import { MSButton, MSCard, MSCardHeader, MSBadge } from "@material-shadcn/ui";
import { colorStone, spacing, typography } from "@material-shadcn/ui/tokens";

Components

| Component | Description | |---|---| | MSButton | primary / secondary / outline / ghost, 3 sizes | | MSCard / MSCardHeader | Card container with optional header + action | | MSBadge | outline / filled / success / danger / info | | MSAvatar / MSAvatarStack | Avatar with fallback, stacked group | | MSProgressBar | Progress bar with 4 color variants | | MSNavLink / MSNavSection | Sidebar navigation | | MSStatusDot | Status indicator dot + label | | MSLegend | Chart legend with color indicators | | MSSeparator | Horizontal / vertical separator | | MSPagination | Table pagination with prev/next |

Tokens

CSS 변수(--ms-*)와 TypeScript 상수 두 가지 형태로 제공:

import { colorStone, spacing, typography } from "@material-shadcn/ui/tokens";

colorStone[900]    // "#1c1917"
spacing[4]         // "16px"
typography.heading // { fontSize: "18px", lineHeight: "28px", fontWeight: 600 }

var(--ms-stone-900)       /* #1c1917 */
var(--ms-space-4)         /* 16px */
var(--ms-text-primary)    /* #1c1917 */
var(--ms-radius-default)  /* 8px */

License

MIT