LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironments
Configuration
Deployment

Integrations

CloudflareDatabaseAuthenticationEmailNewsletterStoragePaymentNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase
X (Twitter)

Components

Learn about the components available in TanStarter and how to use them effectively

TanStarter includes a focused set of UI components: Shadcn UI, marketing blocks, and business components, with a clean structure that's easy to extend.

Component Structure

Components live under src/components, organized into:

Other feature-specific folders (e.g. payment, admin, analytics, chatbox, contact, roadmap) follow the same pattern.

Shadcn/ui and Base UI

The src/components/ui directory holds the building blocks for the app, sourced from Shadcn/ui. All components are built on Base UI, providing an unstyled foundation.

CategoryComponentsDescription
FormInput, Textarea, Select, Checkbox, Radio Group, Switch, Form, Input Group, FieldForm controls and validation
OverlaysDialog, Alert Dialog, Sheet, Drawer, Popover, Hover CardModals and floating content
NavigationTabs, Navigation Menu, Breadcrumb, Menubar, Pagination, SidebarMenus and navigation
Data DisplayTable, Card, Calendar, Carousel, Avatar, BadgeTables, cards, and display
LayoutAccordion, Collapsible, Separator, Scroll Area, ResizableLayout and structure
FeedbackAlert, Progress, Skeleton, Spinner, Command, EmptyStatus and loading

Usage notes:

  • Prefer not modifying files in src/components/ui so you can pull template updates cleanly.
  • These components are kept in sync with Shadcn/ui and Base UI.
  • The src/components/ui directory is excluded from Biome linting and formatting.

Marketing Blocks

Landing and marketing sections live in src/components/blocks, ready to use for homepage, pricing, and more:

  • 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 (block that composes the pricing table)

You can copy and edit these blocks to match your branding. For more block ideas, see Tailark.

Business Components

Feature-specific components are grouped by domain under src/components:

DirectoryPurpose
authLogin, register, forgot password, reset password, social login
blogBlog card, grid, pagination
layoutNavbar, footer, sidebar, dashboard layout, container
sharedLogo, toaster, form success/error, user button/avatar
settingsProfile, billing, security, files, API keys, notification
themeTheme provider, mode switcher
pricingPricing card, table, checkout button, customer portal
data-tableReusable data table with filters, sorting, toolbar
dashboardSection cards, charts

When adding new components, place them in the right domain folder, use PascalCase for component names, and reuse ui and shared components where possible.

Example:

// src/components/dashboard/section-cards.tsx
import { Card } from "@/components/ui/card"

export function SectionCards() {
  return (
    <Card>
      {/* ... */}
    </Card>
  )
}

References

  • Shadcn/ui
  • Base UI
  • Tailark
  • ReUI
  • ShadcnBlocks

Next Steps

Now that you understand the components in TanStarter, continue reading:

Pages

Customize pages

Landing Page

Build a landing page

Blog

Configure blog system

Website Configuration

Configure core website settings

Table of Contents

Component Structure
Shadcn/ui and Base UI
Marketing Blocks
Business Components
References
Next Steps