跳转到内容
ShipSaaSShipSaaS Docs

组件

ShipSaaS 提供一套精简的 UI 组件：Shadcn UI、营销组件和业务组件，结构清晰、便于扩展。

组件结构

Section titled “组件结构”

组件位于 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

Section titled “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 与格式化之外。

营销组件

Section titled “营销组件”

落地页与营销组件集中在 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。

业务组件

Section titled “业务组件”

按功能划分的组件位于 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>
  )
}

参考资料

Section titled “参考资料”

下一步

Section titled “下一步”

了解 ShipSaaS 的组件后，可以继续阅读：