Components

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

ShipSaaS provides a streamlined set of UI components consisting of Shadcn UI, marketing blocks, and business components, structured cleanly for easy extensibility.

Component Structure

Components are located in the src/components directory and are organized as follows:

src

components/
- ui/
- blocks/
- auth/
- blog/
- layout/
- shared/
- settings/
- theme/
- pricing/
- data-table/
- dashboard/

Other directories partitioned by functionality (such as payment, admin, analytics, chatbox, contact, roadmap) follow the exact same organizational pattern.

Shadcn/ui & Base UI

The src/components/ui directory stores the application's base UI building blocks from Shadcn/ui. All components are built on top of Base UI, providing an unstyled, accessible foundation.

Category	Components	Description
Forms	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 routing navs
Data Display	Table, Card, Calendar, Carousel, Avatar, Badge	Tables, cards, and display
Layout	Accordion, Collapsible, Separator, Scroll Area, Resizable	Structure and layout elements
Feedback	Alert, Progress, Skeleton, Spinner, Command, Empty	Status and loading indicators

Usage Notes:

It is recommended not to modify files within src/components/ui directly to facilitate seamless synchronization of template updates.
These components are periodically kept in sync with upstream Shadcn/ui + Base UI updates.
src/components/ui is excluded from Biome's linting and formatting rules.

Marketing Blocks

Landing page and marketing components are centralized under src/components/blocks. They can be imported directly into the homepage, pricing pages, 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 (pricing tables composite component)

You can copy and modify these components as needed for your product. For more component references, check Tailark.

Business Components

Feature-specific components are located in their respective directories within src/components:

Directory	Purpose
`auth`	Login, registration, forgot/reset password, and social sign-in
`blog`	Blog card, post grid, and blog pagination
`layout`	Navbar, footer, sidebar, dashboard layouts, and content containers
`shared`	Logo, toaster, form success/error alerts, and user profile buttons/avatars
`settings`	User profile, billing, security settings, user files, API keys, and notifications
`theme`	Theme Provider and dark/light mode toggle switch
`pricing`	Pricing cards, comparison tables, checkout buttons, and customer billing portals
`data-table`	Reusable data tables featuring filtering, sorting, and pagination toolbars
`dashboard`	Dashboard widgets, metrics cards, and charts

When adding new components, place them in the corresponding feature directory, name them using PascalCase, and try to reuse components/ui and shared components as much as 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 ShipSaaS, continue reading:

Custom Pages
Landing Page - Build landing pages
Blog - Configure the blog system
Website Configuration - Configure core website settings
Blog
User Management