Complete documentation of all ShipSafe components.

Overview

ShipSafe includes a comprehensive set of pre-built components organized into three categories: UI components (primitives), template components (page-level), and form components (inputs with validation).

Component categories:

• UI Components - Reusable primitives (buttons, cards, inputs)
• Template Components - Complete page sections (hero, pricing, footer)
• Form Components - Form inputs with validation (login, signup)

UI Components

Reusable UI primitives for building interfaces.

Location: src/components/ui/

Buttons

• Button - Primary button component with variants
• ButtonCheckout - Stripe checkout button
• ButtonSignin - Authentication button
• ButtonGradient - Gradient button variant

Form Elements

• Input - Form input component with validation states
• Card - Container component for content

Display Components

• Badge - Label/tag component
• Modal - Dialog component
• Loader - Loading spinner

Branding

• Logo - Logo component with variants
• BuiltWithShipSafe - Attribution badge

Social Proof

• TestimonialsAvatars - Social proof component

See: UI Components Overview for complete list

Template Components

Page-level components for building complete pages.

Location: src/components/templates/

Navigation & Header

• Header - Navigation header with logo and links

Landing Page Sections

• Hero - Hero section with CTA
• Problem - Problem showcase section
• FeaturesGrid - Features grid layout
• FeaturesListicle - Interactive features list

Social Proof

• Testimonial - Testimonials carousel

Pricing & Conversion

• Pricing - Pricing table with plans
• FAQ - FAQ accordion
• CTA - Call-to-action section

Footer

• Footer - Site footer with links

See: Template Components Overview for complete list

Form Components

Form components with built-in validation.

Location: src/components/forms/

• LoginForm - Email/password login form
• SignupForm - User registration form

See: Form Components Overview for complete list

Component Usage Patterns

Basic Usage

import Button from "@/components/ui/Button";
import Hero from "@/components/templates/Hero";

export default function Page() {
  return (
    <div>
      <Hero />
      <Button>Click me</Button>
    </div>
  );
}

With Props

import Pricing from "@/components/templates/Pricing";
import config from "@/config";

export default function PricingPage() {
  return <Pricing plans={config.stripe.plans} />;
}

Customization

All components are designed to be customizable:

• Props - Pass custom data and configuration
• Styling - Use Tailwind classes or DaisyUI themes
• Composition - Combine components to build pages

Component Architecture

Design Principles

1. TypeScript First - All components have TypeScript interfaces
2. Config-Driven - Components read from config.ts
3. Responsive - Mobile-first, works on all screen sizes
4. Accessible - Semantic HTML and ARIA attributes
5. Customizable - Easy to modify and extend

File Structure

Components are organized into three main categories:

src/components/

• ui/ - Reusable UI primitives (Button, Input, Card, Badge, Modal, etc.)
• templates/ - Page-level template components (Hero, Pricing, FAQ, Footer, etc.)
• forms/ - Form components with validation (Login, Signup, etc.)

Component Pattern

// Component structure
interface ComponentProps {
  // Props definition
}

export default function Component({ ...props }: ComponentProps) {
  // Component logic
  return (
    // JSX
  );
}

Best Practices

1. Use TypeScript - Always define prop interfaces
2. Read from Config - Use config.ts for app-wide values
3. Make Responsive - Use Tailwind breakpoints
4. Follow Patterns - Use existing components as examples
5. Keep Simple - One component, one purpose

Customization Guide

Quick Customization

1. Change content: Update props or component content
2. Change styling: Modify Tailwind classes
3. Change theme: Update DaisyUI theme in config.ts

Deep Customization

1. Modify component: Edit component file directly
2. Create variant: Copy component and modify
3. Build new: Use existing components as reference

See: Custom Components Tutorial

Component Reference

By Use Case

Landing Pages:

• Hero, Problem, FeaturesGrid, Testimonial, Pricing, FAQ, CTA, Footer

Authentication:

• LoginForm, SignupForm, ButtonSignin

Payments:

• ButtonCheckout, Pricing

General UI:

• Button, Input, Card, Badge, Modal, Loader

Related Documentation

• Tutorials - Learn to use components
• Custom Components Tutorial - Build your own
• Configuration - Configure components
• Branding - Customize branding

Ready to use components? Check the specific component documentation or start with Ship in 5 Minutes Tutorial!