An example of a React component library structure with TypeScript, Vite, Tailwind, Vitest, Testing Library and Storybook.
Install the package:
npm install react-components-lib-example
In your Tailwind configuration, import the design system configuration as a preset and into the content source:
/** @type {import("tailwindcss"_).Config} */
module.exports = {
presets: [
require("react-components-lib-example/tailwind.config.cjs")
],
content: [
"./node_modules/react-components-lib-example/dist/**/*.{js,ts}",
// ...
]
// ...
};
element.tsx
: component (React, Tailwind)element.test.tsx
: tests (Vitest, Testing Library)element.story.tsx
: story definitions (Storybook)element.type.ts
: types (TypeScript)index.ts
: barrel export