Using with shadcn

Hextech uses Base UI and Tailwind CSS v4. Its hx- utilities use dedicated Hextech tokens, so the normal text-primary, font-sans and spacing settings in your existing app keep their meaning.

Keep component files separateCopy Anchor Link

Both libraries have files named button, input and field. Install Hextech into its own directory. Before the Hextech installation, temporarily set these aliases in your existing components.json, preserving its other settings:

{
  "aliases": {
    "components": "@/components/hextech",
    "ui": "@/components/hextech",
    "utils": "@/lib/hextech/cn",
    "lib": "@/lib/hextech",
    "hooks": "@/hooks/hextech"
  }
}

Review the CLI's proposed changes with --dry-run first. Run the component's installation command, then restore your original aliases before installing more standard shadcn components. Keep your existing files; do not overwrite an existing shadcn Button or Input.

npx shadcn@latest add https://hextech-ui.vercel.app/r/dialog.json

npx shadcn@latest add https://hextech-ui.vercel.app/r/input-group.json

With these aliases, import Hextech controls from @/components/hextech and helpers from @/lib/hextech. Other component pages show the default fresh-project paths; adjust them to your installation.

Import the isolated themeCopy Anchor Link

Import the installed styles after your app's Tailwind styles. Keep the app's existing shadcn variables and imports. The following paths assume src/app/globals.css:

@import 'tailwindcss';
@import '../styles/hextech-tokens.css';
@import '../styles/hextech-theme.css';
@import '../styles/hextech-tailwind.css';
@import '../styles/hextech-components.css';

Theme a regionCopy Anchor Link

Leave your existing root theme attributes in place. Wrap only the Hextech region with ThemeScope:

'use client';

import { ThemeScope } from '@/lib/hextech/theme-scope';
import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@/components/hextech/dialog';

export function HextechRegion() {
  return (
    <ThemeScope colorMode="dark">
      <Dialog>
        <DialogTrigger>Open Hextech panel</DialogTrigger>
        <DialogContent>
          <DialogTitle>Hextech settings</DialogTitle>
        </DialogContent>
      </Dialog>
    </ThemeScope>
  );
}

Use colorMode="light" for a light region. The scope carries its mode and explicit token overrides into library portals. Numeric spacing uses Hextech's 4px unit inside that region; the host app's spacing remains in force outside it. Keep controls that should retain the host theme outside the Hextech scope.

Theme the whole appCopy Anchor Link

For a Hextech-first app, set data-hextech-ui-theme="hextech" and data-color-mode on the root element, as shown in Theming. If you also want ordinary Tailwind color, font and size utilities throughout the app to use Hextech values, explicitly add the global bridge:

@import '../styles/hextech-tailwind-global.css';

The global bridge intentionally changes shared utilities. Keep it out of a mixed-theme installation. See Installation for a fresh project.