Skip to Content
ComponentsFoundationFoundation Components

Foundation Components

중립적인 기본 디자인이 적용된 Foundation 컴포넌트 라이브러리입니다.

특징

  • 중립적 브랜딩: 모든 프로젝트에 적용 가능한 중립적 디자인
  • 완전한 커스터마이징: Tailwind CSS로 자유로운 스타일링
  • 접근성 우선: WCAG 2.1 AA 기준 준수
  • TypeScript 지원: 완벽한 타입 정의 제공
  • shadcn/ui 기반: 검증된 컴포넌트 아키텍처

컴포넌트 카테고리

Basic (기본) - 6개

기본적인 UI 요소들입니다.

Form (폼) - 5개

폼 입력 컴포넌트들입니다.

Layout (레이아웃) - 4개

페이지 레이아웃 컴포넌트들입니다.

  • Card - 카드 컨테이너
  • Container - 레이아웃 컨테이너
  • Grid - 그리드 시스템
  • Stack - 수직/수평 스택

Feedback (피드백) - 5개

사용자 피드백 컴포넌트들입니다.

Data Display (데이터 표시) - 4개

데이터 시각화 컴포넌트들입니다.

Navigation (네비게이션) - 3개

페이지 탐색 컴포넌트들입니다.

빠른 시작

CLI로 컴포넌트 추가

# 단일 컴포넌트 추가
npx @vortex/cli add button --package foundation
 
# 여러 컴포넌트 한 번에 추가
npx @vortex/cli add button input card --package foundation

컴포넌트 사용

import { Button, Input, Card } from "@vortex/ui-foundation";
 
export default function App() {
  return (
    <Card>
      <h2>로그인</h2>
      <Input placeholder="이메일" />
      <Input type="password" placeholder="비밀번호" />
      <Button variant="primary">로그인</Button>
    </Card>
  );
}

설치 및 설정

1. 패키지 설치

npm install @vortex/ui-foundation
# 또는
pnpm add @vortex/ui-foundation

2. Tailwind CSS 설정

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@vortex/ui-foundation/dist/**/*.js",
  ],
  theme: {
    extend: {},
  },
};

3. 스타일 import

// src/main.tsx or src/App.tsx
import "@vortex/ui-foundation/dist/style.css";

커스터마이징

Foundation은 중립적인 디자인을 제공하므로 Tailwind CSS로 자유롭게 커스터마이징할 수 있습니다.

// 기본 스타일
<Button>클릭</Button>
 
// 커스텀 클래스 추가
<Button className="bg-blue-600 hover:bg-blue-700">
  커스텀 버튼
</Button>

다음 단계

Last updated on
TabsBadge