Introduction

Leverage the power of TailwindCSS and Headless UI with Frontic UI to efficiently design a maintainable commerce frontend. This TailwindCSS plugin streamlines your design by enabling you to define a theme, which includes brand, state, and shop colors, as well as the border radius for element edges.

Installation

Install the latest version of Frontic using npm:

npm i -D frontic@latest

Next, add Frontic to your tailwind.config.js:

module.exports = {
  plugins: [require("frontic")],
};

Configuration

To customize Frontic, modify the following configuration in your tailwind.config.js. If no configuration is provided, Frontic will use its default values:

module.exports = {
  //...

  // add frontic plugin
  plugins: [require("frontic")],

  // frontic config (optional)
  frontic: {
     colors: {
        "primary": "#570df8",
        "secondary": "#f000b8",
        "accent": "#1dcdbc",
        "neutral": "#2b3440",
        "base-100": "#fff",
        "info": "#3abff8",
        "success": "#36d399",
        "warning": "#fbbd23",
        "error": "#f87272",
        "buy": "#e57099",
    },
    rounded: true, // Options: false (square), true (rounded), or a TailwindCSS size (e.g., "sm", "lg", "xl", "2xl", "3xl")
    logs: true, // Display Frontic version and configuration details in the console during CSS build

  //...
};

Documentation

For comprehensive details and guides, visit https://frontic.com