Collection of CSS Tutorials and Tips

How to choose a suitable component library?

When selecting a model, it is recommended to ask yourself the following three questions:

What is the product type?
- B-side (backend/SaaS): Efficiency comes first.Prefer Ant Design or Element Plus.There is no need to write the complex logic of DatePicker or Table yourself.
- C-side (official website/event page/for the public): Vision first.First choice Tailwind CSS + Headless UI (or Shadcn/ui), since you need a highly customizable and unique UI.
Team technology stack and specifications?
- If you rely heavily on TypeScript, the type hints of Naive UI (Vue) or MUI/Chakra (React) will be more friendly.
- If the team is short of design resources, just use a library with a strong design style (such as AntD).
Consider CSS atomization?
- If the team is used to writing CSS/Sass, AntD/Element is fine.
- If the team recommends Tailwind CSS, it is strongly recommended to use Shadcn/ui or NextUI, because traditional component libraries are difficult to perfectly integrate with Tailwind.

How to build your own component library?

If you are an architect or want to improve your technical depth, building an enterprise private component library is the only way to go.

Development Tools:
- Storybook: Standard for component development.Used to isolate development, testing, and documentation.
- Vite / Rollup: The first choice for packaging tools (Webpack is too cumbersome to configure for library packaging).
Code Management:
- Monorepo (pnpm workspace / Turborepo): Suitable for managing multi-package architecture (core library, icon library, tool library separated).
- Changesets: An artifact for managing version releases and Changelog.
Core Difficulty:
- Theming: How to achieve dynamic skin changing through CSS Variables
- Tree Shaking: Ensures that users only import the components used, not the entire package.
- TypeScript Type Generation: Provides perfect type hints.

Headless UI (headless component)

Only provides interaction logic and accessibility (Accessibility/A11y), without styles at all.

Headless UI (headless user interface) is a front-end development methodology or design pattern. The core idea is to separate the logic and style of UI components and only provide interactive functions and state management, without preset styles.Developers need to implement visual performance through CSS themselves.

Representative libraries: Radix UI, Headless UI, TanStack Table, React Aria.

Applicable scenarios: You have a very specific design system (Design System), and it will be very painful to use a library like AntD that comes with strong styles to override styles. In this case, Headless UI is the best choice.

Core features

Separation of logic and style: The component only handles interaction logic (such as keyboard navigation, focus management), and the style needs to be customized by the developer.‌
Highly customizable: suitable for scenarios with different UI styles but similar interaction logic, such as the combination of Tailwind CSS and Headless UI.‌
No preset styles: The component itself does not render any DOM elements and only exposes APIs for external calls.

shadcn/ui

shadcn/ui is a set of beautifully-designed

It's not a traditional component library (you can't npm install it).

Core Concept: It provides code that you directly Copy & Paste into your project.
Technology stack: Radix UI (Headless logic) + Tailwind CSS (style).
Advantages: You own all the code of the component and can change it however you want, which completely solves the problem of "difficulty in magically changing the style of the component library".

https://ui.shadcn.com/themes

tailwindcss

https://www.tailwindcss.cn/docs/installation

Element UI

https://element.eleme.cn/#/zh-CN

Element Plus

The Ele.me team, the “big brother” of the Vue ecosystem, has the most mature documentation and community.Default selection for Vue projects. https://element-plus.org/#/zh-CN

Naive UI

Recommended by You Yuxi, TypeScript support is excellent and the design style is unique (a bit geeky).Projects that pursue TS experience and unique design. https://www.naiveui.com/zh-CN/os-theme

TDesign

Produced by Tencent, it supports Vue/React/mini programs and other terminals, and the design system is unified.Large-scale projects that require a unified design language across multiple platforms. https://static.tdesign.tencent.com/

Ant Design

Produced by Alibaba, it is enterprise-level, has the most complete ecosystem, and its component logic is extremely mature.The first choice for domestic enterprise-level backend and middle-end systems. https://4x-ant-design.antgroup.com/components/form-cn/

Arco Design

Produced by ByteDance, the design style is more modern, light and flexible in configuration.I feel that AntD is aesthetically tired and I want a more modern style.

https://arco.design/