A UI kit prototype that relies on CSS Modules for component styling, while playing nicely with front-end frameworks that use Tailwind CSS.
We created this repo because while we appreciate Tailwind CSS for front-end development of PoC and smaller applications, we don't feel it belongs in a component library. Tailwind CSS as a 'programmatic' atomic CSS system - is brilliant at what it does in preventing CSS rot and gradual CSS bloat - as well as making it clear how a layout or front-end component has been styled. It's also the ulitmate expression of what Thierry Koblentz was talking about in his 2103 article, Challenging CSS Best Practices.
It just doesn't belong in UI kits and libraries.
We built this with the following goals in mind:
- We'd like a structure and style system that will work with any framework -React, Vue.js, Solid, Svelte etc.
- We'd like to be able to easily target various front-end meta frameworks, from Astro, to Next.js to React Router v7 (formerly Remix) - and even plain old HTML/CSS.
- We'd like a good developer experience (DX), allowing us to develop our components in the 'kit' via tests and Storybook, as well as in a monorepo within the front-end target framework itself (Next.js, Vue etc.).
- We'd like our components' styles to be easily overridable - whether via 'style' attributes, Tailwind, regular CSS classnames and stylesheets, or any other style system being used by the front-end. We'd especially like to be able to override a component's styles without having to use CSS !important.
Install packages and build once...
pnpm install && pnpm build
To start the Next.js 15 and Astro apps in dev mode...
pnpm dev
To start Storybook for the ui kit.
cd packages/uikt
pnpm storybook
UI kit vars / colors have been registered with Tailwind in Next.js