v0.4.4

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

• fix: group list styling by @meesvandongen in #668
• fix(/lib/components/table): prevent scrollbars around <Table>s by @multiwebinc in #608
• fix(component/models): prevent scrolling of body when modal is shown by @multiwebinc in #700
• fix(component/progressbar): fix progressbar showing label when progress == 0 by @SrivatsaRUpadhya in #698
• chore(cypress): fixes cypress e2e test pipeline by @ovichowdhury in #695
• refactor(component): simplify the usage of spinner inside the Button by @aminlotfi in #535
• fix(components/accordion): allow opened panel to be closed #684 - add accordion tests by @mufasubhai in #705
• feat(sidebar): Allow to customize the Sidebar component with 'as' by @mvaled in #703
• fix(tabs): remove tab auto focus by @paghar in #712
• fix: added aria-label to solve Buttons do not have an accessible name… by @thematrixl in #711

New Contributors

• @meesvandongen made their first contribution in #668
• @SrivatsaRUpadhya made their first contribution in #698
• @ovichowdhury made their first contribution in #695
• @aminlotfi made their first contribution in #535
• @mufasubhai made their first contribution in #705
• @mvaled made their first contribution in #703
• @paghar made their first contribution in #712
• @thematrixl made their first contribution in #711

Full Changelog: v0.4.3...v0.4.4

v0.4.3

What's Changed

• Update Modal.tsx by @AlfieJones in #678
• feat(Toast): add onClick prop to Toast.Toggle (#607) by @JackRobards in #666

New Contributors

• @AlfieJones made their first contribution in #678
• @JackRobards made their first contribution in #666

Full Changelog: v0.4.2...v0.4.3

v0.4.2

Breaking Changes

See #547

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

What's Changed

• fix(lib/components/buttons): Add target to Button props to open a link in new tab by @fsioni in #631
• fix(button/carousel): added DeepPartial Typing by @Ncookiez in #649
• fix(themecontext): fixing ReferenceError: window is not defined error with Next.js by @fsioni in #652
• fix(button): fixes outline button by @rluders in #654
• docs(component): fix missing DropdownComponent displayName property by @cadomani in #634
• fix(progressbar): fix unclear label usage (#468) by @revnandi in #547
• docs(component): displayName property added for components on Forms page by @hrishikeshmane in #656
• fix(/src/components/avatar): enable explicit sizing of placeholder initials (#659) by @rpocklin in #660
• fix(modal theme): fix modal vertical positioning by @Ncookiez in #658
• fix(sidebar): adds missing className by @rluders in #657

New Contributors

• @fsioni made their first contribution in #631
• @Ncookiez made their first contribution in #649
• @cadomani made their first contribution in #634
• @revnandi made their first contribution in #547
• @hrishikeshmane made their first contribution in #656
• @rpocklin made their first contribution in #660

Full Changelog: v0.4.1...v0.4.2

v0.4.1

What's Changed

• chore(readme): brand guideline and license by @zoltanszogyenyi in #643

New Contributors

• @zoltanszogyenyi made their first contribution in #643

Full Changelog: v0.4.0...v0.4.1

v0.4.0

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

• style(Dropdown): update border radius from rounded to rounded-lg #(575) by @mortezasabihi in #578
• feat(theme): add theme={} attribute to components that need it by @tulup-conner in #611
• Prevent modal content from being truncated by @multiwebinc in #601
• Let Timeline.Body have non-text content by @multiwebinc in #603
• sytles(button): support for all colors in button by @lirbre in #598
• feat(/lib/components/flowbite): remove usePreferences by @haron68 in #582
• fix(/docs): remove {' '} literals from code examples by @tulup-conner in #614
• feat(/lib/theme): add Tailwind CSS colors to <Alert>s by @lirbre in #586
• docs(readme): refer to theme docs page in README by @tulup-conner in #615
• feat(/lib/theme): add Tailwind CSS colors to <Badge>s by @lirbre in #617

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

• @multiwebinc made their first contribution in #601
• @lirbre made their first contribution in #598
• @haron68 made their first contribution in #582

Full Changelog: v0.3.8...v0.4.0