Allow className for all components

[leesiongchan]

Is your feature request related to a problem? Please describe.

I wish to customize & improve some of the primitive components like Checkbox or Label to have different look-and-feel. One common example is like the TextInput with sizing props to allow user to customize sizing at will. I curious why most components disallow to extend className ?

Describe the solution you'd like

Allow classname for all components.

Describe alternatives you've considered

Additional context

[rluders]

Nope. This was something that we did to secure the design system consistency.

If you need to customize the components, @leesiongchan, you have the theme system (https://flowbite-react.com/theme). I know the documentation still the worst, but we are improving it.

By giving to users access to the className per component you are going to start to allow users to break the design system. If you need a component that is too different from the ones in the design system, that doesn't get covered by the current customization or available components, what you need is a new component.

We are working to figure out a way to allow users to extend the components to create their owns by spliting the components into atomic-like components... but it will take some time for discussions and poc before it came in some state that can be implemented.

[leesiongchan]

But sometime we need to adjust its positioning, padding, margin, etc.? One example is like the below where I wish to align center & provide a little gap between.

<Label className="inline-flex gap-2 items-center">
  <Checkbox />
  Remember me
</div>

I understand there is another way to accomplish the same thing, but I believe there are more cases like this where we need className not only to customize its styling but also for us to adjust its positioning.

Or if I wish to have my button to be full width

<Button className="w-full">Hello World</Button>

[rluders]

Probably it can be solved with something like this:

<Label>
  <div  className="inline-flex gap-2 items-center">
    <Checkbox />
    Remember me
  </div>
</Label>

and

<div  className="w-full"><Button>Hello World</Button></div>

Still, if you want to customize, you can use the theme support. The only thing is that all the components in the design system will also be changed and it will keep the consistency of your application.

[leesiongchan]

The second wont work though haha. I mean I know there are ways to accomplish it. Anyway, thanks I think I understand this is the direction where flowbite will pursuit.

[rluders]

I didn't tested it. :) AFAIK, default Button style is w-fit, isn't? It should have the parent size. If not, it is a bug.

[rluders]

Also, theme support should allow you to customize the things without adding divs or accessing the className property for every single component.

https://github.com/themesberg/flowbite-react/blob/bfef57a8edc6d338ba6971f07d3a8cd5856b9fa6/src/lib/theme/default.ts#L192

[jwhitmarsh]

@rluders w-fit applies width: fit-content which is the available space up to the max of the content, not the available space of the parent. w-full would do that. So I think this is a bug because atm we have no way of resizing a button beyond with width of its content.

[rluders]

@jwhitmarsh in this case, probably a easy fix to theme will do the job. Do you want to create one PR fixing it?

[rluders]

Opening a new issue to the w-fit

[nihirv]

I understand the library is still early on in development, but that's exactly why I think you should allow users to break the design system at will with className. Themeing does work for most usecases in any given application, but these applications likely also have a component which need to break conventional design patterns.

And whilst the library is still being developed, I imagine some users (myself included) use both vanilla tailwindcss and some components from flowbite react. Adding another theme provider on top of what I currently have (including how I support darkmode) seems very ugly, when in reality all I might want to do is change the colour of one particular instance of a component.

[rluders]

Thanks for your feedback @nihirv. this discussion is closed since August. Today, Flowbite react already supports className and we are working to extend our theme system. Check #443