Quick Start

pnpm add @brijbyte/agentic-ui @base-ui/react react react-dom
# or
npm install @brijbyte/agentic-ui @base-ui/react react react-dom

/* app/globals.css */
@import "tailwindcss";

/* Layer order is already established by tailwind */
@import "@brijbyte/agentic-ui/reset";
@import "@brijbyte/agentic-ui/tokens";
@import "@brijbyte/agentic-ui/tailwind-theme";

/* Import once at the root of your app */
@import "@brijbyte/agentic-ui/styles";

/* Establishes the correct CSS cascade order.
   Already included in tokens.css — you only need this
   if you're importing component CSS without tokens. */

@import "@brijbyte/agentic-ui/layer-order";

document.documentElement.dataset.theme = "light"; // force light
document.documentElement.dataset.theme = "dark"; // force dark
delete document.documentElement.dataset.theme; // follow OS

// Per-component (recommended — tree-shakable)
import { Button } from "@brijbyte/agentic-ui/button";
import { Badge } from "@brijbyte/agentic-ui/badge";
import { Input } from "@brijbyte/agentic-ui/input";
import { Drawer } from "@brijbyte/agentic-ui/drawer";

import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/badge.css";
import "@brijbyte/agentic-ui/input.css";
import "@brijbyte/agentic-ui/drawer.css";

// Barrel (convenient for prototyping)
import { Button, Badge, Input } from "@brijbyte/agentic-ui";

import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/badge.css";
import "@brijbyte/agentic-ui/input.css";

import { Button } from "@brijbyte/agentic-ui/button";
import { Input } from "@brijbyte/agentic-ui/input";

import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/input.css";

export function LoginForm() {
  return (
    <form>
      <Input placeholder="Email" type="email" />
      <Input placeholder="Password" type="password" />
      <Button variant="solid" type="submit">
        Sign in
      </Button>
    </form>
  );
}

// tsconfig.json (or bundler alias)
{
  "compilerOptions": {
    "paths": {
      "@ui/*": ["./src/components/ui/*"]
    }
  }
}

// ./src/components/ui/accordion.ts
import '@brijbyte/agentic-ui/accordion.css';
export * from '@brijbyte/agentic-ui/accordion';

// usage
import { Accordion } from '@ui/accordion';

<Accordion ... />

import * as BaseDialog from "@base-ui/react/dialog";
import { DialogBackdrop, DialogPopup, DialogTitle, DialogClose } from "@brijbyte/agentic-ui/dialog";

// Raw base-ui Root (controlled state, custom refs) +
// styled parts (design-system appearance)
<BaseDialog.Root open={open} onOpenChange={setOpen}>
  <BaseDialog.Portal>
    <DialogBackdrop />
    <BaseDialog.Viewport>
      <DialogPopup>
        <DialogTitle>Are you sure?</DialogTitle>
        <DialogClose>Cancel</DialogClose>
        <button onClick={onConfirm}>Confirm</button>
      </DialogPopup>
    </BaseDialog.Viewport>
  </BaseDialog.Portal>
</BaseDialog.Root>;

import { ButtonStyles } from "@brijbyte/agentic-ui/button";
import "@brijbyte/agentic-ui/button.css";

// ButtonStyles is a Record<string, string> — keys are the
// semantic names, values are the hashed CSS module class names.
//
// Available keys for Button:
//   root, variant-solid, variant-soft, variant-outline, variant-ghost,
//   tone-primary, tone-secondary, tone-destructive, tone-success,
//   tone-warning, size-xs, size-sm, size-md, size-lg, icon-only,
//   loader, loader-visible, spinner, content-loading

console.log(ButtonStyles.root);
//=> "root_a1b2c3"  (hashed at build time)

console.log(ButtonStyles["variant-solid"]);
//=> "variant-solid_x9y8z7"

import { ButtonStyles } from "@brijbyte/agentic-ui/button";
import { DialogStyles, DrawerStyles } from "@brijbyte/agentic-ui";

// In a test — assert a class was applied
expect(el.className).toContain(ButtonStyles.root);

// At runtime — read the hashed class name
const cls = ButtonStyles["variant-solid"]; // "variant-solid_a1b2c3d4"
el.classList.add(cls!);

// Other style maps are also available from the barrel
console.log(DialogStyles.content, DrawerStyles.backdrop);

/* Target a component's internal parts with the Styles object.
   Use :global() in a CSS module, or reference the hashed class
   directly in a plain stylesheet. */

/* Option 1: Override in a CSS module using :global() */
.my-toolbar :global(.root_a1b2c3) {
  border-radius: 999px;
}

/* Option 2: Use the Styles object in JS to build a selector */
/* const selector = `.${ButtonStyles.root}`;               */
/* document.querySelector(selector)?.classList.add("pill"); */

/* Option 3: Override tokens scoped to the component */
/* Every component reads design tokens — override them
   in a wrapper to retheme just that subtree. */
.branded-buttons {
  --color-accent: oklch(0.65 0.24 280);
  --color-accent-hover: oklch(0.60 0.24 280);
  --radius-md: 999px;
}

import { ButtonStyles } from "@brijbyte/agentic-ui/button";
import { render, screen } from "@testing-library/react";
import { Button } from "@brijbyte/agentic-ui/button";

// Assert a specific style variant was applied
const { container } = render(<Button variant="soft" />);
const btn = container.firstElementChild!;

expect(btn.className).toContain(ButtonStyles["variant-soft"]);
expect(btn.className).not.toContain(ButtonStyles["variant-solid"]);

// Query by the hashed class name
const root = container.querySelector(`.${ButtonStyles.root}`);
expect(root).toBeInTheDocument();

/* Instead of the full bundle… */
@import "@brijbyte/agentic-ui/styles";

/* …import only what you use: tokens + reset are always needed,
   then add one line per component. */
@import "@brijbyte/agentic-ui/layer-order";
@import "@brijbyte/agentic-ui/reset";
@import "@brijbyte/agentic-ui/tokens";
@import "@brijbyte/agentic-ui/button.css";
@import "@brijbyte/agentic-ui/input.css";
@import "@brijbyte/agentic-ui/dialog.css";

/* With Tailwind v4 */
@import "tailwindcss";
@import "@brijbyte/agentic-ui/tokens";
@import "@brijbyte/agentic-ui/reset";
@import "@brijbyte/agentic-ui/tailwind-theme";
@import "@brijbyte/agentic-ui/button.css";
@import "@brijbyte/agentic-ui/input.css";
@import "@brijbyte/agentic-ui/dialog.css";

@import "@brijbyte/agentic-ui/styles";

:root {
  --font-mono: "Cascadia Code", monospace;
  --color-accent-9: #7c3aed; /* purple accent */
  --radius-md: 2px; /* sharper corners */
}