npm v0.3.0 · 31 stable · 18 preview

Expo·React Native UI, 실수할 수 없게.

토큰 기반 테마와 접근성 계약을 TypeScript API에 담았습니다. Expo, bare React Native, Web에서 같은 설계 언어를 더 안전하게 유지하세요.
Expo & bare RN
React Native ≥ 0.79
TypeScript first
LIVE PREVIEW
LIGHT THEME
MONDAY, AUG 10
오늘의 포커스
G
UI 라이브러리 다듬기
완료까지 2개의 작업
Type-safe props
invalid states rejected
49
Source components
31
Color roles
0
Direct runtime deps
625
534 unit + 91 type
TYPE CONTRACTS

깨진 UI보다 먼저 오는 컴파일 에러.

접근성 라벨 누락, 죽은 액션, 존재하지 않는 토큰 키를 사용 지점에서 바로 드러냅니다. 앱이 실행된 뒤 발견할 문제를 코드 작성 중에 줄이세요.
TYPE ERROR
IconButton.tsx
1
<IconButton
2
icon={Settings}
3
onPress={openSettings}
4
/>
× accessibilityLabel 속성이 필요합니다.
CONTRACT MET
IconButton.tsx
1
<IconButton
2
accessibilityLabel="설정 열기"
3
icon={Settings}
4
onPress={openSettings}
5
/>
✓ 스크린리더 계약이 props에 포함됩니다.
T
완성된 테마만
createTheme을 거친 완전한 토큰 객체만 Provider가 받습니다. 반쪽 테마가 숨어들지 않습니다.
A
접근성을 API로
IconButton의 라벨과 액션 핸들러처럼 빠뜨리기 쉬운 계약을 필수 prop으로 표현합니다.
앱이 소유하는 확장
문구와 아이콘은 주입하고, NativeWind는 선택합니다. 라이브러리가 앱의 결정을 가로채지 않습니다.
COMPONENTS

설명보다 빠른, 실제 컴포넌트.

이 페이지의 데모는 배포 패키지를 직접 import합니다. 테마를 바꾸고, 입력하고, 눌러보세요.
Live canvas
실제 상태를 바꿔보세요.
6 variants · 3 sizes · loading · disabled · icon
example.tsx
<Button label="저장" onPress={save} /> <Button variant="secondary" label="미리보기" /> <IconButton accessibilityLabel="설정 열기" icon={Settings} />
TypeScript · no errors
49개의 작은 조각, 하나의 설계 언어
Foundation
Text
Actions
Button
IconButton
Link
FloatingActionButton
Inputs
TextField
SearchField
FormField
Select
Navigation
Tabs
Collapsible
Pagination
Selection
SelectionIndicator
SelectableRow
SelectAllRow
Chip
Controls
Checkbox
Switch
RadioGroup
Slider
ToggleGroup
Layout
Surface
ContentFrame
Section
StickyActionBar
Card
AspectRatio
Status
Badge
Alert
Spinner
ProgressBar
Display
Avatar
Divider
ListItem
Accordion
Data
DataTable
Feedback
Skeleton
EmptyState
ErrorState
Toast
ToastViewport
Overlay
Dialog
DialogPanel
ConfirmActionRow
ActionSheet
Sheet
Popover
Tooltip
Menu
THEME SYSTEM

한 번 정하면, 모든 화면이 함께 움직입니다.

색상 31롤, 서체 7롤, 간격·라운드·그림자·치수까지 하나의 완성된 테마로 관리합니다. 라이트와 다크를 쌍으로 만들고 시스템 설정을 따르세요.
☀ Light
☾ Dark
primary
#5B53F2
primarySoft
#EDEBFF
surface
#FFFFFF
text
#121320
success
#0C7355
danger
#B4234D
ThemePair 완전성 보장
라이트나 다크 한쪽이 비어 있는 상태를 만들 수 없습니다.
QUICK START
첫 화면까지 3분.
import { UiProvider, Button, koStrings } from '@gj-kit/expo-ui'; import { createThemes } from '@gj-kit/expo-ui/theme'; const themes = createThemes(); export function App() { return ( <UiProvider theme={themes} strings={koStrings}> <Button label="시작하기" onPress={() => {}} /> </UiProvider> ); }
1
테마 생성
2
Provider 연결
3
컴포넌트 사용
NATIVE-FIRST

웹 데모 뒤에도, 네이티브 현실을 압니다.

Expo 앱에서 실제로 반복되는 플랫폼 문제를 작은 유틸과 명확한 경계로 해결합니다.
/INSETS
Safe area와 키보드까지
Android edge-to-edge Modal의 키보드 겹침과 하단 inset을 다루는 검증된 유틸을 제공합니다.
useModalKeyboardOverlap()
/TAILWIND
#
NativeWind는 선택 사항
의존하지 않으면서 className passthrough와 테마에서 파생한 Tailwind preset을 제공합니다.
createTailwindPreset(theme)
STRINGS + ICONS
앱의 언어를 그대로
한국어·영어 문구와 아이콘 렌더러를 Provider에서 주입합니다. 별도 래퍼가 필요 없습니다.
strings={koStrings}
BUILD WITH CONFIDENCE
좋은 UI는, 좋은 제약에서 시작됩니다.
설치는 가볍게. 테마와 접근성 계약은 단단하게.
$
pnpm add @gj-kit/expo-ui
COPY
문서에서 시작하기
g
@gj-kit/expo-ui
Type-safe primitives for Expo & React Native.
MIT · npm v0.3.0