my-component-lib

A React component library built with TypeScript, SCSS, and Tailwind CSS.

Stack

| Tool | Purpose | |------|---------| | React 18 | UI primitives | | TypeScript | Type safety | | SCSS | Global component styles + design tokens | | CSS Modules | Scoped .module.scss styles | | Tailwind CSS | Utility classes | | Rollup | CJS + ESM dual-build | | Vite | Local dev preview app |

Getting started

npm install

# Start the dev preview app (http://localhost:5173)
npm run dev

# Build the library
npm run build

# Watch mode (library only)
npm run dev:lib

Dev preview

The dev/ folder is a standalone Vite app that imports directly from src/ — no build step required. Edit dev/src/App.tsx to test your components live.

Usage (after publishing)

import { Button, Card, Badge } from "my-component-lib";
import "my-component-lib/dist/styles.css"; // global styles

function App() {
  return (
    <Card title="Hello" subtitle="World">
      <Badge variant="success" dot>Live</Badge>
      <Button variant="primary">Get started</Button>
    </Card>
  );
}

Styling conventions

| File pattern | How it works | |---|---| | Component.scss | Global class names (.btn, .card) — included in dist/styles.css | | Component.module.scss | CSS Modules — scoped, hashed class names, injected with JS |

Project structure

my-component-lib/
├── src/
│   ├── components/
│   │   ├── Button/   Button.tsx · Button.scss (global)
│   │   ├── Card/     Card.tsx · Card.scss (global)
│   │   └── Badge/    Badge.tsx · Badge.module.scss (CSS Modules)
│   ├── styles/
│   │   └── globals.scss   ← Tailwind directives + CSS design tokens
│   ├── typings/
│   │   └── scss.d.ts      ← TypeScript types for .module.scss imports
│   └── index.ts           ← public API
├── dev/                   ← Vite dev preview app (not published)
│   ├── src/App.tsx
│   ├── vite.config.ts
│   └── index.html
└── rollup.config.mjs

Publishing

npm run build
npm publish