shadcn ui

[yaofly2012]

shadcn简介

发音: /ʃæd siː ɛn/

It’s shad-c-n

What ?

新的安装依赖组件库思路，真正做到100%定制。

This is not a component library. It is how you build your component library.

一句话概括：用"copy+paste"（npx shadcn@latest add）代替npm i。

Why ?

没有100%符合业务逻辑的组件库（如果有，说明这个组件库只有你一个人在用）。现实情况我们经常遇到2个问题：

1. 定制组件，常用的手段：

• 覆盖样式
• Copy下来重新写

2. 新增组件，常用的手段：

• 纯手写
• 再引用一个符合要求的组件库

How ?

1. 统一的组件接口
2. 组件代码分发
3. 完善的组件（社区贡献）

基本概念

1. Block
2. Registry

• Dependencies

基于shadcn的组件库

1. Magic UI