Truss UI

A Svelte 5 design system for SvelteKit that blends Material 3’s tonal surfaces with Blueprint’s density and precision, built from scratch with no UI-library dependencies.

Get started Browse components Live demo

npm install @ruckc/truss-ui

Dense and precise

32px controls, 1px structure and tight tables, with Blueprint’s rigour and Material’s tonal fills, elevation and rounded surfaces.

Zero runtime dependencies

The core needs only Svelte. Charts and graphs are plain SVG; the map brings OpenLayers as a peer you control. Fonts are bundled and served by your own build.

Everything an app needs

Forms and pickers (no native select, date or time inputs), data tables with virtual scrolling, trees, menus, dialogs, an app shell, and more: 90+ components.

Accessible by construction

Names, ARIA, focus and complete keyboard maps are audited for every combination of every component’s options.

Themeable

One set of CSS tokens drives the lot, light and dark, including charts, graphs and maps.

Tested like a library

Tens of thousands of browser tests sweep option matrices and verify behaviour: async races, geometry, routing, virtual windows.

Packages

@ruckc/truss-ui

Core components, tokens, fonts and icons.

@ruckc/truss-chart

Line, bar, donut and histogram charts in SVG.

@ruckc/truss-graph

A node/edge editor with custom nodes and edge routers.

@ruckc/truss-ol

An OpenLayers map styled by the tokens.

This site is the demo

Every page here is built with Truss UI itself: the shell, navigation, tables, playgrounds and forms. Try the form controls, data table modes, graph editor and charts.