본문으로 건너뛰기
Amineslab UI

Getting started

Installation

패키지와 CSS를 연결하고 첫 컴포넌트를 렌더하는 최소 절차입니다.

최소 설정

패키지를 설치하고 앱의 전역 레이아웃에서 @amineslab/ui/styles를 한 번 불러옵니다. 컴포넌트는 @amineslab/ui, 아이콘은 @amineslab/ui/icons에서 가져옵니다.

소비 앱의 Tailwind 설정이나 소스 스캔은 바꾸지 않아도 됩니다. 패키지는 모듈을 불러오는 동안 브라우저 전역 객체를 참조하지 않아 서버 컴포넌트에서도 사용할 수 있습니다.

app/layout.tsx
import '@amineslab/ui/styles'

import { Button } from '@amineslab/ui'
import { Save } from '@amineslab/ui/icons'

export function SaveAction() {
  return <Button startIcon={<Save aria-hidden />}>저장</Button>
}

사용 기준

권장하는 사용
  • `@amineslab/ui/styles`는 앱의 전역 CSS 진입점에서 한 번 import합니다.
피해야 할 사용
  • 패키지 source 경로를 직접 참조하거나 소비 앱의 Tailwind scan에 라이브러리를 추가하지 마세요.

확인 기준

  • 공개 import 경로와 타입 선언에 맞춰 사용했는지 확인합니다.
  • 라이트·다크 모드에서 정보와 포커스를 구분할 수 있어야 합니다.
  • 390px 화면, 200% 확대, 키보드 탐색에서도 작업을 마칠 수 있어야 합니다.