Skip to content

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
@changeset-bot
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

@vercel
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

Labels

📚 documentation Improvements or additions to documentation 🚀 enhancement New feature or request

Projects

None yet

4 participants