很多方案都有定义了产研流程。 比如说三段论
https://www.radix-ui.com/docs/primitives/components/toast
Radix-UI - low-level UI component library with a focus on accessibility, customization and developer experience that can be adopted incrementally since every component is a diffrent npm package Headless UI - works great with TailwindCSS but has 10 components, however it supports both Vue and React Reakit - comes with hooks and components built with composition in mind Reach UI - created by React Router team React Aria - created by Adobe - library of hooks that provides primitives for your custom styling
Why to even think about it ? As mentioned briefly above the headless components comes with a lot features, which make your life easier while building custom UI.
The main reasons, that you should consider going headless for your project:
unstyled - gives you freedom how you would like to style your components (css in js, tailwind, css-modules etc.) Additionally you are not being force to follow specific library design scheme bundle size - is not bloated with libraries code (styling, hooks, helpers, theming etc.), they are doing great job with tree shaking, but still it is bigger than headless consistency - similar like in the regular UI libs the api of components is consistent, so your team mates won’t spot the difference in daily basis work and maintenance incremental adoption - libraries like radix-ui serves components as standalone package which help greatly with migrating existing library step by step typescript support - most of libraries that will mention in this article are written in TypeScript it means that DX will be great, and package will be most likely self documenting can improve the UI layer - you can nicely decouple the ui from logic in your components redesigns won’t be scary - since you have full control of theming and styling, it is more future-proof and easier to maintain