flowbite-react

Official React components built for Flowbite and Tailwind CSS

MIT License

Downloads
11
Stars
1.3K
View Code on GitHub Visit Website View on X
Ecosystems: Tailwind CSS, React, Storybook, TypeScript

Bot releases are visible (Hide)

flowbite-react - v0.4.9

Published by rluders over 1 year ago

This is a hotfix release version. Users noticed that the react-icons package last version where missing some icons that we use in some of our components.

What's Changed

Full Changelog: https://github.com/themesberg/flowbite-react/compare/v0.4.8...v0.4.9

flowbite-react - v0.4.8

Published by tulup-conner over 1 year ago

In this release, we replaced classnames by tailwind-merge for the entire design system, and removed !important anywhere it was used in the default Flowbite React theme.

In general, you shouldn't need to use !important in custom className used on any component anymore either, so consider removing any you have.

You also shouldn't need to use theme={} where a class in the theme was always overriding the one you passed in className yourself anymore.

Breaking Changes

What's Changed

Features

Bug fixes

Documentation

Full Changelog: https://github.com/themesberg/flowbite-react/compare/v0.4.7...v0.4.8

flowbite-react - v0.4.7

Published by rluders over 1 year ago

What's Changed

New Contributors

Full Changelog: https://github.com/themesberg/flowbite-react/compare/v0.4.6...v0.4.7

flowbite-react - v0.4.6

Published by tulup-conner over 1 year ago

In this release, we re-wrote our development server in Next.js.

That doesn't change anything for you unless you would like to contribute! If so, please take a look at our newest contributing guide.

What's Changed

New Contributors

Full Changelog: https://github.com/themesberg/flowbite-react/compare/v0.4.4...v0.4.6

flowbite-react - v0.4.4

Published by tulup-conner over 1 year ago

Breaking Changes

  • feat(/src/components/progress): fix unclear label usage #547

Clarifies confusing behavior for <Progress>.

<Progress label={}> is now <Progress textLabel={}>
<Progress labelPosition={}> is now <Progress progressLabelPosition={} textLabelPosition={}>

  • fix(/lib/components/table): prevent scrollbars around <Table>s #608
  • fix(modal theme): fix modal vertical positioning #658
  • fix(button): fixes outline button #654

What's Changed

New Contributors

Full Changelog: https://github.com/themesberg/flowbite-react/compare/v0.4.3...v0.4.4

flowbite-react - v0.4.3

Published by rluders over 1 year ago

What's Changed

New Contributors

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

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 20.98% on Npmjs.org
Related Projects
react-essentials

This project shows some of my best public resources for creating react interfaces. You'll find co...

11 Jul 2024 1
serif-ui-components

This is a boilerplate for creating a React component library using with Storybook, TypeScript, Es...

16 Jul 2023 8
grass-kit

一个基于Tailwind CSS的UI组件库，支持多个前端框架。

18 Jun 2022 3
react-toolkit

Flexible components html + css + react using BEM convention. Maybe, you can call it "Design Syste...

12 Nov 2018 97
govuk-react

An implementation of the GOV.UK Design System in React using CSSinJS

25 Oct 2017 398
flowbite-react

Official React components built for Flowbite and Tailwind CSS

28 Feb 2022 1,753
ui-components

React component library created with Storybook and Tailwind CSS.

18 Jun 2023 2
react-template

Repo for fork to use in your react project

06 Jul 2024 3
ds-component-react-ts-fz

It is a versatile and reusable set off UI components designed for modern web applications. Built ...

21 Jul 2024 0
dialect-ui

React UI Components

12 Jul 2024 0
FE

너굴게임 프론트 레포지토리

23 Jul 2024 0
react-crafitify

React-Crafitify is a versatile React component library designed to enhance the user interface of...

02 Aug 2023 34
arvel_ds

Welcome to this UI kit built with styled components and storybook!🎨

15 Jul 2024 0
tails-ui

A Design System for TailwindCSS projects

14 Oct 2022 4
svelte-storybook-tailwind

A starter template for Svelte, TailwindCSS and Storybook. You can easily start your project with ...

30 Aug 2019 314