About

Tabetalt Kit is the technical implementation of Tabetalt Designsystem. It is based on Theme UI and features theme and a collection of components for use in Tabetalt applications.

Our intentions are to stylize according to Tabetalt Designsystem on all Theme UI components.

Quickstart

All components are included in one package. Install it as such:

▶ yarn add @tabetalt/kit

Install necessary peer dependencies.

▶ yarn add theme-ui@next

Remember to include Google Fonts No fonts are packaged with the library. Therefore, you'll need to add a Link to it, as such:

<link
  href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
  rel="stylesheet"
/>

Example

You'll have to register the ThemeProvider in order to make the theme work.

import { ThemeProvider, Styled } from 'theme-ui';
import { theme } from '@tabetalt/kit';

const App = () => (
  <ThemeProvider theme={theme}>
    <Styled.h1>Hello world!</Styled.h1>
  </ThemeProvider>
);

Documentation

Apart from this README, you can find details and examples of using the SDK in the following places:

• Storybook
• Theme UI
• Theme UI Components