Spektral UI

A Svelte 5 design system. Customisable, composable and accessible. WCAG-focused and theme driven.

Documentation · npm

Install

npm i @abhc/spektral-ui

Quick start

Import the token file once in your app entry point (e.g. +layout.svelte):

import '@abhc/spektral-ui/tokens.css';

Then use components anywhere:

<script>
  import { Button, Card, Badge } from '@abhc/spektral-ui';
</script>

<Card>
  <Badge palette="success">New</Badge>
  <Button palette="accent">Get started</Button>
</Card>

Components

40+ components across layout, controls, overlays, feedback and content.

Layout

Controls

Overlays

Feedback

Content

Branding

Prop system

All components share a consistent prop vocabulary:

• variant — visual style: flat · outlined · ghost · naked
• palette — semantic color: accent · tone · neutral · error · warning · success · info
• size — sm · md · lg
• elevation — shadow level: none · subtle · hard

Not every prop applies to every component — check the docs for per-component APIs.

Token system

tokens.css exposes CSS custom properties for colors (OKLCH palettes), typography, radii and shadows. Light and dark modes are built in and toggled via the data-theme attribute or the ModeToggle component.

To customize the theme, override the CSS variables in your own stylesheet after importing tokens.css:

:root {
  --sk-accent-hue: 260;
  --sk-radius-md: 8px;
}

Utilities

Two utilities are exported for building custom components that integrate with the variant system:

import { createVariant } from '@abhc/spektral-ui';
import type { PatternPreset } from '@abhc/spektral-ui';

• createVariant(config) — resolves a set of prop values to a class string using a declarative config object. Used internally by every component.
• PatternPreset — type for the SVG pattern presets available in Hero, TileGrid and Footer: scallops · grid · sunburst · lozenge · sunrise · atoms · waves · diamonds · shippo · kumi_kikko.

Color conversion helpers are also exported for working with the OKLCH color space:

import { hexToOklch, oklchToHex, hexToRgbChannels } from '@abhc/spektral-ui';
import type { Oklch } from '@abhc/spektral-ui';

• hexToOklch(hex) — converts a hex color string to an Oklch object { l, c, h }.
• oklchToHex(l, c, h) — converts OKLCH channels back to a hex string, with automatic gamut clamping.
• hexToRgbChannels(hex) — returns the RGB channels as a comma-separated string (e.g. "255, 128, 0"), useful for CSS rgb() / rgba() variables.

All component prop types are also exported from the main entry point, so you never need to reach into dist/ internals:

// Data shapes (passed as arrays / objects to components)
import type { CommandItem, CommandGroup } from '@abhc/spektral-ui';
import type { BadgeItem }                 from '@abhc/spektral-ui';
import type { Swatch }                    from '@abhc/spektral-ui';
import type { Tile, TileMedia }           from '@abhc/spektral-ui';
import type { Columns, HeroSpan }         from '@abhc/spektral-ui';

// Prop union types (palette, direction, size…)
import type { Elevation }                                          from '@abhc/spektral-ui';
import type { PopoverPalette, PopoverElevation,
              PopoverDirection, PopoverAlign }                     from '@abhc/spektral-ui';
import type { SearchFieldSize, SearchFieldPalette }                from '@abhc/spektral-ui';
import type { TooltipPalette, TooltipElevation,
              TooltipDirection, TooltipAlign, TooltipSize }        from '@abhc/spektral-ui';
import type { TimelineVariant, TimelinePalette, TimelineSize,
              TimelineElevation, TimelineOrientation,
              TimelineConnectorStyle }                             from '@abhc/spektral-ui';

Requirements

• Svelte ^5.0.0
• Modern browsers (CSS custom properties, :has, color-mix)

Documentation

Full docs, component API, live examples and theming guide: spektral.combe.tf

License

GPL-3.0 — see LICENSE.