Skip to content

New engine #1498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 437 commits into from
Mar 24, 2025
Merged

New engine #1498

merged 437 commits into from
Mar 24, 2025

Conversation

SutuSebastian
Copy link
Collaborator

@SutuSebastian SutuSebastian commented Oct 11, 2024

Description

A complete overhaul of the theming system, bringing Tailwind CSS v3 and v4 support, a brand new way to (locally) automatically generate class list for the Flowbite React components used within ur app, and many more such as:

  • a new powerful CLI
    • 1-click to init Flowbite React into an existing project
    • ...and many more commands
  • fully tree-shakable modules
  • performance improvements
  • powerful theming system granular control (theme, clearTheme and applyTheme new props)
  • no more css overflow (adding Flowbite React won't interfere with ur existing global css configs)
  • 15 new integration guides
  • React 19 support

Changes

  • React 19 support
  • Tailwind CSS v3 and v4 support (automatically detected)
  • prefix support
  • performance improvements
  • export all library parts (components, themes, helpers, etc)
  • new npx flowbite-react@latest <commands> CLI
  • remove react-icons package

Docs

  • generate llms.txt and llms-full.txt
    • also each page can be suffixed with .md and it will serve the raw markdown content of that page
  • 15 new integration guides
  • new pages
    • Compatibility
    • Colors
    • Config
    • Custom Components
    • Prefix
  • updated pages
    • Introduction
    • Quickstart
    • Compatibility
    • CLI
    • Editor Setup
    • Server Components
  • add "Table of Contents" section highlight active section on scroll

Breaking Changes

Component Changes

Button

  • Reworked theme and cleaned up button logic to act more like a primitive
  • Moved theme.size from inner span to root button
  • Added colors default and alternative
  • Updated hover colors to use primary instead of blue
  • Set default color to default

Badge

  • Deprecated href prop
  • Fixed theme styles and tests

FloatingLabel

  • Updated focus border colors to use primary theme

ToggleSwitch

  • Fixed theme styles

Radio

  • Fixed theme styles
  • Added color support

Checkbox

  • Fixed theme styles
  • Added indeterminate state support

FileInput

  • Fixed theme styles
  • Simplified component JSX
  • Dropped helperText prop

TextInput

  • Fixed theme styles

Textarea

  • Fixed theme styles

Card

  • Fixed img tag render

TableHead

  • Removed inner hardcoded tr

Select

  • Fixed theme styles

RangeSlider

  • Simplified JSX structure

Progress

  • Updated default color to primary
  • Removed color prop from examples

Spinner

  • Updated default color to 'default'
  • Adjusted size to 'lg'

General Changes

These changes are part of a larger effort to:

  1. Standardize theme handling across components
  2. Move away from hardcoded colors (especially cyan/blue) to a primary color system
  3. Simplify component structures
  4. Make components more primitive/composable
  5. Fix various theme-related styling issues
  6. Remove deprecated or redundant props in favor of more modular approaches

Result

flowbite-react CLI

Screen.Recording.2025-03-21.at.16.57.22.mov
Screenshot 2025-03-21 at 17 17 49

Automatic class generation

Screen.Recording.2025-03-21.at.17.01.11.mov

.flowbite-react/config.json

Screen.Recording.2025-03-21.at.17.12.35.mov

Prefix support ~ class generation

Screen.Recording.2025-03-21.at.17.02.50.mov

Dark mode ~ class generation ~ opt in/out

Screen.Recording.2025-03-21.at.17.02.33.mov

CLI ~ create custom component

Screen.Recording.2025-03-21.at.17.08.29.mov

Full type safe theming system + intellisense out of the box

Screen.Recording.2025-03-21.at.17.09.31.mov

Docs ~ codeblock ~ click to copy

Screen.Recording.2025-03-21.at.16.49.02.mov

Docs ~ Table of Contents ~ highlight active section

Screen.Recording.2025-03-21.at.16.51.40.mov

Issues

#339, #1197, #1286, #1389, #1447, #1454, #1473, #1489, #1508, #1523

PR's

#1155

@SutuSebastian SutuSebastian added the 🚀 enhancement New feature or request label Oct 11, 2024
@SutuSebastian SutuSebastian self-assigned this Oct 11, 2024
Copy link

changeset-bot bot commented Oct 11, 2024

🦋 Changeset detected

Latest commit: 863b474

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
create-flowbite-react Minor
flowbite-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Oct 11, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
flowbite-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 24, 2025 4:24pm
flowbite-react-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 24, 2025 4:24pm

@SutuSebastian SutuSebastian force-pushed the feat(ui)/prefix-support branch from 9100e69 to d4096c6 Compare October 15, 2024 12:02
This was referenced Mar 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment