Installation

Prepare your projectCopy Anchor Link

In an existing Next.js or Vite project, initialize shadcn if you haven't already:

npx shadcn@latest init

Need an app first? Follow the Next.js or Vite setup guide, then return here.

Add a componentCopy Anchor Link

Run this from your app directory:

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

This installs the Button source, its dependencies and theme stylesheets, including an optional global bridge. For JavaScript, set "tsx": false in components.json; the CLI converts the source to JSX/JS. For an existing shadcn app, follow Using with shadcn to keep component files and theme settings separate.

Import the stylesCopy Anchor Link

Add these imports after Tailwind in your global stylesheet. These paths assume your app uses a src/ directory.

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

Keep your app's existing CSS imports and variables. If your directories differ, adjust the relative paths to the installed styles/ folder.

The last import intentionally applies Hextech values to ordinary Tailwind utilities across the app. Omit it when using scoped Hextech regions beside existing shadcn components.

Set the themeCopy Anchor Link

Add these attributes to your existing root <html> element:

<html data-hextech-ui-theme="hextech" data-color-mode="dark"></html>

Use data-color-mode="light" for light mode. In Next.js, edit src/app/layout.tsx or .jsx; in Vite, edit index.html.