组件
了解 ShipSaaS 中可用的组件及如何有效使用
ShipSaaS 提供一套精简的 UI 组件：Shadcn UI、营销组件和业务组件，结构清晰、便于扩展。
组件结构
组件位于 src/components 下，主要分为：
src
components
ui
blocks
auth
blog
layout
shared
settings
theme
pricing
data-table
dashboard
其他按功能划分的目录（如 payment、admin、analytics、chatbox、contact、roadmap）遵循相同组织方式。
Shadcn/ui 与 Base UI
src/components/ui 目录存放应用的基础 UI 构件，来自 Shadcn/ui，所有组件基于 Base UI实现，提供无样式基础。
| 类别 | 组件 | 说明 |
|---|---|---|
| 表单 | Input、Textarea、Select、Checkbox、Radio Group、Switch、Form、Input Group、Field | 表单控件与校验 |
| 浮层 | Dialog、Alert Dialog、Sheet、Drawer、Popover、Hover Card | 弹窗与浮动内容 |
| 导航 | Tabs、Navigation Menu、Breadcrumb、Menubar、Pagination、Sidebar | 菜单与导航 |
| 数据展示 | Table、Card、Calendar、Carousel、Avatar、Badge | 表格、卡片与展示 |
| 布局 | Accordion、Collapsible、Separator、Scroll Area、Resizable | 布局与结构 |
| 反馈 | Alert、Progress、Skeleton、Spinner、Command、Empty | 状态与加载 |
使用说明：
- 建议不要直接修改
src/components/ui内文件，以便顺利同步模板更新。 - 这些组件会定时与 Shadcn/ui + Base UI 组件保持同步。
src/components/ui已排除在 Biome 的 lint 与格式化之外。
营销组件
落地页与营销组件集中在 src/components/blocks，可直接用于首页、定价等页面：
- Hero —
hero.tsx、homepage.tsx - Features —
features.tsx、features2.tsx、features3.tsx - Stats、Logo cloud、Testimonials —
stats.tsx、logo-cloud.tsx、testimonials.tsx - FAQs、CTA —
faqs.tsx、calltoaction.tsx - Integration、Newsletter —
integration.tsx、integration2.tsx、newsletter-card.tsx - Pricing —
pricing.tsx（组合定价表的组件）
可按产品需要复制并修改这些组件，更多组件参考可查看 Tailark。
业务组件
按功能划分的组件位于 src/components 下对应目录：
| 目录 | 用途 |
|---|---|
| auth | 登录、注册、忘记密码、重置密码、社交登录 |
| blog | 博客卡片、网格、分页 |
| layout | 导航栏、页脚、侧栏、仪表盘布局、容器 |
| shared | Logo、Toaster、表单成功/错误、用户按钮/头像 |
| settings | 个人资料、账单、安全、文件、API 密钥、通知 |
| theme | 主题 Provider、模式切换 |
| pricing | 价格卡片、表格、结账按钮、客户门户 |
| data-table | 可复用数据表（筛选、排序、工具栏） |
| dashboard | 组件卡片、图表 |
新增组件时，放入对应功能目录，使用 PascalCase 命名，并尽量复用 components/ui 与 shared 组件。
示例：
// src/components/dashboard/section-cards.tsx
import { Card } from "@/components/ui/card"
export function SectionCards() {
return (
<Card>
{/* ... */}
</Card>
)
}参考资料
下一步
了解 ShipSaaS 的组件后，可以继续阅读：