uiarc.dev vs Allternit UI
124 uiarc components checked against allternit-ai src/components/ui
Take about 20 free components. They fix our weakest controls (Button, Select, Tabs, Progress) and fill real gaps (Drawer, Context menu, Radio, Combobox, Date picker). Skip the paid Pro tier and anything we already do well.
Can we use it
Free tier is MIT, and the stack matches ours
- 111 of 124 components download free from
uiarc.dev/r/<name>.json(shadcn registry). The 13 Pro ones return 404 without the $199 licence. - Free source is MIT: commercial SaaS use is allowed, but the copyright notice must stay.
- Deps:
motion, Radix andlucide-react. We already ship all three. - One cost: styles are CSS modules on uiarc tokens (
--space-2,--radius-control,--control-height-md). We need one shim file that maps these to--ui-*insrc/design/theme.css. - Icons: uiarc uses lucide, but 835 of our files use Phosphor. Swap the icons in each component as we copy it.
Upgrade: we have it, ours is weak
| Component | Ours today | uiarc adds | Take |
|---|---|---|---|
| Button | ui/button.tsx: inline styles, no loading, no asChild |
loading + aria-busy, label morph ("Save" → "Saved"), spring press, asChild, hover on fine pointers only |
take |
| Select | ui/select.tsx hand-rolled (Radix installed, unused) |
Radix select, keyboard, typeahead | take |
| Tabs | ui/tabs.tsx hand-rolled with cloneElement, weak a11y |
Radix tabs + sliding indicator | take |
| Progress | hand-rolled (Radix installed, unused) | animated, labelled | take |
| Segmented control | design/controls/SegmentedControl.tsx inline-styled |
shared-layout thumb | take |
| Toast | toast-provider.tsx, no stacking |
Toast stack (swipe out, stacked on phone) | take |
| Input / Textarea | Input has a fixed aria-label="Input" (a11y bug) |
focus ring motion, auto-grow | take |
| Badge / Copy button / Empty state | Badge has a hardcoded hex; 11 copy-button copies; empty states per feature | one shared each | take |
| Dialog, Command, Skeleton, Carousel, Accordion, Tooltip, Hover card, Avatar | good Radix/shadcn already | small motion polish only | skip |
Add: we do not have it
| Component | Where Allternit needs it | Take |
|---|---|---|
| Drawer + Bottom sheet | phone shell / PWA (today: one-off TraceDrawer, CheckoutSheet, PhoneDrawer) | take first |
| Context menu | file trees, bot list, threads (only CanvasContextMenu exists) | take |
| Radio group / Radio cards | settings, plan pick, bot setup | take |
| Combobox / Multi-select | model picker, connections, tags | take |
| Calendar / Date + Time picker | routines scheduling (no shared picker today) | take |
| Hold to confirm / Confirm morph | delete bot, revoke key, wipe computer | take |
| Swipe actions | phone lists: threads, notifications | take |
| Shortcut recorder | Desktop hotkey settings (none today) | take |
| Usage meter | Connections usage, plan bars (PlanUsageBars.tsx is custom) |
take |
| Onboarding checklist | first-run / signed-out setup | take |
| Stepper, Pagination, Breadcrumb | wizards, audit log, Drive | take |
| Tree view, JSON viewer | Code mode files, tool-call output, Factory runs | compare with ours |
| File dropzone | react-dropzone installed, nothing imports it |
take |
| Charts (sparkline, heatmap, gauge) | we use recharts + graph-spark/heatmap | only if better |
| Cookie consent, Announcement bar, Billing toggle | www sites, not the app | sites only |
| Signature pad, Money/Phone input, Image compare, Card stack, Reactions | current use | skip |
How to bring it in
- Add the
@uiarcregistry tocomponents.json. - Add
src/design/arc-shim.css: map uiarc tokens to--ui-*, both light and graphite dark. - Copy each component into
src/components/ui/arc/, swap lucide for Phosphor, keep the MIT header. - Replace the weak primitive in place, so the 99+ call sites keep their import path.
- Ship phone (PhoneShell, phone.css) and PWA in the same PR, plus docs in
surfaces/docs/.
Side benefit: uiarc imports motion/react. That moves us toward one motion library (today 99 files use framer-motion, 30 use motion).