Components

@featuring-corp/components — React UI 컴포넌트, Layout Primitives, CSS Preset

@featuring-corp/components

Layout Primitives, UI 컴포넌트, CSS Preset을 제공하는 React 컴포넌트 패키지.

설치

npm install @featuring-corp/components

CSS Preset

// 앱 진입점 — Reset + Normalize + 브랜드 토큰 + CSS Layer 순서
import '@featuring-corp/components/preset/featuring';

컴포넌트 분류

분류	설명
Layout	Box, Flex, HStack, VStack, Center, Grid, Typo — `$css` prop + `render` prop 기반
Components	Button, Tag, Link, Toggle, Checkbox, Radio 등 — Context 기반 상태 공유, `$css`/`render` 지원
Legacy	Core* 컴포넌트 — `forwardRef` + `clsx` + recipe 기반 (마이그레이션 대상)
Utils	useRender, mergeProps — Base UI 유틸리티

마이그레이션 현황

기존 Core* 패턴에서 $css + render + Context 기반 패턴으로 순차 마이그레이션 중입니다.

컴포넌트	Legacy	신규
Button	`CoreButton`	`Button.Root` + `Button.Icon` + `Button.Text`	✅
IconButton	—	`IconButton`	✅
Tag	`CoreTag`	`Tag.Root` + `Tag.Icon` + `Tag.Text` + `Tag.RemoveButton`	✅
Chip	—	`Chip.Group` + `Chip.Root` + `Chip.Icon` + `Chip.Label` + `Chip.Indicator` + `Chip.RemoveButton`	✅
StatusBadge	`CoreStatusBadge`	`StatusBadge.Root` + `StatusBadge.Dot` + `StatusBadge.Icon` + `StatusBadge.Text` + `StatusBadge.Loader`	✅
IconBadge	`CoreIconBadge`	`IconBadge`	✅
Dot	`CoreDot`	`Dot`	✅
Loader	`CoreLoader`	`Loader`	✅
Skeleton	—	`Skeleton` + `Skeleton.Typo` + `Skeleton.Avatar`	✅
Link	`CoreLink`	`Link.Root` + `Link.Icon` + `Link.Text`	✅
Switch	`CoreToggle`	`Switch.Root` + `Switch.Thumb`	✅
Checkbox	`CoreCheckbox`	`Checkbox`	✅
Radio	`CoreRadio`	`Radio` + `Radio.Group`	✅
Label	—	`Label.Root` + `Label.Text`	✅
SegmentedControl	`CoreSegmentedControl`	`SegmentedControl.Group` + `SegmentedControl.Item` + `SegmentedControl.Icon`	✅
TextInput	`CoreTextInput`	`TextInput.Root` + `TextInput.Input` + `TextInput.Icon` + `TextInput.Text`	✅
TextArea	`CoreTextArea`	`TextArea.Root` + `TextArea.Input`	✅
Field	—	`Field.Root` + `Field.Label` + `Field.Description` + `Field.Message` + `Field.Count`	✅
Select	`CoreSelect`	`Select.Root` + `Select.Trigger` + `Select.Popup` + `Select.Item` + …	✅
Dropdown	`CoreDropdown`	`Dropdown.Trigger` + `Dropdown.Popup` + `Dropdown.Item` + `Dropdown.ItemCheckbox` + `Dropdown.ItemRadio` + …	✅
Tabs	`CoreTabs`	`Tabs.Root` + `Tabs.List` + `Tabs.Tab` + `Tabs.Panel`	✅
Tooltip	`CoreTooltip`	`Tooltip.Root` + `Tooltip.Trigger` + `Tooltip.Content` + `Tooltip.Arrow` + `Tooltip.Title` + `Tooltip.Description`	✅
Popover	—	`Popover.Root` + `Popover.Trigger` + `Popover.Content` + `Popover.Arrow` + `Popover.Close` + `Popover.Handle`	✅
Menu	—	`Menu.Root` + `Menu.Trigger` + `Menu.Content` + `Menu.Item` + `Menu.ItemCheckbox` + `Menu.ItemRadio` + …	✅
Avatar	`CoreAvatar`	`Avatar.Root` + `Avatar.Image` + `Avatar.Fallback` + `Avatar.Indicator` + `Avatar.Group`	✅
SectionMessage	`CoreSectionMessage`	`SectionMessage.Root` + `SectionMessage.Icon` + `SectionMessage.Title` + `SectionMessage.Description` + `SectionMessage.Content` + `SectionMessage.Action` + `SectionMessage.CloseButton`	✅
Modal	`CoreModal`	`Modal.Root` + `Modal.Trigger` + `Modal.Overlay` + `Modal.Popup` + `Modal.Title` + `Modal.Body` + `Modal.Actions` + `Modal.Close`	✅
Drawer	—	`Drawer.Root` + `Drawer.Trigger` + `Drawer.Overlay` + `Drawer.Popup` + `Drawer.Header` + `Drawer.Title` + `Drawer.Description` + `Drawer.Body` + `Drawer.Footer` + `Drawer.Close` + …	✅
Toast	`CoreToast`	`Toast.Provider` + `Toast.Viewport` + `Toast.Root` + `Toast.Icon` + `Toast.Content` + `Toast.Title` + `Toast.Description` + `Toast.Action` + `Toast.Close` + `useToastManager()`	✅
Pagination	`CorePagination`	`Pagination.Root` + `Pagination.Items` + `Pagination.PrevTrigger` + `Pagination.NextTrigger` + …	✅
SideNavigation	`CoreSideNavigation`	—	—
Data Grid	`CoreTable`	`DataGrid.Root` + `DataGrid.Header` + `DataGrid.Body` + … (별도 패키지 `@featuring-corp/data-grid`)	✅
Calendar	`CoreCalendar`	`Calendar.Root` + `Calendar.Trigger` + `Calendar.Footer` + `Calendar.Close`	✅

패턴 비교

신규 패턴 (Button, Tag)

import { Button } from '@featuring-corp/components';

<Button.Root variant="primary" size="md" $css={{ width: '100%' }}>
  <Button.Icon><IconSearchOutline /></Button.Icon>
  <Button.Text>Search</Button.Text>
</Button.Root>

$css prop — 토큰 기반 atomic CSS
render prop — 시맨틱 HTML 변경 (<a>, <Link> 등)
Context — 부모→자식 상태 공유 (size, loading, disabled)
className/style — state callback 지원

Legacy 패턴 (Core*)

import { CoreButton } from '@featuring-corp/components';

<CoreButton buttonType="primary" size="md">
  Search
</CoreButton>

forwardRef + clsx
Recipe 기반 variants
Legacy sprinkles 시스템

On this page