Components Overview

SaaSStinger Lite uses a component-based architecture built with:

• React
• TypeScript
• Tailwind CSS
• shadcn/ui

Components are organized by feature and responsibility.

The component system separates:

• Reusable UI primitives
• Feature components
• Application layouts
• Business-specific interfaces

Component Structure

Components are located in:

src/components/

Structure:

components/

├── ui/
├── auth/
├── dashboard/
├── invites/
├── members/
├── notifications/
├── projects/
├── settings/
└── users/

Component Categories

UI Components

Location:

src/components/ui/

These are reusable interface primitives.

Examples:

button.tsx

dialog.tsx

card.tsx

table.tsx

input.tsx

These components are based on shadcn/ui patterns.

Feature Components

Feature components represent application functionality.

Examples:

components/projects/

ProjectCard.tsx

ProjectDialog.tsx

ProjectList.tsx

Feature components should contain UI logic for their specific domain.

Dashboard Components

Location:

src/components/dashboard/

Contains application shell components.

Examples:

DashboardSidebar.tsx

DashboardNavbar.tsx

WorkspaceSwitcher.tsx

Responsibilities:

• Navigation
• Workspace context
• User interface layout

Authentication Components

Location:

src/components/auth/

Examples:

AuthRedirectGate.tsx

ProtectedRoute.tsx

WorkspaceGate.tsx

Responsibilities:

• Route protection
• Authentication state handling
• Access control UI

Member Components

Location:

src/components/members/

Examples:

MembersTable.tsx

MemberRow.tsx

MemberRoleBadge.tsx

Used for:

• Workspace member display
• Role management
• Member actions

Invitation Components

Location:

src/components/invites/

Examples:

InviteDialog.tsx

InviteTable.tsx

InviteActions.tsx

Used for:

• Creating invitations
• Managing invitations
• Displaying invite status

Project Components

Location:

src/components/projects/

Examples:

ProjectCard.tsx

ProjectList.tsx

TaskDialog.tsx

Used for project-related features.

shadcn/ui Components

Location:

src/components/ui/

shadcn/ui provides accessible, customizable components.

Examples:

<Button>
  Save
</Button>

<Card>
  Content
</Card>

Components are copied into the project rather than imported from a runtime library.

Adding a New shadcn Component

Use:

pnpm dlx shadcn@latest add component-name

Example:

pnpm dlx shadcn@latest add dropdown-menu

The component is added to:

src/components/ui/

Component Design Pattern

A typical feature component:

Feature

├── Components
├── Hooks
├── Actions
├── Services
└── Types

Example:

Projects

components/projects/

hooks/useProject.ts

actions/project.ts

services/project/

Component Data Flow

Components should not directly handle database logic.

Recommended flow:

Component

    ↓

Hook

    ↓

Server Action

    ↓

Service

    ↓

Repository

    ↓

Firestore

Client Components

Use client components when requiring:

• React state
• Event handlers
• Browser APIs
• Interactive behavior

Example:

"use client";

export function Dialog() {
}

Server Components

Use server components for:

• Data fetching
• Static rendering
• Server-side operations

Avoid unnecessary client components.

Component Naming

Recommended:

Use descriptive names.

Good:

WorkspaceSwitcher

InviteDialog

MemberTable

Avoid:

Component1

Helper

Thing

Creating New Components

Recommended process:

1. Identify component responsibility.
2. Decide server/client requirement.
3. Create component in the correct feature folder.
4. Add TypeScript types.
5. Reuse existing UI primitives.
6. Test functionality.

Component Best Practices

Keep Components Focused

Avoid:

• Large components
• Mixed responsibilities
• Database operations inside UI

Reuse Existing Components

Before creating:

NewButton.tsx

check:

components/ui/button.tsx

Keep Business Logic Outside Components

Prefer:

Component

↓

Service

instead of:

Component

↓

Firestore

Related Documentation

• Folder Structure
• Server Actions
• Working With Services
• Repository Pattern
• Adding Components