@hexdspace/react

React basic features, UI components, plus a Tailwind v4-compatible theme CSS.

Install

pnpm add @hexdspace/react

Peer dependencies (install in your app):

pnpm add react react-dom react-router-dom radix-ui lucide-react react-toastify @tanstack/react-query

Tailwind requirements (for the theme + utilities):

pnpm add -D tailwindcss tailwind-scrollbar

if you're on Vite:

pnpm add -D @tailwindcss/vite

if using postcss instead:

pnpm add @tailwindcss/postcss

and configure your postcss pipeline to include tailwind.

Usage

Import the theme into your Tailwind entry stylesheet and specify tailwind config:

/* src/index.css */
@import "@hexdspace/react/css";
@config "../tailwind.config.ts"; /* adjust path */

/* Your app styles */

Tailwind config

Point Tailwind at this package so it can generate utilities used by the components.

For a published package:

// tailwind.config.js (app)
export default {
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx,js,jsx}",
    "./node_modules/@hexdspace/react/dist/**/*.{js,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
};

For a monorepo/workspace:

// tailwind.config.js (app)
export default {
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx,js,jsx}",
    "../packages/react/src/**/*.{ts,tsx}",
  ],
};

Component usage

import { Button } from "@hexdspace/react";

export function Example() {
  return (
    <Button variant="outline" chrome="push">
      Click me
    </Button>
  );
}