React Tailwind UI Library

A reusable React + Tailwind CSS component library scaffold that includes Storybook docs, Jest + React Testing Library tests, strict TypeScript, ESLint/Prettier, i18n (English, Norwegian Bokmål, Lithuanian), accessibility helpers, and light/dark theming.

Features

• React 18, TypeScript, Tailwind CSS 3 design system with tokens + dark mode via CSS variables.
• Component set: Button, Input, Select, Checkbox, Modal, Table, Tabs, Toast (with provider), Pagination, FormField.
• Storybook 7 with Docs/Controls, accessibility addon, Tailwind styling, design tokens, and preview decorators for Theme + Toast providers.
• Jest + React Testing Library with jsdom environment for fast unit tests.
• ESLint (TypeScript, React, Testing Library, jest-dom) + Prettier formatting.
• i18next setup with helper initI18n and translations for English, Norwegian Bokmål, Lithuanian.
• Build via tsup + Tailwind CLI, ready to publish to npm.

Scripts

pnpm install # install deps
pnpm lint    # lint TS/React files
pnpm test    # run unit tests
pnpm storybook        # start Storybook on :6006
pnpm storybook:build  # generate static Storybook
pnpm build   # bundle components + CSS to dist/

Development Workflow

1. Install dependencies – pnpm install (enable via corepack enable pnpm if needed).
2. Run Storybook – pnpm storybook for component-driven development with live docs.
3. Add/Update components – implement in src/components, export from src/index.ts, document with a stories/*.stories.tsx file, and add relevant tests under src/components/__tests__.
4. Style with tokens – use Tailwind classes powered by src/styles/tokens.css, or import tokens from @/tokens for JS usage. Respect dark-mode via [data-theme="dark"] or the provided ThemeProvider.
5. Internationalization – call initI18n({ lng: 'nb' }) when embedding in consuming apps; use useTranslation from the library for UI text.
6. Testing & linting – run pnpm test and pnpm lint before building. The pnpm check script runs lint + test + build for CI safety.
7. Build artifacts – pnpm build outputs dist/index.{cjs,mjs,d.ts} and dist/styles.css. Consumers import CSS via import '@ziliang/react-tailwind-ui/styles.css';.
8. Version & publish – bump the version in package.json, run pnpm build, then npm publish --access public (from the repo root, authenticated with npm).

Importing Components in Another App

import '@ziliang/react-tailwind-ui/styles.css';
import { Button, ThemeProvider, initI18n } from '@ziliang/react-tailwind-ui';

initI18n();

export const Example = () => (
  <ThemeProvider>
    <Button variant="secondary">Click me</Button>
  </ThemeProvider>
);

Project Structure

src/
  components/        # All UI primitives
  design-tokens/     # JS access to CSS tokens
  i18n/              # i18next setup + locales
  styles/            # Tailwind + CSS variables
  theme/             # ThemeProvider + hook
  utils/             # Shared helpers
stories/             # Storybook stories for each component
storybook/           # Storybook config

Publishing Checklist

1. pnpm check
2. Update README.md / CHANGELOG if needed
3. pnpm build
4. npm publish --access public
5. Tag the release in git

Enjoy building accessible, themeable UI blocks!