Installation

The gadget-ui package requires React 18+, Tailwind CSS 3.4+, and Node 18+. It ships with ESM and CJS builds plus TypeScript definitions.

Install with package managers

pnpm
npm
yarn

pnpm add @aurelienbbn/gadget-ui react react-dom tailwindcss

npm install @aurelienbbn/gadget-ui react react-dom tailwindcss

yarn add @aurelienbbn/gadget-ui react react-dom tailwindcss

Peer dependencies

The package declares these peer dependencies:

Package	Version	Purpose
`react`	`>=18.0.0`	Component rendering
`react-dom`	`>=18.0.0`	DOM bindings
`tailwindcss`	`>=3.4.0`	Design token integration and utility classes

Tailwind CSS 4.x is supported. The preset uses CSS custom properties that work with both v3 and v4.

Direct dependencies

The package bundles these dependencies (you do not need to install them separately):

Package	Version	Purpose
`@fontsource-variable/inter`	`^5.2.8`	Variable Inter font
`@fontsource/inconsolata`	`^5.2.8`	Inconsolata monospace font (400, 700 weights)
`class-variance-authority`	`^0.7.1`	Component variant management
`clsx`	`^2.1.1`	Conditional class name utility
`shiki`	`^3.22.0`	Syntax highlighting in CodeBlock component
`tailwind-merge`	`^3.5.0`	Merges Tailwind classes in `cn()` utility

Package exports

The package exposes three entry points:

package.json exports

{
  "exports": {
    "./components": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    },
    "./tailwind-preset": {
      "import": "./dist/tailwind-preset.js",
      "require": "./dist/tailwind-preset.cjs"
    },
    "./styles": "./src/styles/globals.css"
  }
}

Import paths

import { Button, Badge, Card } from "@aurelienbbn/gadget-ui/components";

import { gadgetPreset } from "@aurelienbbn/gadget-ui/tailwind-preset";

@import "@aurelienbbn/gadget-ui/styles";

Verify installation

Check that the package is available:

node -e "console.log(require('@aurelienbbn/gadget-ui/components').Button)"

Expected output:

{ [Function: Button] displayName: 'Button' }

Next steps

After installation, configure Tailwind and import global styles:

Configure Tailwind

Add the gadget-ui preset to tailwind.config.js:

tailwind.config.js

import { gadgetPreset } from "@aurelienbbn/gadget-ui/tailwind-preset";

export default {
  presets: [gadgetPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@aurelienbbn/gadget-ui/dist/**/*.js",
  ],
};

You must include ./node_modules/@aurelienbbn/gadget-ui/dist/**/*.js in your content array so Tailwind detects component classes.

Import global styles

Add to your main CSS file:

styles/globals.css

@import "@aurelienbbn/gadget-ui/styles";

This imports:

Inter Variable font
Inconsolata monospace font (400, 700)
CSS custom properties for colors, shadows, radius
Dark and light theme definitions

Use components

Import and render:

src/App.tsx

import { Button } from "@aurelienbbn/gadget-ui/components";

export default function App() {
  return <Button variant="primary">Click me</Button>;
}

See Setup for a detailed walkthrough of Tailwind configuration.

TypeScript support

The package includes TypeScript definitions (dist/index.d.ts). Type exports are available:

import type { ButtonProps, BadgeProps } from "@aurelienbbn/gadget-ui/components";

const props: ButtonProps = {
  variant: "primary",
  size: "md",
  onClick: () => console.log("clicked"),
};

Get Started

ESLint Plugin

UI Components

Install with package managers

Peer dependencies

Direct dependencies

Package exports

Import paths

Verify installation

Next steps

TypeScript support

Next steps

Setup

Theming

​Install with package managers

​Peer dependencies

​Direct dependencies

​Package exports

​Import paths

​Verify installation

​Next steps

​TypeScript support

​Next steps

Setup

Theming

Install with package managers

Peer dependencies

Direct dependencies

Package exports

Import paths

Verify installation

Next steps

TypeScript support

Next steps