@galaxy-io/dls

The Galaxy Design Language System: the one React component library for Filament, the GX app and every Galaxy React surface. Monochrome, dense, hairline-quiet; precompiled Linaria CSS read through CSS custom properties, so a theme switch never re-renders the app.

Install

pnpm add @galaxy-io/dls

Node ≥ 22, React 18 or 19, ESM. Heavy single-component libraries (charts, tables, the code editor, code highlighting, Markdown, the cron and color inputs, 3D and animated brand marks) are optional peers; getting-started.md lists which subpath needs which.

Quick start

A new app in one command: Vite with the DLS Linaria preset, Biome with the DLS rules, the three stylesheets, GalaxyProvider, and a thin Filament-shaped app: file routes, ConnectRPC queries on a mock transport, the frame and two pages.

pnpm create @galaxy-io/galaxy-app my-app

--template blank writes the provider and one page only. getting-started.md lists the options; this is what the root of any Galaxy app looks like:

// Once, at the app root: component styles, tokens, fonts.
import "@galaxy-io/dls/styles.css";
import "@galaxy-io/dls/tokens.css";
import "@galaxy-io/dls/fonts.css";

import { PlusIcon } from "@phosphor-icons/react";
import Button, { ButtonVariant } from "@galaxy-io/dls/buttons/Button";
import Flex, { FlexDirection } from "@galaxy-io/dls/layout/Flex";
import Text, { TextSize, TextWeight } from "@galaxy-io/dls/text/Text";
import GalaxyProvider from "@galaxy-io/dls/theme/GalaxyProvider";

export function App() {
  return (
    <GalaxyProvider>
      <Flex direction={FlexDirection.COLUMN} gap={16} padding={24}>
        <Text as="h1" size={TextSize.HEADING_MD} weight={TextWeight.MEDIUM}>
          Sources
        </Text>
        <Flex gap={8}>
          <Button label="New source" icon={PlusIcon} />
          <Button label="Import" variant={ButtonVariant.SECONDARY} />
        </Flex>
      </Flex>
    </GalaxyProvider>
  );
}

• Import every component from its own subpath; its enums come from the same module. There is no barrel.
• GalaxyProvider is the one root: theme (System / Dark / Light), the overlay stack and toasts.
• Style your own code with Linaria and the token accessor t (@galaxy-io/dls/theme/tokens/t), set up with galaxyDls() from @galaxy-io/dls/vite. Lint with "extends": ["@galaxy-io/dls/biome"].

Documentation

| | | |---|---| | Getting started | Install, Vite, stylesheets, provider, SSR | | Theming | Themes and every token | | Components | Every component, when to use it, examples | | Patterns | How Galaxy screens are built | | Accessibility | The floor and the keyboard maps | | Migrating from 1.x | The codemod and every change since 1.6.1 | | Contributing | Working on this repository (AGENTS.md has the rules) | | Storybook | Every component, prop and state, in both themes |

Migrating from 1.x

npx @galaxy-io/dls-codemod src --report dls-migrate.json

The codemod rewrites everything mechanical and marks the rest with @dls-migrate <id> comments; docs/MIGRATION.md explains every id.

Claude skill

skills/galaxy-ui teaches Claude to design, build and structure Galaxy apps with this package: the app architecture create-galaxy-app scaffolds (stack, files and naming, routing and URL state, the ConnectRPC data layer and mocks, screen shells, forms, mountable modules), the brand rules, the component decision tables, tokens, patterns and complete screen recipes. Its DLS examples are type-checked against this repository (pnpm skill:check).

• Claude Code: copy the folder into your skills directory: cp -R skills/galaxy-ui ~/.claude/skills/ (or a project's .claude/skills/).
• Claude apps: run pnpm skill:pack and upload dist-skill/galaxy-ui.zip as a skill (Settings → Capabilities → Skills).

Details: skills/galaxy-ui/README.md.