Zephora UI

விரைவாக உருவாக்குங்கள், ஒரு முழுமையான React UI கிட் மூலம்

Web மற்றும் React Native-க்கான 82+ அணுகக்கூடிய, தீம் மாற்றக்கூடிய, tree-shakable காம்பொனென்ட்கள் — நேரடி தீமிங், 48 மொழிகள், உள்ளமைந்த headless Tailwind முறையுடன்.

npm install @zephora/react @zephora/theme
82+காம்பொனென்ட்கள், Web + Native
48தயார்நிலை மொழித் தொகுப்புகள்
100%axe-core சோதிக்கப்பட்டது, WAI-ARIA
~5KBஒரு காம்பொனென்டுக்கான gzip, CI-ஆல் கட்டாயமாக்கப்பட்டது

தீமை நேரடியாக மாற்றுங்கள்

தீம்கள் --z-* CSS மாறிகளாக தொகுக்கப்படுகின்றன — ஒன்றை மாற்றினால் இந்தப் பக்கத்தின் ஒவ்வொரு காம்பொனென்டும் உடனடியாக, re-render செலவின்றி புதிய தோற்றம் பெறும். முயற்சி செய்யுங்கள்:

applyTheme()
#Status
1042Ada LovelacePaid$129.00
1041Grace HopperPending$89.00
1040Alan TuringPaid$249.00
1039Katherine J.Refunded$59.00
ZA
Zeynep Aksoy
Product designer
Email notifications
All systems operational
Deploy #482 finished in 2m 14s.

ப்ரொடக்ஷன் UI-க்குத் தேவையான அனைத்தும்

சார்பு இல்லாத ஒற்றை core, கவனம் குவிந்த ஆறு தொகுப்புகள், அடிப்படைகளில் எந்தச் சமரசமும் இல்லை.

Zero-runtime ஸ்டைலிங்

CSS Modules + CSS custom properties. CSS-in-JS இல்லை, render-இன் போது ஸ்டைல் மறுகணக்கீடும் இல்லை.

இயல்பாகவே அணுகக்கூடியது

WAI-ARIA roles, முழு விசைப்பலகை ஆதரவு, ஒவ்வொரு காம்பொனென்டிலும் axe-core சோதனை.

48 மொழிகள்

உள்ளமைந்த அனைத்து சரங்களும் locale registry வழியாகச் செல்கின்றன. மொழிகள் bundle-க்கு வெளியே இருந்து ஏற்றப்படுகின்றன.

Headless + Tailwind

unstyled-ஐ முழுவதுமாகவோ காம்பொனென்ட் அளவிலோ இயக்கி, token preset வழியாக உங்கள் சொந்த class-களைப் பயன்படுத்துங்கள்.

Tree-shakable

ESM-முதல், sideEffects இல்லாத JS. பெரும்பாலான காம்பொனென்ட்கள் 5KB gzip-க்குக் கீழ் — CI-இல் கட்டாயமாக்கப்படுகிறது.

Web + React Native

அதே காம்பொனென்ட் API-யும் அதே தீம் objects-களும் @zephora/react மற்றும் @zephora/native இரண்டையும் இயக்குகின்றன.

குறைவாக எழுதுங்கள், அதிகம் வெளியிடுங்கள்

Controlled அல்லது uncontrolled, முழுவதும் type செய்யப்பட்டது, முதலிலேயே மொழியாக்கம் செய்யப்பட்டது. இடதுபுறக் குறியீடுதான் வலதுபுற டெமோ.

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 நகலெடு-ஒட்டு தொகுதிகள்

ஹீரோக்கள், டாஷ்போர்டுகள், உள்நுழைவு படிவங்கள், தயாரிப்பு கிரிடுகள் — Zephora காம்பொனென்ட்களால் கட்டப்பட்ட முழு பிரிவுகள். குறியீட்டை நகலெடுத்து, ஒட்டுங்கள், முடிந்தது.