Component roadmap

[insmac]

Headless UI is great, but it does have a fairly limited set of available components.
Does the roadmap exist for new ones or is development more ad-hoc when time allows?

[kaushalyap]

I am also interested in this.

paging @adamwathan to know about his plan.

[kaushalyap]

Glad to know!

[jstiers]

Adam, is there a plan to really expand headless ui, or is it seen more as a byproduct of tailwind-ui?

The way I see it there is currently Material UI and then a void in the React Component market. I strongly assume that many React Developers are longing for an open component library like Headless-UI. If Headless-UI has a real focus on development and adaptation, it will certainly find a lot of adoption in enterprises. Which in turn could make a very good business case.

These are just my thoughts on this and I would be interested to know if this is anything like your plan. Nevertheless, great work so far, I'm really enthusiastic about your company.

[insmac]

@jstiers There's also Ant Design, which has a fairly complete feature set (as in you'll get most of the components you need for a standard ui kit) and can be themed in a React-friendly way, instead of overriding its classnames.

Like all ready-made UI systems it has its pitfalls too, one of which is that it uses an internal LESS theme file that is used to override some core styling (typography, colors, border radius, box shadows, etc) but it can be implemented in a fairly unobtrusive way. And, of course, it's not headless, because ultimately it's a different concept than Tailwind's system.

[kaushalyap]

@jstiers My problem with MUI is it is bloated. Import cost extension shows following sizes when gzipped

import Button from "@material-ui/core/Button"; // 14.9K
import TextField from "@material-ui/core/TextField"; // 29K
import DialogTitle from "@material-ui/core/DialogTitle"; // 10.2K
import Dialog from "@material-ui/core/Dialog"; // 16.6K 
import Tabs from "@material-ui/core/Tabs"; // 17.8K 
import Tab from "@material-ui/core/Tab"; // 14.2K

Another thing is it is using CSS in JS solution (in v5 Emotion) which ships a styling runtime and impact performance badly compared to plain css.

@jstiers Problem with AntD is weak accessibility and huge package size. I also get a bad feeling about implementation too since there you have to import components styles manually like below

@import '~antd/dist/antd.css';

If you want some component framework checkout baseweb by Uber or PrimeReact both have lots of components.

Thing I like about Tailwind

• it is CSS not a CSS in JS solution which make it light weight and performant.
• Faster to develop
• Freedom for customization.
• I also think utility approach result in small size compared to writing manual CSS (which is usually written in component approach) due to higher reuse of utility classes

But we need packages like HeadlessUI to provide out of the box components to avoid reinventing the wheel and saving time.

[denu5]

@jstiers hmmm i would say the opposite, there are currently tons of very good ui libs, like chakra, reach-ui, adobe spectrum/aria...
....and modulz/radix who probably do quite a good job with stitches and radix primitives.
https://www.radix-ui.com/docs/primitives/overview/introduction

[lloydjatkinson]

I was just wondering if there are are further plans to add components?

[RobinMalfait]

There is no public (or private) roadmap so far. We create new components when we have a need for them mostly in Tailwind UI.
We will create more components, but I can't give an ETA.