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. The command will modify the tailwind.config.js file or create one if it doesn't exist. Additionally, it will generate a glare.json file, where you can customize the installation path for your components.

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

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.

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

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

Having Issues?

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