skip to the page
superthread
superthreadinstall
system
superthread
version
2.0.0-next.1
date
25.10.26

install

two commands put superthread into a tanstack start app on tailwind 4: init once, then add what you need.

init

init sets an app up for @mk. it writes the base-nova style and the registry into components.json, then installs the utils, the tokens and the button.

bunx --bun shadcn@latest init https://superthread.mauricekleine.com/r/init.json --base base -y

add an item

after init, every item installs by name, and the @mk items it needs come with it. most apps start with the tokens and the button:

bunx --bun shadcn@latest add @mk/tokens @mk/button

the files go to components/superthread/, outside components/ui/, so a later shadcn apply or init --reinstall never overwrites them.

the css entry

@mk/tokens adds three imports to the app's css entry, after tailwind's:

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./components/superthread/styles/superthread.css";

the third import is relative to src/styles.css in a start app. elsewhere, point it at the installed file from wherever your css entry sits: next's app/globals.css needs ../components/superthread/styles/superthread.css.

pin a version

to stay on one version, map @mk to its snapshot in components.json. an item that needs other @mk items fetches them from the same snapshot.

{
  "registries": {
    "@mk": "https://superthread.mauricekleine.com/r/v/2.0.0-next.1/{name}.json"
  }
}

/r/versions.json lists every version with a snapshot.

every item

each item in the registry with its line. an item with a page links to it.

the theme

  • initsets up an app for @mk: the base-nova style, the tokens, utils and the button

    bunx --bun shadcn@latest init https://superthread.mauricekleine.com/r/init.json --base base -y

  • tokensthe superthread theme: colour roles for light and dark, type, motion, shape and the texture tiles

    bunx --bun shadcn@latest add @mk/tokens

code

  • plain tokensthe same tokens as plain css with no tailwind, and as a typed module

    bunx --bun shadcn@latest add @mk/tokens-plain

  • utilscn, with superthread's type steps taught to the class merger

    bunx --bun shadcn@latest add @mk/utils

  • fleetthe six ships: ids, names, one-line descriptors, line-screen angles and mark file names

    bunx --bun shadcn@latest add @mk/fleet

branded components

  • glyphsthe pixel icons and status glyphs, drawn as whole-pixel squares in the current colour

    bunx --bun shadcn@latest add @mk/glyphs

  • buttona button in the house ink, with secondary, outline, ghost, link and destructive variants

    bunx --bun shadcn@latest add @mk/button

  • badgea badge, with a status variant for each state: done, running, waiting, failed and queued

    bunx --bun shadcn@latest add @mk/badge

  • inputa text field with the one focus edge

    bunx --bun shadcn@latest add @mk/input

  • input groupa field box that holds a text control with addons and buttons beside it

    bunx --bun shadcn@latest add @mk/input-group

  • textareaa multi-line text field with the one focus edge

    bunx --bun shadcn@latest add @mk/textarea

  • selecta select whose trigger is a field and whose list is a raised layer

    bunx --bun shadcn@latest add @mk/select

  • dialoga square dialog on the sheet lift

    bunx --bun shadcn@latest add @mk/dialog

  • tabstabs with a solid current tab

    bunx --bun shadcn@latest add @mk/tabs

  • tablea table with mono ids and tabular numbers, and an edge beside the row under the pointer

    bunx --bun shadcn@latest add @mk/table

  • progressa flat house-ink bar with a screened leading edge

    bunx --bun shadcn@latest add @mk/progress

  • toastbase ui toasts on the leaf lift, with a status glyph for each kind

    bunx --bun shadcn@latest add @mk/toast

  • sidebarthe sidebar on the deep ground, with a boxed current item

    bunx --bun shadcn@latest add @mk/sidebar

  • fleet railthe rail of ship marks for moving between fleet surfaces; you pass the hrefs

    bunx --bun shadcn@latest add @mk/fleet-rail

  • checkboxa square checkbox with a screened mixed state

    bunx --bun shadcn@latest add @mk/checkbox

  • skeletonloading rows, screened on whole-pixel bars

    bunx --bun shadcn@latest add @mk/skeleton

base-nova on the tokens

  • cardbase-nova's card, on the superthread tokens

    bunx --bun shadcn@latest add @mk/card

  • labelbase-nova's label, on the superthread tokens

    bunx --bun shadcn@latest add @mk/label

  • separatorbase-nova's separator, on the superthread tokens

    bunx --bun shadcn@latest add @mk/separator

  • sheetbase-nova's sheet, on the superthread tokens

    bunx --bun shadcn@latest add @mk/sheet

  • tooltipbase-nova's tooltip, on the superthread tokens

    bunx --bun shadcn@latest add @mk/tooltip

  • use mobilebase-nova's hook that tells a phone-width viewport

    bunx --bun shadcn@latest add @mk/use-mobile