Manual Installation

Docs

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.

{
  "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

Note: For now the library only supports tailwind css version 3.

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

Optional plugins but recommended

npm install tailwindcss-animate tailwind-scrollbar-hide

Add plugins to your tailwind.config.ts file

Now copy this plugins to your tailwind.config file.

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"]');
    },
],
};

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.

<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

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

Create glare.json

Configure Tailwind

Remix Icons & SF Pro Font

Adding Components

Usage

Common Problems