ThemesThemes HooksHooks ColorsColors IconsIcons

Getting started

Install Themes and start building in minutes.

Themes is a pre-styled component library that is designed to work out of the box with minimal configuration.

Installation

Getting up and running is quick and easy.

1. Install Themes

Install the package from your command line.

npm install @teasim/themes

2. Import the CSS file

Import the global CSS file at the root of your application.

import "@teasim/themes/styles.css";

3. Add the Theme component

Add Theme to your application, wrapping the root component inside of body.

import { Theme } from "@teasim/themes";

export default function () {
  return (
    <html>
      <body>
        <Theme>
          <MyApp />
        </Theme>
      </body>
    </html>
  );
}

4. Start building

You are now ready to use Teasim Themes components.

import { Flex, Text, Button } from "@teasim/themes";

export default function MyApp() {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Teasim Themes :)</Text>
      <Button>Let's go</Button>
    </Flex>
  );
}

Customizing your theme

Configuration is managed and applied via the Theme component.

Basic configuration

Pass configuration to the Theme to customize appearance.

<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
  <MyApp />
</Theme>

Using the theme panel

ThemePanel is a drop-in component that allows you to preview the theme in real time. Visit the component playground to see it in action.

To add ThemePanel to your app, import it from the package and drop it inside your root Theme.

import { Theme, ThemePanel } from "@teasim/themes";

export default function () {
  return (
    <Theme>
      <MyApp />
      <ThemePanel />
    </Theme>
  );
}