Skip to main content

Getting Started

The design system ships as two packages: @ttoss/fsl-theme (design tokens, themes, modes) and @ttoss/fsl-ui (semantic React components built on React Aria Components).

pnpm add @ttoss/fsl-ui @ttoss/fsl-theme react-aria-components

Mount the theme once at the root; every component reads CSS-variable tokens from it:

import { createTheme } from '@ttoss/fsl-theme';
import { ThemeProvider } from '@ttoss/fsl-theme/react';
import { Button } from '@ttoss/fsl-ui';

const theme = createTheme(); // base theme + dark alternate

export const App = () => {
  return (
    <ThemeProvider theme={theme} defaultMode="system">
      <Button evaluation="primary" onPress={() => console.log('pressed')}>
        Save
      </Button>
    </ThemeProvider>
  );
};

From here: