按钮
Minimal Notion-style button with no border, subtle hover state and clean typography
- 基础骨架
font-medium text-sm rounded-md transition-colors duration-150- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
Notion 风格组件配方
font-medium text-sm rounded-md transition-colors duration-150 bg-[#2383e2] text-white hover:bg-gray-100 active:bg-gray-200卡片
Simple Notion-style card with divider lines and minimal shadow
- 基础骨架
bg-white rounded-lg divide-y divide-gray-100 transition-shadow duration-200- 变体
- 默认、扁平、悬浮
- 状态
- hover
输入框
Borderless Notion-style input with bottom underline on focus and clean typography
- 基础骨架
w-full bg-transparent border-0 border border-transparent rounded-none text-gray-900 placeholder:text-gray-400 focus:outline-none transition-all duration-150- 变体
- 默认、边框
- 状态
- focus、disabled