Skip to content
ShipSaaSShipSaaS Docs

Components

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

Component Structure

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “References”

Next Steps

Section titled “Next Steps”

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