React Storybook Component Library

Tech

• Mantine as the base for the components, not headless so it does have an opininated way of styling
• Tailwind for styling (this may be removed in the future since there isn't too much styling on top of mantine anyway)
• Storybook for interacting and visually testing component library
• Vite for bundling and building the component library
• Typesafety with TypeScript

Storybook, React, Tailwind, and TypeScript are all powerful tools that can be combined to create a powerful web application. Storybook provides developers with a way to quickly prototype and develop components in isolation, while React provides the tools to quickly build out a web application. Tailwind provides a library of pre-built UI components and utility classes, while TypeScript adds type safety and autocompletion to the development process. Together, these tools provide developers with the tools they need to quickly and easily build complex, modern web applications.

Blog Post

Checkout the blog post for this project if you're curious about any of the decisions or how anything was setup:

Setup

It is recommended to use pnpm for this project

if you don't have pnpm installed, run the following command:

npm install -g pnpm

Install packages

pnpm install

Start

pnpm run storybook

Build/Bundle Component Library

pnpm run build

Build/Bundle Storybook For Deployment

pnpm run build-storybook