UnoUI - Installation

Quick setup

Installation

1. Installation

   Quickly install UnoCSS and PresetUI inside your new or existing project using our Cli tool.
   Shell

   npx flexi-cli@latest init --styles unocss

   Learn more about in our Cli tool documentation
   To learn more about installing UnoCSS and PresetUI, check this guide

2. Configuration

   • Theme : to configure your theme, follow this
   • Global : global general colors for background, text-color and border.
   CSSS Variables
   :root{
       --bg: var(--c-white);
       --bg-subtle: var(--c-gray-50);
       --bg-surface: var(--c-gray-100);
       --bg-muted: var(--c-gray-200);
       --bg-surface-elevated: var(--c-gray-300);
   
       --fg: var(--c-gray-700);
       --fg-muted: var(--c-gray-600);
       --fg-title: var(--c-gray-900);
       --fg-subtitle: var(--c-gray-800);
       --border: var(--c-gray-200);
   
       --border-subtle: var(--c-gray-50);
       --border-light: var(--c-gray-200);
       --border-strong: var(--c-gray-300);
       --border-emphasis: var(--c-gray-400);
   }

3. Add interactivity

   If you’re willing to use interactive component then make sure to have Flexilla installed or the corresponding Flexilla Package
   Shell

   npm i @flexilla/flexilla

   To init all components
   script.js

   import {initFlexilla} from "@flexilla/flexilla"
   
   initFlexilla() // This will init all interactive component for all element with data-fx-COmponentName attribute

Use a boiler Plate

• Vite HTML Starter
• AstroJS Boilerplate
• Laravel Blade
• Static Site