Custom (Team HAI)

Tailwind Default

Transition Durations

Animation Classes

Variants

Sizes

With Icons

States

Sizes (variant=ghost, tone=default)

Variant × Tone matrix

States

실제 사용 예시 (인라인 액션)

Code

import { IconButton } from "@inus/ui";
import { Pencil, Trash2 } from "lucide-react";

// 기본 (ghost / default / md)
<IconButton icon={Pencil} aria-label="편집" />

// 파괴적 액션
<IconButton
  icon={Trash2}
  aria-label="삭제"
  tone="destructive"
  tooltip="이 항목을 삭제합니다"
/>

// 강조된 primary 액션
<IconButton
  icon={Check}
  aria-label="승인"
  variant="filled"
  tone="primary"
  size="lg"
/>

Variants (size=md, active=false)

Variants (active=true) — 선택 상태

Sizes (variant=primary)

With icon

Removable (X 버튼) — onRemove

Interactive — onClick (토글)

ChipGroup — single (라디오 그룹)

선택값: all

ChipGroup — multiple (다중 선택)

선택값: react, tailwind

Disabled

Code

import { Chip, ChipGroup } from "@inus/ui";
import { Filter, Tag } from "lucide-react";

// 정적 표시 (인터랙티브 X)
<Chip variant="primary">관리자</Chip>

// 토글 칩
<Chip
  variant="outline"
  active={isSelected}
  onClick={() => setIsSelected(!isSelected)}
  icon={Filter}
>
  필터
</Chip>

// 제거 가능 태그
<Chip variant="primary" onRemove={() => removeTag(tag)}>
  {tag}
</Chip>

// 라디오 그룹
<ChipGroup
  options={[
    { value: "all", label: "전체" },
    { value: "draft", label: "임시", icon: Pencil },
  ]}
  value={value}
  onChange={setValue}
/>

// 다중 선택
<ChipGroup
  multiple
  options={tagOptions}
  value={selectedTags}
  onChange={setSelectedTags}
  variant="primary"
/>

Variants

Sizes

With Icons

Error State

Checkbox

Toggle

Variants

Sizes

Interactive & Removable

Hashtag Input

Hashtag Group (Selectable)

Basic MultiSelect

Grouped MultiSelect

Limited Selection (Max 3)

With Error State

Sizes

Variants

Sizes

With Dot

Dismissible (deprecated)

Sizes

With Image & Fallback

CNJD

Avatar Group

Default Tabs

Line Tabs

Pills Tabs

Basic

Avatar Skeleton

Text Skeleton

Card Skeleton

Basic Modal

Sizes

Overlay Darkness

Usage Code

import { Modal, ModalContent, ModalHeader, ModalTitle, 
         ModalDescription, ModalBody, ModalFooter } from "@/components/ui";

<Modal open={isOpen} onOpenChange={setIsOpen}>
  <ModalContent size="lg" rounded="md">
    <ModalHeader>
      <ModalTitle>제목</ModalTitle>
      <ModalDescription>설명</ModalDescription>
    </ModalHeader>
    <ModalBody>내용</ModalBody>
    <ModalFooter>
      <Button>확인</Button>
    </ModalFooter>
  </ModalContent>
</Modal>