@galaxy-io/dls

Galaxy Design Language System — a React component library with precompiled styles. Zero bundler configuration required.

Installation

npm install @galaxy-io/dls
# or
pnpm add @galaxy-io/dls

Peer dependencies: react (18 or 19), react-dom, @tanstack/react-query

Quick Start

// 1. Import the stylesheet once at your app root
import "@galaxy-io/dls/styles.css";

// 2. Wrap your app in the theme provider
import { GalaxyThemeProvider } from "@galaxy-io/dls/theme/GalaxyTheme";

// 3. Import components by subpath
import Button, { ButtonVariant, ButtonSize } from "@galaxy-io/dls/buttons/Button";
import Text, { TextVariant, TextSize } from "@galaxy-io/dls/text/Text";

function App() {
  return (
    <GalaxyThemeProvider>
      <Text variant={TextVariant.PRIMARY} size={TextSize.BODY_MD}>
        Hello, Galaxy
      </Text>
      <Button
        label="Get Started"
        variant={ButtonVariant.PRIMARY}
        size={ButtonSize.MEDIUM}
        onClick={() => {}}
      />
    </GalaxyThemeProvider>
  );
}

Theming

The provider respects system preferences by default:

import { GalaxyThemeProvider } from "@galaxy-io/dls/theme/GalaxyTheme";
import { GalaxyTheme } from "@galaxy-io/dls/theme/constants";

// System preference (default)
<GalaxyThemeProvider />

// Force a specific theme
<GalaxyThemeProvider initialTheme={GalaxyTheme.DARK} />

Access theme state in components:

import { useGalaxyTheme } from "@galaxy-io/dls/theme/GalaxyTheme";

function ThemeSwitcher() {
  const { activeTheme, selectedTheme, setTheme } = useGalaxyTheme();
}

Components

Import from subpaths — there is no barrel export:

import Button from "@galaxy-io/dls/buttons/Button";
import Text from "@galaxy-io/dls/text/Text";

To explore all available components, visit Storybook.