ShipTanStarter DocsComponents
Learn about the components available in ShipTanStarter and how to use them effectively
ShipTanStarter 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.
| Category | Components | Description |
|---|---|---|
| Form | Input, Textarea, Select, Checkbox, Radio Group, Switch, Form, Input Group, Field | Form controls and validation |
| Overlays | Dialog, Alert Dialog, Sheet, Drawer, Popover, Hover Card | Modals and floating content |
| Navigation | Tabs, Navigation Menu, Breadcrumb, Menubar, Pagination, Sidebar | Menus and navigation |
| Data Display | Table, Card, Calendar, Carousel, Avatar, Badge | Tables, cards, and display |
| Layout | Accordion, Collapsible, Separator, Scroll Area, Resizable | Layout and structure |
| Feedback | Alert, Progress, Skeleton, Spinner, Command, Empty | Status and loading |
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:
| Directory | Purpose |
|---|---|
| auth | Login, register, forgot password, reset password, social login |
| blog | Blog card, grid, pagination |
| layout | Navbar, footer, sidebar, dashboard layout, container |
| shared | Logo, toaster, form success/error, user button/avatar |
| settings | Profile, billing, security, files, API keys, notification |
| theme | Theme provider, mode switcher |
| pricing | Pricing card, table, checkout button, customer portal |
| data-table | Reusable data table with filters, sorting, toolbar |
| dashboard | Section 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
Next Steps
Now that you understand the components in ShipTanStarter, continue reading: