Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/aurelienbobenrieth/gadget/llms.txt

Use this file to discover all available pages before exploring further.

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 add @aurelienbbn/gadget-ui react react-dom tailwindcss

​
Peer dependencies

The package declares these peer dependencies:
PackageVersionPurpose
react>=18.0.0Component rendering
react-dom>=18.0.0DOM bindings
tailwindcss>=3.4.0Design 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):
PackageVersionPurpose
@fontsource-variable/inter^5.2.8Variable Inter font
@fontsource/inconsolata^5.2.8Inconsolata monospace font (400, 700 weights)
class-variance-authority^0.7.1Component variant management
clsx^2.1.1Conditional class name utility
shiki^3.22.0Syntax highlighting in CodeBlock component
tailwind-merge^3.5.0Merges 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";

​
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:
1

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.
2

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
3

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"),
};

​
Next steps

Setup

Configure Tailwind and import global styles

Theming

Learn about design tokens and theme switching

Build docs developers (and LLMs) love

Get started for freeTalk to us