@troychaplin79/idc-ui v0.0.1

Design UI

Personal design system and react component library of Troy Chaplin

The library is built with:

• React
• Storybook
• Tailwind CSS
• TypeScript
• Vite

Get Started

Install dependencies

yarn install

Start up Storybook

yarn storybook

Build

yarn build

Deployment

This project uses GitHub Actions to deploy the NPM Package and to build the Storybook docs.

How to use in a project

Install the package:

yarn add @troychaplin79/idc-ui

Import the css file:

/* yourmaincssfile.css */
@import '../node_modules/@troychaplin79/idc-ui/dist/index.css';

TailwindCSS

The CSS for this library is built with Tailwind. If the project you are building also uses Tailwind you can include this library as follows:

/* yourmaincssfile.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import '../node_modules/@troychaplin79/idc-ui/dist/index.css';

Update your Tailwind config file:

// tailwind.config.js
module.exports = {
  content: ['./node_modules/@troychaplin79/idc-ui/**/*.{js,ts,jsx,tsx}'],
}

References

• Setting up Storybook 7 with Vite and Tailwind CSS
• Build a Custom React Component Library With Storybook 7 Beta and Vite 4 in 2023