Installation

To install the TORCH Glare Components Library, run the following command to initialize your project.

Note: This library uses Tailwind CSS, so ensure you have it installed first. this command will install the required dependencies and generate a glare.json file, where you can customize the installation path for your components

npx torch-glare@latest init

Now you have a glare.json file in the root of your project, you can adjust the path where you want to install the components.

glare.json

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

Add Remix Icons CDN to your html file or metadata with SF-Pro font as it's the standard font family for the TORCH Glare Components.

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>
         

Configure Tailwind

For Tailwind CSS version 4

If you are using Tailwind CSS version 4, you need to add the following code to your global.css file.

global.css

@import "tailwindcss";
/* 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. */
@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 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

For Tailwind CSS version 3, you need to add the following dependency to your project and copy the code below to your tailwind.config file.

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.

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>
  );
}

Having Issues?

If you have any issues with installation, you can use the manual installation page for manual installation.

Manual Installation