Tabler React UI

Modern React component library built on top of the Tabler design system. The package bundles production‑ready UI primitives (buttons, forms, tables, navigation, site chrome, etc.), typed with TypeScript and distributed as an ES/CJS dual build.

Installation

npm install tabler-react-ui
# or
yarn add tabler-react-ui

Peer dependencies react and react-dom have to be installed manually (v18 or v19).

Getting Started

import { Button, Card, Page } from "tabler-react-ui";
import "tabler-react-ui/dist/style.css";

export function Example() {
  return (
    <Page>
      <Page.Body className="py-4">
        <Card>
          <Card.Body>
            <Card.Title>Hello from Tabler React UI</Card.Title>
            <Button color="primary">Launch action</Button>
          </Card.Body>
        </Card>
      </Page.Body>
    </Page>
  );
}

Styling

• Import tabler-react-ui/dist/style.css once at the root of your application.
• To customise the theme, override CSS variables or copy src/tabler.scss into your project and compile with your own Sass pipeline.

Development

Commands are executed from the repository root:

| Command | Description | | --- | --- | | npm run dev | Runs the component library in Vite dev mode. | | npm run storybook | Starts Storybook with interactive playgrounds. | | npm run build | Builds the production bundles (dist/index.js, dist/index.cjs, dist/style.css, declarations). | | npm run lint | ESLint validation. |

The example playground under example/ can be launched with npm run example:dev.

Publishing

1. Run npm run build – this invokes Vite (for the JS/CSS bundles), the TypeScript declaration build with tsc -p tsconfig.build.json, and the post-build script that copies supporting assets into dist/.
2. Run npm pack or npm publish. The package is configured to ship only the dist folder via the "files": ["dist"] whitelist in package.json.

Contributing

Bug reports and feature requests are welcome via GitHub issues. When contributing code:

1. Create a topic branch (e.g. feature/site-wrapper-refactor).
2. Add relevant unit/story tests when possible.
3. Run npm run lint and npm run build to ensure the library compiles.
4. Open a pull request with a concise description of the change.

MIT © Tabler contributors