uiuno

uiuno is a browser-based workspace for building, organizing, and sharing shadcn/ui components and design systems. It pairs a live code editor with an instant preview so you can write a component and watch the rendered result update beside it. Finished work can be forked, published publicly, and distributed to teammates, AI agents, and the wider community.

What It Is

The homepage positions uiuno as a shadcn/ui workspace "for humans and AI agents." The interface is split between a TypeScript/TSX editor on one side and a live rendered preview on the other, with collections of components shown in list, card, or pack views. Rather than scaffolding a project locally, you assemble and preview shadcn/ui components in the browser and then push them out through the standard shadcn registry and CLI flow.

Editor and Live Preview

The editor surface includes a file tab (for example, an example.tsx entry), a preview pane that re-renders on save, and quick actions to fork a workspace or open the code in Cursor. The homepage marketing also shows visual touches such as shader effects on save. A TanStack option is available for exporting or pulling a template into that stack.

Design Systems and Tokens

uiuno includes a design-system panel covering base tokens, component tokens, typography, color palettes, and icons, along with a set of prebuilt default systems such as shadcn/ui Amber, Blue, Cyan, and Emerald. According to the maker's announcement, the design-system feature is modeled after the DTCG token standard and translated into shadcn/ui plus Tailwind CSS, with support for custom token names and importing from Figma.

Registries and Distribution

A shadcn directory lets you browse community-maintained registries and add items into your collection, and the workspace surfaces the shadcn CLI install flow for sharing components. The stated goal is distributing components and design systems to a team, to AI coding agents, and publicly, which lines up with the public/private and fork controls visible in the workspace.

Dependencies and Styling

The workspace bundles an npm dependency manager, a shadcn/ui dependency view, and Tailwind CSS management split across imports, base, components, utilities, and animations. Custom CSS entered in the editor is parsed into registry JSON on the fly, and the footer exposes formatting via Prettier and an "anti-slop" mode aimed at cleaner output.