@waystone/ui

@waystone/ui is the design system of Draekien-Industries.

Docs

Click the badge below to view the components in storybook.

Installation

Run the relevant script for your package manager

| Package manager | Script | | --------------- | -------------------------------------------------------------- | | npm | npm i @waystone/ui@latest @emotion/react@11 [email protected] | | yarn | yarn add @waystone/ui@latest @emotion/react@11 [email protected] | | pnpm | pnpm i @waystone/ui@latest @emotion/react@11 [email protected] |

Usage

Import the Waystone component and use it inside your App.tsx

export const App = () => {
  return (
    <StrictMode>
      <Waystone>
        <MyApp />
      </Waystone>
    </StrictMode>
  );
};

Customizing the theme

Provide your custom theme into the theme prop of the Waystone component. The default theme will be merged with the one you provide.

export const App = () => {
  return (
    <StrictMode>
      <Waystone
        theme={{
          colors: {
            primary: 'blue',
          },
        }}
      >
        <MyApp />
      </Waystone>
    </StrictMode>
  );
};