À propos du projet
Ark UI est une bibliothèque de composants headless open-source maintenue par l'équipe Chakra UI. Elle fournit la logique non stylisée et la couche d'accessibilité pour la création de systèmes de design et d'applications web, laissant tout le stylisme visuel au développeur.
**Approche principale**
Le projet sépare le comportement du composant de son apparence. Chaque composant est livré sans styles par défaut, permettant ainsi aux équipes d'appliquer Tailwind, Panda CSS, des solutions CSS-in-JS telles qu'Emotion ou Styled Components, des modules CSS ou du CSS pur. L'objectif affiché est de donner aux auteurs de systèmes de design un contrôle total sur la présentation tout en héritant de comportements d'interaction et d'accessibilité testés.
**Architecture**
La logique des composants est basée sur les machines à états finis de Zag.js. Selon le README, cela permet des transitions d'état prévisibles et typées, des tests et un débogage facilités, ainsi que moins de cas particuliers. Le même comportement de composant est exposé via des packages distincts pour React, Solid, Vue et Svelte, permettant ainsi à un système de design de partager une seule surface d'API entre les frameworks sans réécrire la logique. Les packages sont entièrement typés avec TypeScript.
**Accessibilité**
Le README précise que les composants suivent les modèles de conception WAI-ARIA et sont testés avec des technologies d'assistance. Les fonctionnalités revendiquées incluent des attributs et rôles ARIA appropriés, la navigation au clavier, la gestion du focus, les annonces pour lecteurs d'écran et le support RTL.
**Composants**
Ark UI propose plus de 45 composants regroupés approximativement comme suit :
- Mise en page et navigation : Accordion, Tabs, Splitter, Steps, Tree View, Tour
- Superpositions : Dialog, Popover, Tooltip, Hover Card, Bottom Sheet, Floating Panel
- Formulaires et entrées : Checkbox, Radio Group, Select, Combobox, Number Input, Pin Input, Tags Input, Editable, File Upload, Color Picker, Date Picker, Password Input, Signature Pad, Slider, Angle Slider, Rating Group, Switch, Toggle et Toggle Group
- Affichage de données : Avatar, Highlight, Progress, QR Code, Format, JSON Tree View, Marquee
- Utilitaires : Carousel, Clipboard, Collapsible, Field et Fieldset, Menu, Pagination, Portal, Presence, Scroll Area, Segment Group, Timer, Toast, Client Only, Download Trigger, Focus Trap, Frame, Collection, Listbox
**Installation et utilisation**
Chaque framework possède son propre package npm (`@ark-ui/react`, `@ark-ui/solid`, `@ark-ui/vue`, `@ark-ui/svelte`). Les composants sont importés individuellement, par exemple `@ark-ui/react/dialog`, et composés à partir de primitives telles que Root, Trigger, Backdrop, Positioner, Content, Title, Description et CloseTrigger. Le README montre un exemple de Dialog rendu avec un balisage quasi identique dans les quatre frameworks.
**Écosystème**
Ark UI est le fondement de Chakra UI v3, et le README mentionne également Park UI et Tark UI comme des ensembles de composants stylisés construits par-dessus. Un dossier d'intégrations séparé propose un serveur MCP pour le développement assisté par IA.
**Documentation et communauté**
Les guides, les références API par composant, les exemples et les recettes de stylisme se trouvent sur ark-ui.com. Le projet dispose d'une communauté Discord, d'une feuille de route Canny publique pour les demandes de fonctionnalités et d'un blog. Les contributions sont acceptées via un guide de contribution, et le support passe par la documentation, Discord et les tickets GitHub. Le développement est financé via Open Collective et le projet est publié sous licence MIT.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.