Themed components for UI SDK, installable from a shadcn registry. Every control is a UI SDK component underneath, drawn in one of three registers that stack from dark to light.
Measure: Readout
Black glass, hairline tick scales and a square marker.
Choose: Strata
Flat tonal bands stepping dark to light, with a block of ink for the choice.
Actuate: Machined
Ice tiles, spun-aluminium knobs, keys that sink and one gold part.
Files land in components/ui/formula/, so the theme adds to an existing shadcn project without replacing its components.
Install components from the Formula 2030 shadcn registry, https://formula2030.alexandrejoly.me/npx shadcn@latest add https://formula2030.alexandrejoly.me/The tokens every Formula 2030 component reads: the glass, the tonal ramp, the tiles, the metals and the signal colours. Every component installs them as a dependency.
npx shadcn@latest add https://formula2030.alexandrejoly.me/Each one is live. Its card names the UI SDK part underneath and gives its own install command.
Black glass, hairline tick scales and a square marker.
A ruler that reads a measurement: ticks light up to the value and a square marker sits at the reading, horizontal or vertical.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A ruler for a task that advances: ticks light up to the value, and a short run of lit ticks travels the scale while the progress is unknown.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A ruler: ticks light up to the value and a square marker rides the scale.
npx shadcn@latest add https://formula2030.alexandrejoly.me/The black display the readout components sit on, with optional corner brackets.
npx shadcn@latest add https://formula2030.alexandrejoly.me/Flat tonal bands stepping dark to light, with a block of ink for the choice.
Stacked tonal bands whose plus turns into a minus as the band turns to ink and its panel opens on a light tone.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A list of tonal option rows, each with a square marker: the checked row turns to ink and its marker fills.
npx shadcn@latest add https://formula2030.alexandrejoly.me/Tonal bands stepping from dark to light, with a block of ink that slides to the choice.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A run of tonal bands with a block of ink that slides to the selected tab, above or beside a flat light panel.
npx shadcn@latest add https://formula2030.alexandrejoly.me/Ice tiles, spun-aluminium knobs, keys that sink and one gold part.
A key cap standing on a solid skirt: a press sinks it flush, and it stays down while its action runs.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A small square well: checked seats a dark milled cap in it, and the mixed state is a single engraved bar.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A knurled metal dial in a ring of ticks: dragging up turns its index dot and lights the ticks up to the value.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A large thin numeral over a pair of engraved stepper arrows, with a knurled grip to drag the value.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A rotary knob in a ring: on turns its slot upright.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A latching key that stays sunk while pressed and lights the engraved bar under its content; a group lines keys up along shared seams.
npx shadcn@latest add https://formula2030.alexandrejoly.me/A machined tile for one control, with a lamp that lights while the control is on.
npx shadcn@latest add https://formula2030.alexandrejoly.me/Parts that serve every register at once.
Interaction sounds for every Formula component, synthesised in the browser: keys thock, knobs tick, bands thud, rulers blip. Mount it once; it ships no audio files.
npx shadcn@latest add https://formula2030.alexandrejoly.me/