Arc

C'EST QUOI ?

Arc est une bibliothèque de 97 composants et 22 blocs React sous licence MIT. Rien ne s'ajoute aux dépendances : la CLI shadcn, ou un simple copier-coller, dépose des fichiers TSX et des modules CSS dans le dépôt de l'application, et ce code se modifie ensuite comme n'importe quel composant local. Les animations passent par la bibliothèque Motion, et chacune a une variante en fondu quand le système demande de réduire les mouvements.

Le catalogue vise les interfaces de produit : tableaux de bord, écrans de connexion, pages de tarification, pages marketing. Il exige React 19 avec TypeScript, Next.js (App Router) ou Vite, et un alias d'import @/* pointé sur la racine du projet, par lequel les fichiers s'importent entre eux.

POURQUOI C'EST INTÉRESSANT ?

• Aucun paquet à suivre : Arc n'existe pas en tant que package npm. Chaque élément est décrit par un fichier public/r/<id>.json qui liste ses fichiers et ses dépendances (motion, parfois lucide-react ou une primitive Radix), et la CLI installe le tout.
• Tailwind facultatif : les styles sont des modules CSS qui ne lisent que des tokens sémantiques (--surface, --accent, --danger...) définis dans registry/foundation.css. Changer un token modifie toute la bibliothèque, en clair comme en sombre. L'attribut data-accent choisit parmi huit couleurs d'accent.
• Thème sombre réglé à part : les valeurs sombres sont calibrées séparément, pas inversées. La bascule se fait par data-theme="dark" sur <html> et non par la classe dark : un projet qui change de thème par classe doit revoir son mécanisme.
• Douze graphiques animés : courbes, barres, donut, streamgraph, brush chart, waffle, slope chart, sparkline, jauge, heatmap d'activité, ridgeline et treemap, dans une catégorie Data de 28 composants qui compte aussi une table triable et une vue arborescente.
• Aperçus fidèles au code : la documentation affirme que chaque aperçu de uiarc.dev exécute la source même qui s'installe, clavier, états de chargement et animations compris.
• Serveur MCP public : https://uiarc.dev/api/mcp, en Streamable HTTP et sans clé pour les éléments gratuits, sert à chercher un composant, lire sa doc et récupérer sa source depuis Claude Code, Cursor, VS Code ou Codex. Chaque page de doc a aussi une version Markdown.
• Vite un cran derrière Next.js : cinq éléments (avatar, breadcrumb, changelog-feed, site-header, newsletter-signup) importent next/image ou next/link. Sous Vite, il faut les remplacer à la main par <img> et <a>.

Le dépôt est la partie gratuite d'un modèle open core. Arc Pro ajoute 100 composants et blocs payants, en abonnement annuel ou en paiement unique ; leurs aperçus et leur doc sont publics, leur code n'est pas dans le dépôt, et plusieurs pièces de la vitrine du README en font partie. Le projet est aussi très récent : dépôt ouvert le 24 septembre 2026, v1.0.0 publiée le 29 septembre, seule release à ce jour. Les nouveaux éléments arrivent par lots via des commits « Sync from source », chaque release mettant à jour ensemble le dépôt, le registre @uiarc et le changelog.

CAS D'USAGE

• Monter le tableau de bord d'un SaaS avec les cartes de métriques, les graphiques, la jauge de consommation et le centre de notifications.
• Assembler une page d'accueil à partir des blocs hero, comparaison d'offres, bandeau de logos, FAQ et pied de page.
• Équiper des formulaires exigeants : saisie de téléphone, sélection de plage de dates, éditeur de texte riche, pavé de signature, dépôt de fichiers.
• Laisser un assistant de code trouver et installer les composants via le serveur MCP.