logoChakra
Wireframes

UI Guidelines

UI design guidelines and conventions.

Modern SaaS starters

Frontend

  • TanStack Start
  • TanStack Router
  • TanStack Query
  • TanStack Table
  • TanStack Form
  • React 19
  • Tailwind v4
  • shadcn/ui
  • Base UI (base-nova)
  • Paraglide JS

Backend

  • TanStack Start server functions
  • Better Auth
  • Better Auth Organizations Plugin
  • Drizzle ORM
  • PostgreSQL

State

  • Zustand only for UI state

    • sidebar collapsed
    • command palette
    • table preferences
    • theme
    • active organization cache

Everything else should live in TanStack Query.


Monorepo Layout

package.json
bun.lock
turbo.json

Apps


Route Structure

index.tsx
login.tsx
register.tsx
index.tsx
profile.tsx
billing.tsx
team.tsx
index.tsx
[slug].tsx
index.tsx
[id].tsx

FSD Structure


Dashboard Layout

Hybrid:

  • dashboard-01 shell
  • sidebar-07 collapse behavior

┌──────────────────────────────────────────────────────────┐
│ Sidebar (sidebar-07) │ Sticky Header                     │
│                      ├──────────────────────────────-────┤
│ Org Switcher         │ Breadcrumbs                       │
│ Search (CMDK)        │                                   │
│                      ├───────────────────────────────-───┤
│ Main Navigation      │ Dashboard Content                 │
│ Projects             │                                   │
│ Settings             │                                   │
│                      │                                   │
│                      │                                   │
│──────────────────────│                                   │
│ User Menu            │                                   │
└──────────────────────────────────────────────────────────┘

Widgets

widgets/

app-sidebar/
dashboard-header/
user-nav/
org-switcher/
breadcrumbs/
command-menu/

Better Auth

Package:

packages/auth
auth/
├── server.ts
├── client.ts
├── organizations.ts
├── permissions.ts
└── session.ts

Providers:

  • Email/Password
  • Google
  • GitHub

Organizations plugin enabled.


Drizzle Package

packages/db
schema/

users.ts
organizations.ts
members.ts
invitations.ts

projects.ts
settings.ts

audit-log.ts

Organization Model

Organization
 ├── Members
 ├── Invitations
 ├── Roles
 ├── Settings
 └── Projects

RBAC

owner;
admin;
manager;
member;
viewer;

stored via Better Auth organization roles.


Sidebar Config

export const navGroups = [
  {
    title: "Platform",
    items: [],
  },
  {
    title: "Management",
    items: [],
  },
  {
    title: "Settings",
    items: [],
  },
];

TanStack Query

Entity driven.

entities/

project/
├── api/
├── hooks/
├── queries/
├── table/
└── types/

Example:

useProjectsQuery();
useProjectQuery(id);

TanStack Table

entities/project/table

Contains:

project - columns.tsx;
project - table.tsx;

Supports:

  • sorting
  • filtering
  • column visibility
  • row selection
  • server pagination

TanStack Form

features/project-form

Contains:

create-project-form.tsx
edit-project-form.tsx

Using:

zod v4
tanstack form

Landing Page

Sections:

Hero
Features
Testimonials
Pricing
FAQ
CTA
Footer

Navigation:

Features
Pricing
Docs
Blog
Login
Get Started

Zustand Stores

shared/store

sidebar-store.ts
theme-store.ts
command-store.ts
organization-store.ts

Avoid business data here.


i18n

Package:

packages/i18n

Using:

bun add @inlang/paraglide-js

Locales:

en
es
fr
de

Route-aware language switcher.


Packages/UI

packages/ui

Contains:

components/
hooks/
icons/
providers/

Installed via:

  • shadcn/ui
  • base-nova

Shared across future apps.

Last updated on

On this page