UI System

SaaSStinger Lite uses a reusable UI system built with:

• shadcn/ui
• Tailwind CSS
• Radix UI primitives
• TypeScript

The UI system provides consistent building blocks across the application.

UI Component Location

Reusable UI components are located at:

src/components/ui/

Examples:

button.tsx

card.tsx

dialog.tsx

input.tsx

table.tsx

dropdown-menu.tsx

Design Philosophy

The UI system follows these principles:

• Accessible by default
• Customizable source code
• Consistent styling
• Reusable primitives

shadcn/ui Approach

SaaSStinger Lite uses the shadcn/ui component model.

Unlike traditional component libraries:

• Components are owned by the project.
• Developers can modify them.
• No runtime dependency is required for components.

Example:

import { Button } from "@/components/ui/button";

Tailwind CSS

Styling is handled through Tailwind utility classes.

Example:

<div className="flex items-center gap-4">

Common utilities:

flex

grid

gap

p

m

rounded

text

bg

Component Composition

Components are designed to be composed.

Example:

<Card>

  <CardHeader />

  <CardContent />

</Card>

Small primitives combine into larger interfaces.

Variants

Many UI components support variants.

Example:

<Button variant="destructive">
Delete
</Button>

Variants allow reuse without creating duplicate components.

Adding UI Components

To add a new shadcn component:

pnpm dlx shadcn@latest add component-name

Example:

pnpm dlx shadcn@latest add tabs

The generated component appears in:

src/components/ui/

Modifying Existing UI Components

UI components can be customized.

Examples:

• Adjust styles
• Add variants
• Change default behavior

Before modifying:

1. Check where the component is used.
2. Confirm changes do not break existing pages.
3. Test affected features.

Application Theme

Theme-related components are located in:

src/components/layout/

Example:

ThemeToggle.tsx

Theme configuration works with the application's provider system.

Forms

Forms combine:

• UI components
• Validation logic
• Server actions

Example:

Form Component

        ↓

Server Action

        ↓

Service

        ↓

Database

Tables

Table interfaces commonly use:

src/components/ui/table.tsx

Feature tables extend these primitives.

Examples:

MembersTable

InviteTable

AuditTable

Dialogs and Modals

Dialogs are built using reusable primitives.

Examples:

InviteDialog

ProjectDialog

Recommended pattern:

Trigger

    ↓

Dialog

    ↓

Action

    ↓

Feedback

Loading States

The UI system supports loading experiences through:

skeleton.tsx

spinner.tsx

Use loading states for:

• Data fetching
• Server operations
• Async actions

UI Development Guidelines

When creating UI:

Prefer Existing Components

Before creating a new button, card, or input:

Check:

src/components/ui/

Keep Styling Consistent

Reuse:

• Existing spacing
• Existing patterns
• Existing variants

Avoid Hardcoded Designs

Prefer:

className="text-muted-foreground"

over:

style={{
 color: "#777"
}}

Related Documentation

• Components Overview
• Creating Components
• Adding Components
• Folder Structure