Wireframes
UI Guidelines
UI design guidelines and conventions.
Modern SaaS starters
Recommended Stack
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/authauth/
├── server.ts
├── client.ts
├── organizations.ts
├── permissions.ts
└── session.tsProviders:
- Email/Password
- GitHub
Organizations plugin enabled.
Drizzle Package
packages/dbschema/
users.ts
organizations.ts
members.ts
invitations.ts
projects.ts
settings.ts
audit-log.tsOrganization Model
Organization
├── Members
├── Invitations
├── Roles
├── Settings
└── ProjectsRBAC
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/tableContains:
project - columns.tsx;
project - table.tsx;Supports:
- sorting
- filtering
- column visibility
- row selection
- server pagination
TanStack Form
features/project-formContains:
create-project-form.tsx
edit-project-form.tsxUsing:
zod v4
tanstack formLanding Page
Sections:
Hero
Features
Testimonials
Pricing
FAQ
CTA
FooterNavigation:
Features
Pricing
Docs
Blog
Login
Get StartedZustand Stores
shared/store
sidebar-store.ts
theme-store.ts
command-store.ts
organization-store.tsAvoid business data here.
i18n
Package:
packages/i18nUsing:
bun add @inlang/paraglide-jsLocales:
en
es
fr
deRoute-aware language switcher.
Packages/UI
packages/uiContains:
components/
hooks/
icons/
providers/Installed via:
- shadcn/ui
- base-nova
Shared across future apps.
Last updated on