@ttoss/ui

@ttoss/ui is a library of React low level components for building user interfaces and defining the design system of your application. It is built on top of Theme UI: The Design Graph Framework, so that you'll be able to consult the Theme UI documentation to learn more about the design system and the components.

ESM Only

This package is ESM only.

Installation

pnpm add @ttoss/ui @ttoss/react-icons @emotion/react

Quickstart

Create a theme object to define the design tokens of your application.

import type { Theme } from '@ttoss/ui';

export const theme: Theme = {
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
};

Pass your theme to the ThemeProvider component at the root of your application.

import { Heading, ThemeProvider } from '@ttoss/ui';
import { theme } from './theme';

export const App = () => (
  <ThemeProvider theme={theme}>
    <Heading as="h1" sx={{ color: 'primary' }}>
      Hello
    </Heading>
  </ThemeProvider>
);

Now, you can use the components of the library in your application and access the design tokens defined in your theme through the sx prop.

import { Flex, Text, Box, Button } from '@ttoss/ui';

export const Component = () => {
  return (
    <Flex sx={{ flexDirection: 'column' }}>
      <Text>Text Value</Text>
      <Button
        sx={{
          backgroundColor: 'primary',
        }}
      >
        Button Primary
      </Button>
    </Flex>
  );
};

Note

You don't need to use the custom /** @jsxImportSource theme-ui */ pragma if you use the sx prop directly on the components of the library.

Components

You can check all the components of the library @ttoss/ui on the Storybook.

Global

Wrapper around the Emotion Global component, made Theme UI theme-aware.

import { Global } from '@ttoss/ui';

export const Provider = (props) => {
  return (
    <Global
      styles={{
        button: {
          m: 0,
          bg: 'primary',
          color: 'background',
          border: 0,
        },
      }}
    />
  );
};

Misc

keyframes

import { Box, keyframes } from '@ttoss/ui';

const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });

export const Component = (props) => {
  return <Box {...props} sx={{ animation: `${fadeIn} 1s backwards` }} />;
};