@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.

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 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` }} />;
};