Manual Installation

To install the TORCH Glare Components Library manually, follow these steps.

Create glare.json

Create glare.json file in the root of your project, add the following code to the file.

glare.json

{
  "path": "./src" // the path where you want to install the components
}

Configure Tailwind

Install Tailwind css, configure your tailwindcss and try it functionality first then run this commands to install the required dependencies for tailwind css

For Tailwind CSS version 4

If you are using Tailwind CSS version 4, you need to add the following dependencies to your project.

npm install glare-typography@latest mapping-color-system-v4@latest glare-torch-mode@latest

Optional plugins but recommended

npm install tailwindcss-animate tailwind-scrollbar-hide

Then add the following code to your global.css file. Every @import must come BEFORE the @plugin rules — CSS requires imports to precede other at-rules, so a bundler silently drops any that come later, which would remove the colour variables and the radius / container / breakpoint scales.

global.css

@import "tailwindcss";
@import "mapping-color-system-v4/tailwindVars.css";
@import "glare-torch-mode/theme.css";
@plugin "glare-torch-mode";
@plugin "tailwind-scrollbar-hide";
@plugin "tailwindcss-animate";
@plugin "glare-typography";
@plugin "mapping-color-system-v4";

The theme.css import is required, and needs glare-torch-mode 1.4.0 or newer. The plugin itself only registers the colour variables; the corner-radius scale, the container sizes and the custom breakpoints reach Tailwind through theme.extend in a JavaScript config, which version 4 does not have. Without this import the rounded-radius classes used by Button, Badge, Input, ActionButton, Select and TextArea are never generated, so those components render with square corners, and the sm and @md variants silently fall back to Tailwind's own values.

Two things to be aware of in version 4. Tailwind shares the container scale with the max-w utilities, so setting the md container to 650px also makes max-w-md 650px. And the plugin sets its radius variables on the root element, which is Tailwind 4's own border-radius namespace — the values match its defaults (2, 4, 6, 8, 12, 16, 24 and 32px), but they are declared in pixels where Tailwind uses rem, so they stop matching if you change the root font size.

If you are pinned to an older glare-torch-mode, paste this into your global.css instead of the theme.css import above — it is exactly what the file contains.

global.css

@theme {
  /* Corner radius — yields rounded-radius-* */
  --radius-radius-none: 0px;
  --radius-radius-xs: 2px;
  --radius-radius-sm: 4px;
  --radius-radius-md: 6px;
  --radius-radius-lg: 8px;
  --radius-radius-xl: 12px;
  --radius-radius-2xl: 16px;
  --radius-radius-3xl: 24px;
  --radius-radius-4xl: 32px;
  --radius-radius-5xl: 40px;
  --radius-radius-6xl: 48px;
  --radius-radius-round: 9999px;

  /* Container-query sizes for the @md: variants used by FieldSection / FormRenderer */
  --container-xs: 320px;
  --container-sm: 600px;
  --container-md: 650px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Viewport breakpoints — sm is 600px rather than Tailwind's 640 */
  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

For Tailwind CSS version 3

Version 3 uses mapping-color-system (not the -v4 package), and needs the container-queries plugin. Install these instead of the version 4 dependencies above — glare-typography, tailwindcss-animate and tailwind-scrollbar-hide are shared by both.

npm install mapping-color-system@latest glare-torch-mode@latest @tailwindcss/container-queries

tailwind.config.js

const { plugin, mappingVars } = require('mapping-color-system')
// Design tokens plus the shared radius / container / screen scales.
const torchMode = require('glare-torch-mode')

module.exports = {
        content: [
        ...
            // put your path that your use in glare.json file. for example:
            "./src/**/*.{js,ts,jsx,tsx,mdx}",
        ],
        theme: {
            extend: {
                colors: mappingVars,
                borderRadius: torchMode.borderRadius,
                containers: torchMode.containers,
            },
        },
        // Top level, not inside extend — this replaces Tailwind's breakpoints.
        screens: torchMode.screens,
        plugins: [
            plugin,
            require('@tailwindcss/container-queries'),
            require('tailwindcss-animate'),
            require('tailwind-scrollbar-hide'),
            require('glare-typography'),
            torchMode,
            function ({ addVariant }) {
                addVariant("rtl", ['&[dir="rtl"]', '[dir="rtl"] &']);
                addVariant("ltr", ['&[dir="ltr"]', '[dir="ltr"] &']);
            },
        ],
};

Make sure to add the following code to your tailwind.config.ts file.

specify the path of the components in tailwind config file.
add the plugins to the plugins array.
add the mappingVars to the extend components colors object.
add borderRadius and containers from glare-torch-mode. borderRadius is what produces the rounded-radius classes the components are built on — without it they render with square corners.
set screens at the top level rather than inside extend, so Glare's breakpoints replace Tailwind's rather than being added alongside them.
include the container-queries plugin. FormBuilder and FormRenderer mark their root as a container and lay fields out with @md variants; without the plugin those compile to nothing.
register the rtl and ltr variants with both selectors. The self-only form matches an element carrying the dir attribute itself, so an rtl class on a component nested inside an RTL wrapper would never apply.

Include Remix Icons & SF Pro Font

Add Remix Icons CDN and SF Pro Font to your html head section for icons support and font standardization.

index.html

<head>
        <link
            href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
            rel="stylesheet"
        />
        <link
            rel="stylesheet"
            href="https://cdn.statically.io/gh/TORCH-Corp/SF-PRO-FONT/main/font/fonts.css"
        />
        <link
            rel="preload"
            href="https://cdn.statically.io/gh/TORCH-Corp/SF-PRO-FONT/main/font/SF-Pro.woff2"
            as="font"
            type="font/woff2"
        />
</head>

Adding Components

Now, you can start adding components to your project, run the following command to install the TORCH Glare Components.

Note: This command will make dropdown list of available components.

npx torch-glare@latest add

or specify the components you want to install.

npx torch-glare@latest add Button

Usage

App.tsx

import { Button } from "./Button";
function App() {
  return (
    <Button variant="PrimeStyle" size="M">
      Click Me
    </Button>
  );
}

Common Problems

Components Without Style

If you install the components and get a styleless component, then the issue is definitely with Tailwind CSS. Double-check your Tailwind version and configuration, re-read the Tailwind CSS installation guide.

Tailwind Configurations

Components Without Icons

If you get a component without icons, then the issue is definitely with Remix Icons. Double-check your Remix Icons installation and re-read the Remix Icons installation guide above.

Icons installation

CLI Errors

You may face some issues with the CLI if you're using a different package manager instead of npm. Try removing the `node_modules` and lock files, then reinstall the dependencies using only your preferred package manager. We recommend using pnpm or Yarn for a smoother installation experience.

Try to run this command to remove node_modules and package-lock.json and then use your favorite package manager.

rm -rf node_modules package-lock.json