SIT UI

Social Infra Tech 디자인 시스템 UI 컴포넌트 라이브러리입니다. 디자인 가이드를 따르는 일관된 UI 컴포넌트를 제공합니다.

• 📘 Storybook에서 컴포넌트 보기
• 🔁 Live Demo

1. 설치

npm install sit-ui

2. 전역 스타일 설정

디자인 시스템은 전역 타이포그래피, 기본 스타일 등을 포함합니다. 앱 진입점에서 GlobalStyle을 반드시 설정해 주세요.

import { createRoot } from 'react-dom/client';
import { GlobalStyle } from 'sit-ui/globals';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <>
    <GlobalStyle / >
      <App / >
      </>
      );

디자인 토큰

colors, typography 등의 디자인 토큰은 다음 경로에서 import 가능합니다.

import { colors, typography } from 'sit-ui/tokens';

3. 컴포넌트 사용

import {
  Button,
  Checkbox,
  Dropdown,
  FormTextField,
  Icon,
  Select,
  Text,
  TextField
} from 'sit-ui';

import { colors, typography, type Typography } from 'sit-ui/tokens';

import { PLACEMENT } from 'sit-ui/ui/Dropdown';
import type { OptionType } from 'sit-ui/ui/Select';

function Example() {
  return (
    <>
      <Text typography="title2" color="purple1">sit-ui</Text>

      <Button>Click Me</Button>

      <Checkbox checked onChange={() => console.log('clicked!')}>Check me</Checkbox>

      <Select
        options={[{ label: 'Group', options: [{ value: 'A' }, { value: 'B' }] }]}
        onChange={(v: OptionType) => console.log(v)}
      />

      <TextField placeholder="Enter password" />

      <FormTextField label="Email" helpText={error && 'Invalid email format'}>
        <TextField placeholder="[email protected]" />
      </FormTextField>

      <Dropdown
        placement={'topRight'}
        menu={{ items: [{ label: 'Item 1', key: '1' }] }}
      >
        <Button>Open</Button>
      </Dropdown>
    </>
  );
}