Installation

Flebee UI is a set of Angular zoneless components with SSR support

Install Packages

npm install @flebee/ui

Tailwind CSS Setup

Flebee UI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official installation guide to install Tailwind CSS. Then you need to add the following code to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
const { flebeeUI } = require('@flebee/ui');

module.exports = {
  content: [
    // ...
    // Includes all flebeeUI components (this increases the bundle size)
    './node_modules/@flebee/ui/**/*.mjs',
    // Optimize the bundle by specifying only the components you use e.g. button, ripple (used by button), and radio
    './node_modules/@flebee/ui/**/(button|ripple|radio)/*.mjs'
  ],
  theme: {
    extend: {}
  },
  plugins: [flebeeUI()]
};

Install Onest Font (Optional)

Recommended font to use with Flebee UI, install from Fontsource

npm install @fontsource-variable/onest

Add to global styles and override Tailwind CSS default font

@import '@fontsource-variable/onest/wght.css';

@tailwind base;
@tailwind components;
@tailwind utilities;