더 빠르게 만드는 완성형 React UI 키트

웹과 React Native를 위한 82개 이상의 접근성 높고 테마 적용이 가능하며 tree-shaking 되는 컴포넌트 — 라이브 테마, 48개 로케일, headless Tailwind 모드 기본 내장.

npm install @zephora/react @zephora/theme

82+컴포넌트, Web + Native

48기본 제공 로케일

100%axe-core 테스트 완료, WAI-ARIA

~5KB컴포넌트당 gzip, CI로 강제

테마를 실시간으로

테마는 --z-* CSS 변수로 컴파일됩니다 — 하나를 전환하면 이 페이지의 모든 컴포넌트가 리렌더링 비용 없이 즉시 다시 스타일링됩니다. 직접 해보세요:

#		Status
1042	Ada Lovelace	Paid	$129.00
1041	Grace Hopper	Pending	$89.00
1040	Alan Turing	Paid	$249.00
1039	Katherine J.	Refunded	$59.00

프로덕션 UI에 필요한 모든 것

의존성 없는 단일 코어, 목적이 분명한 6개의 패키지, 기본기에 타협 없음.

제로 런타임 스타일링

CSS Modules + CSS 커스텀 프로퍼티. CSS-in-JS 없음, 렌더링 시 스타일 재계산 없음.

기본으로 접근성 보장

WAI-ARIA 역할, 완전한 키보드 지원, 그리고 모든 컴포넌트에 axe-core 테스트.

48개 언어

모든 내장 문자열이 로케일 레지스트리를 거칩니다. 로케일은 번들 외부에서 로드됩니다.

Headless + Tailwind

unstyled를 전역 또는 컴포넌트 단위로 전환하고, 토큰 프리셋으로 자신만의 클래스를 사용하세요.

Tree-shaking 지원

ESM 우선, sideEffects 없는 JS. 대부분의 컴포넌트가 5KB gzip 미만 — CI에서 강제합니다.

Web + React Native

동일한 컴포넌트 API와 동일한 테마 객체가 @zephora/react와 @zephora/native를 구동합니다.

적게 쓰고, 더 많이 배포하세요

Controlled든 uncontrolled든, 끝까지 타입이 지정되고, 기본으로 현지화되어 있습니다. 왼쪽 코드가 곧 오른쪽 데모입니다.

import { Card, CardBody, Rating, Alert } from "@zephora/react";

function Review() {
  const [stars, setStars] = React.useState(3);
  return (
    <Card>
      <CardBody>
        <Rating value={stars} onValueChange={setStars} />
        {stars >= 4 && (
          <Alert status="success" title="Thanks!">
            We're glad you liked it.
          </Alert>
        )}
      </CardBody>
    </Card>
  );
}

31개의 복사-붙여넣기 블록

히어로, 대시보드, 로그인 폼, 상품 그리드 — Zephora 컴포넌트로 만든 완전한 섹션. 코드를 복사해 붙여넣으면 끝.