Zephora UI

Χτίσε γρηγορότερα με ένα πλήρες React UI kit

82+ προσβάσιμα, θεματοποιήσιμα, tree-shakable components για Web και React Native — με ζωντανά θέματα, 48 γλώσσες και ενσωματωμένη headless λειτουργία Tailwind.

npm install @zephora/react @zephora/theme
82+components, Web + Native
48έτοιμες γλώσσες
100%ελεγμένο με axe-core, WAI-ARIA
~5KBgzip ανά component, επιβάλλεται στο CI

Άλλαξε θέμα ζωντανά

Τα θέματα μεταγλωττίζονται σε μεταβλητές CSS --z-* — η εναλλαγή ενός αλλάζει αμέσως το στυλ κάθε component στη σελίδα, με μηδενικό κόστος 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.

Ό,τι χρειάζεται ένα production UI

Ένας πυρήνας χωρίς εξαρτήσεις, έξι εστιασμένα πακέτα, κανένας συμβιβασμός στα βασικά.

Styling μηδενικού runtime

CSS Modules + CSS custom properties. Χωρίς CSS-in-JS, χωρίς επανυπολογισμό στυλ στο render.

Προσβάσιμο εξ ορισμού

Ρόλοι WAI-ARIA, πλήρης υποστήριξη πληκτρολογίου και τεστ axe-core σε κάθε component.

48 γλώσσες

Κάθε ενσωματωμένο κείμενο περνά από το μητρώο locale. Οι γλώσσες φορτώνονται εκτός bundle.

Headless + Tailwind

Ενεργοποίησε το unstyled καθολικά ή ανά component και φέρε τις δικές σου κλάσεις μέσω του token preset.

Tree-shakable

ESM-first JS χωρίς sideEffects. Τα περισσότερα components μένουν κάτω από 5KB gzip — επιβάλλεται στο CI.

Web + React Native

Το ίδιο API components και τα ίδια αντικείμενα θεμάτων κινούν το @zephora/react και το @zephora/native.

Γράψε λιγότερα, παράδωσε περισσότερα

Controlled ή uncontrolled, με τύπους από άκρη σε άκρη, τοπικοποιημένο out of the box. Ο κώδικας αριστερά είναι το demo δεξιά.

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+ αστέρια για να εμφανιστεί το alert.

31 μπλοκ copy-paste

Hero, dashboards, φόρμες σύνδεσης, πλέγματα προϊόντων — πλήρεις ενότητες από components της Zephora. Αντίγραψε τον κώδικα, επικόλλησε, τέλος.