Կառուցեք ավելի արագ ամբողջական React UI հավաքածուով
82+ մատչելի, թեմայով հարմարեցվող, tree-shakable բաղադրիչ Web-ի և React Native-ի համար — կենդանի թեմաներով, 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-ներ, վահանակներ, մուտքի ձևեր, ապրանքների ցանցեր — Zephora բաղադրիչներից կառուցված ամբողջական բաժիններ։ Պատճենեք կոդը, տեղադրեք, պատրաստ է։