Installation

Docs

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";
@plugin "glare-torch-mode";
@plugin "glare-typography";
@plugin "mapping-color-system-v4";
@import "mapping-color-system-v4/tailwindVars.css";

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

tailwind.config.js

const { plugin: plugin, mappingVars } = require('mapping-color-system')

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,
            },
        },
        plugins: [
            plugin,
            require('tailwindcss-animate'),
            require('tailwind-scrollbar-hide'),
            require('glare-typography'),
            require('glare-torch-mode'),
            function ({ addVariant }: any) {
                addVariant("rtl", '&[dir="rtl"]');
                addVariant("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.

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.