Shuriken UI

6 showcase tabs — widgets, dashboard, messaging, kanban, settings, music

An open-source component library for Nuxt and Tailwind. The documentation homepage argues for the library the only honest way: by rendering it — twenty live widgets on the first scroll, no illustrations, no marketing.

Component libraryDesign systemDocs UI

Talk about a similar project

Client: Open source project
Type: Component library
Role: UI design and specs
Timeline: Ongoing
Status: Public

The docs homepage: the promise, then the showcase itself — cards, charts, forms, tables and directories in one masonry.

Work details

TypeComponent library · documentation site

IndustryOpen source · developer tools

ClientOpen source project

RoleUI design and component specs

Year2024

TimelineOngoing

StatusPublic · v4 beta

DeliverablesComponent set, showcase tabs, light and dark themes

Fonts

InterJetBrains Mono

Colours

Built with

Nuxt

Vue

TypeScript

Tailwind CSS

Figma

Every component is a Tailwind theme contract rather than a fixed style: consumers restyle by swapping tokens, not by overriding CSS.

What it needed

A library that has to prove itself in one screen.

Developers pick a component library in about a minute. They skim the homepage, look for the components, and judge quality on details — focus rings, empty rows, a chart at an awkward size, whether dark mode was an afterthought. A page that describes the library instead of rendering it loses that minute, and the components themselves had to survive being placed next to each other with nothing to hide behind.

What I did

Argument

Four lines of promise, two buttons, then the showcase. Everything a landing page usually adds — testimonials, logos, feature grids — was cut.

Showcase

Six tabs of real composition: widgets, dashboard, messaging, kanban, settings, music. Each is an assembled screen, not a component gallery, because the question is whether the parts sit together.

Density

A masonry of cards at three widths, so a stat block, a chart, a form and a data table all appear at the size they will actually be used.

Restraint

Monochrome by design. With no accent colour to lean on, hierarchy has to come from weight, spacing and rules — and any component that only worked in colour got fixed.

States

Filled inputs, pagination, toggles, empty selects and online badges are all drawn in the showcase, so the states are documented by being visible.