组件 | TanStarter - Ship Faster with TanStack, Cost Less with Cloudflare

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

组件结构

组件位于 src/components 下，主要分为：

其他按功能划分的目录（如 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>
  )
}

参考资料

下一步

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

自定义页面

落地页

搭建落地页

博客

配置博客系统

网站配置

配置网站核心设置