Skip to content

Latest commit

 

History

History

ui-lib

README.md

Taiko UI Library

Components

  • Footer
  • Icons
  • Button
  • ResponsiveController

Exported values

  • UI Kit colors
  • Dark Theme colors
  • Light Theme colors
  • Typography

Contributing

Development

The library includes Storybook for development. To start the Storybook server, run:

$ pnpm storybook

Build

The library builds and packs as a [Svelte library] with the following command:

$ pnpm build

Adding components

In order to add new components into the library to be used outside:

  1. Create a new component under src/lib/components/ directory.
  2. Export the component on src/lib/index.ts:
import { NewComponent } from './components/NewComponent';

export {
    Footer,
    ...
    NewComponent
};
  1. Now you can import it and use it in another project:
import { NewComponent } from '@taiko/ui-lib';

...

<NewComponent />

Exported values

Besides from the components, the library exports the configurations for TailwindCSS in src/theme/:

  • colors.js: Taiko's UI Kit core colors
  • dark-mode.js: TailwindCSS/DaisyUI dark mode configuration
  • light-mode.js: TailwindCSS/DaisyUI light mode configuration

All exported values from the src/theme directory are prefixed with tko- to avoid conflicts with other libraries and local definitions.