Skip to Content
ComponentsFoundationFoundation Components

Foundation Components

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

특징

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

컴포넌트 목록 (75개)

Form (폼) - 26개

폼 입력 및 컨트롤 컴포넌트들입니다.

  • Button - 버튼 컴포넌트
  • ButtonGroup - 버튼 그룹 컴포넌트
  • Calendar - 캘린더 컴포넌트
  • Checkbox - 체크박스 컴포넌트
  • ColorPicker - 색상 선택 컴포넌트
  • Combobox - 검색 가능한 선택 컴포넌트
  • DatePicker - 날짜/월/연도 선택 컴포넌트
  • Field - 폼 필드 레이아웃 컴포넌트
  • FileUpload - 파일 업로드 컴포넌트
  • Form - 폼 컨테이너 컴포넌트
  • FormItem - 라벨 + 컨트롤 조합 폼 아이템
  • Input - 텍스트 입력 컴포넌트
  • InputGroup - 입력 + 애드온 조합 컴포넌트
  • InputNumber - 숫자 입력 컴포넌트
  • InputOTP - OTP/인증코드 입력 컴포넌트
  • Label - 라벨 컴포넌트
  • Lookup - 조회(검색) 입력 컴포넌트
  • NativeSelect - 네이티브 select 래퍼 컴포넌트
  • RadioGroup - 라디오 버튼 그룹 컴포넌트
  • Select - 선택 드롭다운 컴포넌트
  • Slider - 슬라이더 컴포넌트
  • Switch - 토글 스위치 컴포넌트
  • Textarea - 여러 줄 텍스트 입력 컴포넌트
  • TimePicker - 시간 선택 컴포넌트
  • Toggle - 토글 버튼 컴포넌트
  • ToggleGroup - 토글 버튼 그룹 컴포넌트

Layout (레이아웃) - 9개

페이지 및 콘텐츠 레이아웃 컴포넌트들입니다.

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

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

  • Avatar - 아바타 컴포넌트
  • Badge - 뱃지 컴포넌트
  • Carousel - 캐러셀 슬라이드 컴포넌트
  • Chart - 차트 유틸리티 컴포넌트
  • Empty - 빈 상태 표시 컴포넌트
  • FullCalendar - 풀 캘린더 컴포넌트
  • Image - 이미지 컴포넌트
  • Item - 리스트 아이템 컴포넌트
  • Kanban - 칸반 보드 컴포넌트
  • Kbd - 키보드 키 표시 컴포넌트
  • Progress - 진행률 표시 바 컴포넌트
  • Skeleton - 로딩 스켈레톤 컴포넌트
  • Spinner - 로딩 스피너 컴포넌트
  • Step - 진행 단계 표시 컴포넌트
  • Table - 테이블 컴포넌트
  • TimelineChart - 타임라인 차트 컴포넌트
  • Tree - 트리 컴포넌트
  • Typography - 타이포그래피 컴포넌트

Feedback (피드백) - 11개

사용자 피드백 및 오버레이 컴포넌트들입니다.

  • Alert - 알림 메시지 컴포넌트
  • AlertDialog - 확인/경고 대화상자 컴포넌트
  • Dialog - 모달 대화상자 컴포넌트
  • Drawer - 드로어 컴포넌트
  • HoverCard - 호버 카드 컴포넌트
  • Modal - 모달 컴포넌트
  • OverlayLoading - 오버레이 로딩 컴포넌트
  • Popover - 팝오버 컴포넌트
  • Sheet - 사이드 시트 컴포넌트
  • Sonner - 토스트 알림 컴포넌트
  • Tooltip - 툴팁 컴포넌트

Navigation (네비게이션) - 8개

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

기타 - 3개

  • ActionButtons - 액션 버튼 그룹 컴포넌트
  • Editor - 리치 텍스트 에디터 컴포넌트
  • IFrame - 인라인 프레임 컴포넌트

빠른 시작

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>로그인</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
ZipCodeKRAccordion