Onyx UI
Role
Development
Category
Frontend, UI, Design System
Date
Feb 3, 2025
Description:
Onyx UI est une librairie de composants UI moderne pour SvelteKit, pensée pour construire rapidement des interfaces propres, cohérentes et responsives. Elle adopte une approche copy/paste inspirée de shadcn/ui : au lieu d’ajouter une dépendance externe lourde, on copie directement les composants dans le projet, ce qui garantit un contrôle total sur le code, aucune dépendance cachée et une excellente maintenabilité. Le projet est construit autour d’un design system basé sur Tailwind CSS et DaisyUI, avec un focus fort sur l’accessibilité (WCAG), la personnalisation et l’expérience développeur. Onyx UI sert à la fois de toolbox réutilisable pour mes projets SvelteKit et de démonstration concrète de ma capacité à concevoir et implémenter une librairie UI moderne pour des applications web ambitieuses.
Stack:
Framework & langage
SvelteKit (Svelte 5) – Framework fullstack moderne, réactif et très performant, utilisé comme base pour toute la librairie.
JavaScript / TypeScript – Composants majoritairement écrits en JS avec typage inline pour une bonne DX et une intégration fluide dans les projets Svelte.
UI & Design System
Tailwind CSS – Système de classes utilitaires pour construire rapidement des interfaces cohérentes et customisables.
DaisyUI – Surcouche Tailwind qui apporte un thème par défaut et des variantes prêtes à l’emploi pour accélérer la création de composants.
@iconify/svelte – Librairie d’icônes utilisée pour enrichir les composants (icônes d’actions, statuts, navigation, etc.).
Outils & Documentation
Storybook – Documentation interactive et tests visuels des composants (catalogue, exemples d’usage, variations).
MDSvex – Intégration du markdown dans Svelte pour rédiger la documentation directement au plus proche du code.
Approche copy/paste – Les composants sont pensés pour être copiés, adaptés et versionnés directement dans les projets clients, sans lock-in technologique.
Fonctionnalité:
Catalogue de composants UI Onyx UI propose un ensemble de composants couvrant les besoins principaux d’une application web moderne.
Chaque composant est pensé pour être responsive et s’adapter aux différentes tailles d’écran (mobile, tablette, desktop).
Philosophie & DX
Contrôle total sur le code
Les composants sont copiés dans le repo du projet : pas de “boîte noire”. Tout est modifiable, versionnable et debuggable comme du code applicatif classique.
Pas de breaking changes imposés
Comme le code vit dans le projet, les mises à jour se font au rythme de l’équipe, sans subir les changements d’une dépendance externe.
Accessibilité & UX
Les composants suivent les bonnes pratiques d’accessibilité (navigation clavier, structure sémantique) pour servir de base saine à des interfaces inclusives.
Performance
SvelteKit + Tailwind + approche copy/paste = pas de runtime UI lourd, uniquement le strict nécessaire pour l’interface.