@hakistudio/hakiui

Pixel-orange React UI components powered by CSS variables and Tailwind utility classes, with built-in light (warm paper-white) and dark (warm charcoal) modes. Source is split per component under src/components/ui/ for maintainability, granular installs, and tree-shaking-friendly subpath exports.

Install

npm install @hakistudio/hakiui

Also install peer dependencies if your app does not already have them:

npm install react react-dom lucide-react

Tailwind setup (required)

HakiUI components use Tailwind utility classes. To ensure those classes are generated in consuming apps, import the package stylesheet in your global CSS:

@import "tailwindcss";
@import "@hakistudio/hakiui/styles.css";

Framework quick setup

React + Vite

1. Install Tailwind v4 in your Vite app.
2. Add this to your global stylesheet:

@import "tailwindcss";
@import "@hakistudio/hakiui/styles.css";

3. Wrap your app with HakiProvider.

Next.js (App Router)

1. Ensure your app/globals.css contains:

@import "tailwindcss";
@import "@hakistudio/hakiui/styles.css";

2. Wrap your root layout body content (or a shared client boundary) with HakiProvider.

Astro

1. Install and configure @astrojs/react.
2. Enable Tailwind in Astro.
3. In your shared stylesheet:

@import "tailwindcss";
@import "@hakistudio/hakiui/styles.css";

4. Render HakiUI React components inside .tsx React components and use HakiProvider.

Usage (barrel import)

import { HakiProvider, Button, Input, defaultTheme } from "@hakistudio/hakiui";

export default function App() {
  return (
    // mode: "light" (default) or "dark"
    <HakiProvider initialTheme={{ ...defaultTheme, mode: "light" }}>
      <div
        className="p-6 space-y-4 min-h-screen"
        style={{ background: "var(--bg)" }}
      >
        <Input placeholder="Email address" />
        <Button variant="primary">Continue</Button>
      </div>
    </HakiProvider>
  );
}

Light / dark mode

HakiProvider ships two built-in neutral palettes and applies one based on theme.mode ("light" by default). Toggle at runtime with useTheme:

import { useTheme } from "@hakistudio/hakiui";

const ModeToggle = () => {
  const { theme, setTheme } = useTheme();
  return (
    <button
      onClick={() =>
        setTheme({ ...theme, mode: theme.mode === "dark" ? "light" : "dark" })
      }
    >
      Toggle mode
    </button>
  );
};

The default brand theme is pixel orange (#F05423) on a warm white background with IBM Plex Mono and a 4px radius. Every token can be overridden via initialTheme or setTheme.

Usage (per-component import, best for bundle size)

Each component is a separate entry so bundlers can include only what you import:

import { HakiProvider } from "@hakistudio/hakiui/theme-provider";
import { Button } from "@hakistudio/hakiui/button";
import { Input } from "@hakistudio/hakiui/input";

Utilities:

import { hexToRgb } from "@hakistudio/hakiui/hex-to-rgb";
import { getRadiusStyle, type Radius } from "@hakistudio/hakiui/radius";

Copy-paste (shadcn-style)

You can copy individual files from this repo into your app, for example:

• src/components/ui/Button.tsx → your components/ui/button.tsx
• src/lib/radius.ts, src/lib/hex-to-rgb.ts as needed
• src/components/theme-provider.tsx for HakiProvider / useTheme

Adjust import paths to match your project aliases.

Styling note

This package uses Tailwind utility classes and CSS variables. HakiProvider provides the --ui-* brand variables plus the neutral tokens (--bg, --bg-soft, --surface, --border, --input, --text, --text-muted, --hover) for the active mode, so it should wrap every area where you render HakiUI components. To use your own neutrals, override those variables on a descendant element (or import lightNeutrals / darkNeutrals as a starting point).

Package exports

| Subpath | Exports | |---------|---------| | @hakistudio/hakiui | Full public API (re-exports) | | @hakistudio/hakiui/styles.css | Tailwind v4 source hints for HakiUI components | | @hakistudio/hakiui/theme-provider | HakiProvider, useTheme, defaultTheme, types | | @hakistudio/hakiui/hex-to-rgb | hexToRgb | | @hakistudio/hakiui/radius | getRadiusStyle, Radius | | @hakistudio/hakiui/button … /modal | Individual UI modules |

Publish (maintainer)

Releases are published to npm via Trusted Publishing (OIDC) from GitHub Actions — no long-lived NPM_TOKEN required.

1. On npm package settings, add a Trusted Publisher:
   • Organization or user: akhsanhakiki
   • Repository: hakiui
   • Workflow filename: publish.yml
   • Environment name: leave blank
   • Allowed actions: npm publish
2. Bump version in package.json, commit, then tag and push:

# after bumping package.json "version" (e.g. 2.0.1)
git tag v2.0.1
git push origin v2.0.1

The .github/workflows/publish.yml workflow runs on v* tags and publishes @hakistudio/hakiui.

Manual fallback (local):

npm login
npm publish --access public