@strux-sh/ui

The Strux design system — Vue 3 components and a Tailwind v4 theme for terminal-inspired developer interfaces.

Status: pre-alpha. API is unstable. Used internally by strux-website and strux-os.

What's in the box

• A Tailwind v4 @theme block defining the Strux semantic palette, type ramp, radii, motion timings, and font stack.
• Custom utilities for the recurring "terminalisms" — dot-grid, cursor-blink, hairline rules.
• Vue 3 primitives built on the theme: Button (more coming).
• (Coming) Pattern components: SectionHeader, TerminalFrame, CodeBlock, StepList, Reveal.

Install

bun add @strux-sh/ui

Usage — two modes

Mode A: just import and go

No Tailwind setup required. Import the pre-built CSS and start using components immediately.

// main.ts
import "@strux-sh/ui/dist.css"
import "@strux-sh/ui/fonts"       // optional — self-hosted variable fonts
import { Button } from "@strux-sh/ui"

This mode is ideal for projects that don't use Tailwind themselves — the dist CSS contains every utility the Strux components need, pre-compiled and minified.

Mode B: Tailwind-integrated

If your project already uses Tailwind v4 and you want to use Strux tokens (bg-strux-accent, font-strux-mono, etc.) in your own templates, import the theme source instead.

/* app.css */
@import "tailwindcss";
@import "@strux-sh/ui/fonts";          /* optional */
@import "@strux-sh/ui/styles/theme";

// main.ts
import "./app.css"
import { Button } from "@strux-sh/ui"

Tailwind will scan both your code and the Strux components, generating only the utilities in use. You get the full Strux token vocabulary available in your own classes.

Local development

bun install
bun run docs:dev      # Nuxt docs site
bun run build         # types + JS bundle + dist.css
bun run pack:check    # inspect the npm tarball contents locally

To consume from another local project:

cd /path/to/strux-ui && bun link
cd /path/to/your-app && bun link @strux-sh/ui

Subpath exports

| Import | What it gives you | |---------------------------------|-----------------------------------------------------------| | @strux-sh/ui | Vue components + TypeScript types | | @strux-sh/ui/dist.css | Pre-built CSS (Tailwind utilities + theme, no fonts) | | @strux-sh/ui/styles | Tailwind v4 source + fonts + theme (for Mode B) | | @strux-sh/ui/styles/theme | Just the theme tokens and utilities | | @strux-sh/ui/fonts | Self-hosted variable fonts (Hanken, Lexend, JetBrains) |

Build

bun run build

Publish checklist

bun run build
bun run pack:check
npm publish

Produces:

dist/
  index.js        JS bundle (ESM, Vue externalized)
  index.d.ts      TypeScript declarations
  strux-ui.css    Pre-built CSS for Mode A consumers