Getting started

This kit provides ready-to-use and fully-customizable UI Twig components based on Flowbite components's design.

Please note that not every Flowbite component is available in this kit, but we are working on it!

Requirements

This kit requires TailwindCSS and Flowbite v4 to work:

TailwindCSS

If you use Symfony AssetMapper, you can install TailwindCSS with the TailwindBundle,
If you use Webpack Encore, you can follow the TailwindCSS installation guide for Symfony

Installation

Install Flowbite, either with importmap:require for AssetMapper, or npm for Webpack Encore:

# With AssetMapper
php bin/console importmap:require flowbite

# With npm
npm install flowbite

Modify the file assets/styles/app.css with the following content:

@import 'tailwindcss';

/* With AssetMapper... */
@source "../vendor/flowbite";
/* ... or with Webpack Encore */
/* @source "../../node_modules/flowbite"; */

@custom-variant dark (&:is(.dark *));

/* You can customize theming here see https://flowbite.com/docs/customize/theming/ */
@theme {
    --font-sans:
        'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue',
        'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body:
        'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue',
        'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono:
        'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';

    /* TEXT VARIABLES */
    --text-2xs: 0.625rem;
    --spacing-8xl: 90rem;
    --leading-9: 36px; /* rem pls */
    --leading-7: 28px;
    --leading-8: 32px;
    --leading-6: 24px;
    --leading-4: 16px;
    --leading-none: 1px;
    --leading-5: 20px;
    --tracking-tighter: -0.8px;
    --leading-heading-none: 60px;
    --tracking-tight: -0.4px;

    /* BORDER RADIUS VARIABLES */
    --radius-0: 0px;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-base: 12px;
    --radius-lg: 16px;

    /* BORDER WIDTH VARIABLES */
    --default-border-width: 1px;

    /* TEXT COLORS VARIABLES */
    /* main text color */
    --color-body: var(--color-gray-600);
    --color-body-subtle: var(--color-gray-500);

    /* text heading colors */
    --color-heading: var(--color-gray-900);

    /* used for custom brand colors */
    --color-fg-brand-subtle: var(--color-blue-200);
    --color-fg-brand: var(--color-blue-700);
    --color-fg-brand-strong: var(--color-blue-900);

    /* used for status colors */
    --color-fg-success: var(--color-emerald-700);
    --color-fg-success-strong: var(--color-emerald-900);
    --color-fg-danger: var(--color-rose-700);
    --color-fg-danger-strong: var(--color-rose-900);
    --color-fg-warning-subtle: var(--color-orange-600);
    --color-fg-warning: var(--color-orange-900);
    --color-fg-yellow: var(--color-yellow-400);
    --color-fg-disabled: var(--color-gray-400);
    --color-fg-purple: var(--color-purple-600);
    --color-fg-cyan: var(--color-cyan-600);
    --color-fg-indigo: var(--color-indigo-600);
    --color-fg-pink: var(--color-pink-600);
    --color-fg-lime: var(--color-lime-600);

    /* BACKGROUND COLOR VARIABLES */
    /* used for neutral colors */
    --color-neutral-primary-soft: var(--color-white);
    --color-neutral-primary: var(--color-white);
    --color-neutral-primary-medium: var(--color-white);
    --color-neutral-primary-strong: var(--color-white);
    --color-neutral-secondary-soft: var(--color-gray-50);
    --color-neutral-secondary: var(--color-gray-50);
    --color-neutral-secondary-medium: var(--color-gray-50);
    --color-neutral-secondary-strong: var(--color-gray-50);
    --color-neutral-secondary-strongest: var(--color-gray-50);
    --color-neutral-tertiary-soft: var(--color-gray-100);
    --color-neutral-tertiary: var(--color-gray-100);
    --color-neutral-tertiary-medium: var(--color-gray-100);
    --color-neutral-quaternary: var(--color-gray-200);
    --color-neutral-quaternary-medium: var(--color-gray-200);
    --color-gray: var(--color-gray-300);

    /* used for brand colors */
    --color-brand-softer: var(--color-blue-50);
    --color-brand-soft: var(--color-blue-100);
    --color-brand: var(--color-blue-700);
    --color-brand-medium: var(--color-blue-200);
    --color-brand-strong: var(--color-blue-800);

    /* used for status colors */
    --color-success-soft: var(--color-emerald-50);
    --color-success: var(--color-emerald-700);
    --color-success-medium: var(--color-emerald-100);
    --color-success-strong: var(--color-emerald-800);
    --color-danger-soft: var(--color-rose-50);
    --color-danger: var(--color-rose-700);
    --color-danger-medium: var(--color-rose-100);
    --color-danger-strong: var(--color-rose-800);
    --color-warning-soft: var(--color-orange-50);
    --color-warning: var(--color-orange-500);
    --color-warning-medium: var(--color-orange-100);
    --color-warning-strong: var(--color-orange-700);
    --color-dark-soft: var(--color-gray-800);
    --color-dark: var(--color-gray-800);
    --color-dark-strong: var(--color-gray-900);
    --color-disabled: var(--color-gray-100);
    --color-purple: var(--color-purple-500);
    --color-sky: var(--color-sky-500);
    --color-teal: var(--color-teal-600);
    --color-pink: var(--color-pink-600);
    --color-cyan: var(--color-cyan-500);
    --color-fuchsia: var(--color-fuchsia-600);
    --color-indigo: var(--color-indigo-600);
    --color-orange: var(--color-orange-400);

    /* BORDER COLOR VARIABLES */
    --color-buffer: var(--color-white);
    --color-buffer-medium: var(--color-white);
    --color-buffer-strong: var(--color-white);
    --color-muted: var(--color-gray-50);
    --color-light-subtle: var(--color-gray-100);
    --color-light: var(--color-gray-100);
    --color-light-medium: var(--color-gray-100);
    --color-default-subtle: var(--color-gray-200);
    --color-default: var(--color-gray-200);
    --color-default-medium: var(--color-gray-200);
    --color-default-strong: var(--color-gray-200);

    /* used for status colors */
    --color-success-subtle: var(--color-emerald-200);
    --color-danger-subtle: var(--color-rose-200);
    --color-warning-subtle: var(--color-orange-200);
    --color-brand-subtle: var(--color-blue-200);
    --color-brand-light: var(--color-blue-600);
    --color-dark-subtle: var(--color-gray-800);
    --color-dark-backdrop: var(--color-gray-950);

    /* shiki variables */
    --color-shiki-fg-brand: #79b8ff;
    --color-shiki-fg-brand-subtle: #9ecbff;
}

.dark {
    /* text color variables */
    --color-body: var(--color-gray-400);
    --color-body-subtle: var(--color-gray-400);
    --color-heading: var(--color-white);
    --color-fg-brand-subtle: var(--color-blue-200);
    --color-fg-brand: var(--color-blue-500);
    --color-fg-brand-strong: var(--color-blue-400);
    --color-fg-success: var(--color-emerald-600);
    --color-fg-success-strong: var(--color-emerald-300);
    --color-fg-danger: var(--color-rose-500);
    --color-fg-danger-strong: var(--color-rose-300);
    --color-fg-warning-subtle: var(--color-orange-500);
    --color-fg-warning: var(--color-orange-300);
    --color-fg-yellow: var(--color-yellow-400);
    --color-fg-disabled: var(--color-gray-600);
    --color-fg-purple: var(--color-purple-500);
    --color-fg-cyan: var(--color-cyan-500);
    --color-fg-indigo: var(--color-indigo-500);
    --color-fg-pink: var(--color-pink-500);
    --color-fg-lime: var(--color-lime-500);

    /* background color variables */
    --color-neutral-primary-soft: var(--color-gray-900);
    --color-neutral-primary: var(--color-gray-950);
    --color-neutral-primary-medium: var(--color-gray-800);
    --color-neutral-primary-strong: var(--color-gray-700);
    --color-neutral-secondary-soft: var(--color-gray-900);
    --color-neutral-secondary: var(--color-gray-950);
    --color-neutral-secondary-medium: var(--color-gray-800);
    --color-neutral-secondary-strong: var(--color-gray-700);
    --color-neutral-secondary-strongest: var(--color-gray-600);
    --color-neutral-tertiary-soft: var(--color-gray-900);
    --color-neutral-tertiary: var(--color-gray-800);
    --color-neutral-tertiary-medium: var(--color-gray-700);
    --color-neutral-quaternary: var(--color-gray-700);
    --color-neutral-quaternary-medium: var(--color-gray-600);
    --color-gray: var(--color-gray-600);
    --color-brand-softer: var(--color-blue-950);
    --color-brand-soft: var(--color-blue-900);
    --color-brand: var(--color-blue-600);
    --color-brand-medium: var(--color-blue-900);
    --color-brand-strong: var(--color-blue-700);
    --color-success-soft: var(--color-emerald-950);
    --color-success: var(--color-emerald-600);
    --color-success-medium: var(--color-emerald-900);
    --color-success-strong: var(--color-emerald-700);
    --color-danger-soft: var(--color-rose-950);
    --color-danger: var(--color-rose-700);
    --color-danger-medium: var(--color-rose-900);
    --color-danger-strong: var(--color-rose-800);
    --color-warning-soft: var(--color-orange-950);
    --color-warning: var(--color-orange-600);
    --color-warning-medium: var(--color-orange-900);
    --color-warning-strong: var(--color-orange-700);
    --color-dark-soft: var(--color-gray-700);
    --color-dark: var(--color-gray-800);
    --color-dark-strong: var(--color-gray-700);
    --color-disabled: var(--color-gray-800);
    --color-purple: var(--color-purple-500);
    --color-sky: var(--color-sky-500);
    --color-teal: var(--color-teal-500);
    --color-pink: var(--color-pink-500);
    --color-cyan: var(--color-cyan-500);
    --color-fuchsia: var(--color-fuchsia-500);
    --color-indigo: var(--color-indigo-500);
    --color-orange: var(--color-orange-400);

    /* border color variables */
    --color-buffer: var(--color-gray-950);
    --color-buffer-medium: var(--color-gray-900);
    --color-buffer-strong: var(--color-gray-800);
    --color-muted: var(--color-gray-900);
    --color-light-subtle: var(--color-gray-900);
    --color-light: var(--color-gray-800);
    --color-light-medium: var(--color-gray-700);
    --color-default-subtle: var(--color-gray-900);
    --color-default: var(--color-gray-800);
    --color-default-medium: var(--color-gray-700);
    --color-default-strong: var(--color-gray-600);
    --color-success-subtle: var(--color-emerald-900);
    --color-danger-subtle: var(--color-rose-900);
    --color-warning-subtle: var(--color-orange-900);
    --color-brand-subtle: var(--color-blue-900);
    --color-brand-light: var(--color-blue-600);
    --color-dark-subtle: var(--color-gray-700);
    --color-dark-backdrop: var(--color-gray-950);
}

Modify your assets/app.js file by adding:

import 'flowbite';