Getting Started

Installation


npm install @grannyshot/ui
# or
pnpm add @grannyshot/ui
# or
yarn add @grannyshot/ui

Setup

1. Import Styles

Import the CSS file once at the root of your application:


import '@grannyshot/ui/styles.css'

2. Dark Mode (Optional)

<html> 요소에 class="dark"를 추가하면 다크모드가 적용됩니다. next-themes 등과 호환됩니다.


<html class="dark">
  ...
</html>

3. Add Providers (Optional)

명령형 API (toast, dialog, drawer)를 사용하려면 Provider를 추가하세요:


import { ToastProvider, DialogProvider, DrawerProvider } from '@grannyshot/ui'
 
export default function App() {
  return (
    <>
      {/* your app */}
      <ToastProvider placement="bottom-end" />
      <DialogProvider />
      <DrawerProvider />
    </>
  )
}

4. Use Components


import { Button, Input, Field } from '@grannyshot/ui'
 
function LoginForm() {
  return (
    <form>
      <Field label="Email" required>
        <Input placeholder="you@example.com" />
      </Field>
      <Button variant="primary">Sign in</Button>
    </form>
  )
}

Using with Tailwind CSS

grannyshot-ui는 Tailwind CSS로 빌드되어 있어서 Tailwind 프로젝트에서 충돌 없이 사용할 수 있습니다.


import '@grannyshot/ui/styles.css'

컴포넌트에 Tailwind 클래스를 추가하면 오버라이드됩니다:


<Button variant="primary">Submit</Button>
<Button variant="primary" className="rounded-full">Submit</Button>
 
<div className="grid grid-cols-2 gap-4 p-6">
  <Card>...</Card>
  <Card>...</Card>
</div>

Tailwind dark: 프리픽스도 추가 설정 없이 바로 동작합니다:


// grannyshot-ui 다크모드 — 자동 적용
<Button variant="primary">Submit</Button>
 
// 내 코드에서 dark: — 바로 동작
<div className="bg-white dark:bg-gray-900">
  <p className="text-gray-900 dark:text-gray-100">Hello</p>
</div>

CSS 파일 비교

파일	용도
`styles.css`	기본 — Tailwind 프로젝트 또는 단독 사용
`styles-no-preflight.css`	다른 CSS 프레임워크와 함께 사용 (Tailwind reset 제거)

Import Paths

Path	Description
`@grannyshot/ui`	All components, styles, tokens, and utilities
`@grannyshot/ui/react`	React components only
`@grannyshot/ui/styles`	Style recipes (tv) only
`@grannyshot/ui/tokens`	Design tokens
`@grannyshot/ui/utils`	cn utility
`@grannyshot/ui/styles.css`	CSS file
`@grannyshot/ui/styles-no-preflight.css`	CSS file (reset 제거)