To use this package, please install the following packages in your existing React App project:

npm install @t3n/components @t3n/theme

After that you can use the exported components of the packages.

First you need to wrap your App with the ThemeProvider-Component that is exported by styled-components and supply the @t3n/theme as a prop.

Your app component could look similar to this:

import { ThemeProvider } from 'styled-components';
import { theme } from '@t3n/theme';

const App = ({ children }) => {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default App;

Now you can use all components provided by @t3n/components and shown in @t3n/storybook inside your App.

Furthermore you are able to use our Design System for styling components. That could look like this:

import styled, { css } from 'styled-components';
import { color, space } from 'styled-system';
import { Card } from '@t3n/components';

const BackgroundCard = styled(Card)`
  ${({ theme }) => color({ theme, bg: 'background.secondary' })};
  ${({ theme }) => space({ theme, p: 3 })};
`;