flowbite-react

Official React components built for Flowbite and Tailwind CSS

MIT License

Downloads
400.5K
Stars
1.8K
Committers
126
View Code on GitHub Visit Website View on X
Ecosystems: React, Tailwind CSS, Storybook, TypeScript

Bot releases are hidden (Show)

flowbite-react - v0.4.2

Published by rluders over 1 year ago

Breaking Changes

See #547

  • <Progress label={}> -> <Progress textLabel={}>
  • <Progress labelPosition={}> -> <Progress progressLabelPosition={} textLabelPosition={}>

What's Changed

New Contributors

Full Changelog: https://github.com/themesberg/flowbite-react/compare/v0.4.1...v0.4.2

flowbite-react - v0.4.1

Published by tulup-conner over 1 year ago

What's Changed

New Contributors

Full Changelog: https://github.com/themesberg/flowbite-react/compare/v0.4.0...v0.4.1

flowbite-react - v0.4.0

Published by tulup-conner over 1 year ago

Breaking changes

usePreferences

usePreferences is no longer an option for <Flowbite theme={..}>. The light or dark mode preference established by a user's browser is still respected. The library also no longer persists the current theme in local storage. See #582

Customizing flowbite-react

The theme structure for almost all components has changed. Now, components that can have children will have a root section which contains the classes that apply only to the parent component. That's kind of a complicated sentence, so here's an example.

<Accordion>s can contain any number of <Accordion.Title>s and <Accordion.Content>s as children. The new accordion theme looks like:

export interface FlowbiteAccordionTheme {
  root: FlowbiteAccordionRootTheme; /* classes that apply to <Accordion> itself only */
  content: FlowbiteAccordionComponentTheme; /* <Accordion.Content> classes */
  title: FlowbiteAccordionTitleTheme; /* <Accordion.Title> classes */
}

Previously, the accordion theme was:

export interface FlowbiteAccordionTheme {
  base: string; /* class that applies to <Accordion> itself only */
  flush: string; /* another class that applies to <Accordion>s */
  content: FlowbiteAccordionComponentTheme; /* <Accordion.Content> classes */
  title: FlowbiteAccordionTitleTheme; /* <Accordion.Title> classes */
}

We've just moved the loose classes - for <Accordion>s, that's accordion.base and accordion.flush - into root to make the theme more clearly reflect the relationship between flowbite-react components.

What's Changed

Customizing flowbite-react

Completing our work in v0.3.7 and v0.3.8, the following components can now be customized with a theme={} attribute inline:

  • Accordion
    • Accordion.Content
    • Accordion.Title
  • Alert
  • Avatar
    • Avatar.Group
    • Avatar.GroupCounter
  • Badge
  • Breadcrumb
    • Breadcrumb.Item
  • Button
    • Button.Group
  • Card
  • Carousel
  • Checkbox
  • DarkThemeToggle
  • Dropdown
    • Dropdown.Item
  • FileInput
  • Footer
    • Footer.Brand
    • Footer.Copyright
    • Footer.Divider
    • Footer.Icon
    • Footer.Link
    • Footer.LinkGroup
    • Footer.Title
  • HelperText
  • Label
  • ListGroup
    • ListGroup.Item
  • Modal
    • Modal.Body
    • Modal.Footer
    • Modal.Header
  • Navbar
    • Navbar.Brand
    • Navbar.Collapse
    • Navbar.Link
    • Navbar.Toggle
  • Pagination
    • Pagination.Button
  • Progress
  • Radio
  • RangeSlider
  • Rating
    • Rating.Advanced
    • Rating.Star
  • Select
  • Sidebar
    • Sidebar.Collapse
    • Sidebar.CTA
    • Sidebar.Item
    • Sidebar.Logo
  • Spinner
  • Tabs.Group
  • Table
    • Table.Body
    • Table.Cell
    • Table.Head
    • Table.HeadCell
    • Table.Row
  • Textarea
  • TextInput
  • Timeline
    • Timeline.Body
    • Timeline.Content
    • Timeline.Item
    • Timeline.Point
    • Timeline.Time
    • Timeline.Title
  • Toast
    • Toast.Toggle
  • ToggleSwitch
  • Tooltip

Please note that components you do NOT see on this list can STILL be customized by simply adding a className. These components do not have any default classes or complex structure and thus don't need a theme at all.

We updated the documentation on themes to clarify the different options you have to customize flowbite-react. To learn more about that, visit https://flowbite-react.com/theme.

This behavior is still considered a work in progress, and in general, we are still experimenting with how to provide users with the best way to customize components. You can expect that this API might change at any time. We also need your feedback on how to improve it.

See #465 for more context on themes in this library.

New Contributors

Full Changelog: https://github.com/themesberg/flowbite-react/compare/v0.3.8...v0.4.0

Package Rankings
Top 1.1% on Npmjs.org
Related Projects
flowbite-astro-admin-dashboard

Open-source admin dashboard template built with Astro, Flowbite, and Tailwind CSS

02 Mar 2023 568
flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS

28 Jul 2021 7,701
flowbite-react

Official React components built for Flowbite and Tailwind CSS

28 Feb 2022 1,314
xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React ...

15 Jul 2019 25,059
keep-react

Keep React is an open-source component library built on Tailwind CSS and React.js. It provides a ...

27 Jul 2023 1,327
react-firebase-admin

React ⚛️ starter kit with Firebase 🔥 and Bulma for setting up an admin dashboard - Highly scalabl...

27 Feb 2020 414
Flowise

Drag & drop UI to build your customized LLM flow

31 Mar 2023 30,291
vue-flow

A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan 🔎, additional c...

01 Jul 2021 2,992
react-redux-boilerplate

A meticulously crafted, extensible, and robust architecture for constructing production-grade Rea...

16 Jan 2024 43