Жылдамырақ құрыңыз: толық React UI жинағы
Web және React Native үшін 82+ қолжетімді, тақырыппен безендірілетін, tree-shakable компонент — жанды тақырып, 48 тіл және кірістірілген headless Tailwind режимі бар.
Тақырыпты тікелей өзгертіңіз
Тақырыптар --z-* CSS айнымалыларына компиляцияланады — біреуін таңдау осы беттегі әр компонентті лезде, нөлдік re-render шығынымен қайта бояйды. Байқап көріңіз:
| # | 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-ге қажет барлық нәрсе
Тәуелділіксіз бір ядро, алты бағытталған пакет, негіздерде ымыра жоқ.
Runtime-сыз стильдеу
CSS Modules + CSS custom properties. CSS-in-JS жоқ, render кезінде стиль қайта есептелмейді.
Әдепкі бойынша қолжетімді
WAI-ARIA рөлдері, толық пернетақта қолдауы және әр компонентте axe-core сынағы.
48 тіл
Барлық кірістірілген мәтіндер locale тізілімі арқылы өтеді. Тілдер bundle-дан тыс жүктеледі.
Headless + Tailwind
unstyled режимін жаһандық немесе компонент деңгейінде қосып, token preset арқылы өз кластарыңызды әкеліңіз.
Tree-shakable
ESM-first, 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>
);
}Ескерту көрінуі үшін 4+ жұлдыз беріңіз.
31 көшіріп-қою блогы
Hero-лар, дашбордтар, кіру формалары, өнім grid-тері — Zephora компоненттерінен құрастырылған толық бөлімдер. Кодты көшіріңіз, қойыңыз, дайын.