Getting started
Project structure
What lives where in your edition. Pick the tab to see the layout for HTML or Next.js.
text
vexell-next/
├── app/
│ ├── page.tsx ← Marketing home
│ ├── layout.tsx
│ ├── (marketing)/ ← 9 vertical demos + features + pricing
│ │ ├── ai-coding/ ← Axiom
│ │ │ ├── page.tsx
│ │ │ ├── features/page.tsx
│ │ │ └── pricing/page.tsx
│ │ ├── ai-sales/ ← Stride
│ │ ├── ai-support/ ← Lumen
│ │ └── … ← (6 more verticals)
│ ├── (auth)/ ← signin + signup + forgot-password
│ ├── components/page.tsx ← Components gallery
│ ├── dashboard/ ← Workspace + settings + onboarding
│ ├── docs/ ← Internal component reference (gone in v1.6 — see vexell.dev/docs)
│ ├── status/ ← Public status page
│ ├── themes/ ← Live theme customizer
│ ├── blog/ ← 6 sample posts (MDX-friendly)
│ └── globals.css ← Tailwind + tokens entry
├── components/
│ ├── primitives/ ← Atoms — Button, Input, Badge, Avatar
│ ├── molecules/ ← CommandBar, ChartTooltip, ContextBadge
│ ├── organisms/ ← AppShell, ChatComposer, ThemeCustomizer
│ ├── sections/ ← Hero patterns, marketing sections
│ └── demos/ ← Per-vertical components (Axiom, Stride…)
├── lib/
│ ├── analytics/ ← Typed event catalog + provider
│ └── utils.ts
├── tokens/ ← Theme tokens (see Customization)
│ ├── theme.css
│ ├── semantic.css
│ └── index.css
├── fonts/ ← Geist Variable woff2
├── public/ ← favicons, og images, mockups
├── next.config.ts
├── tsconfig.json
└── package.jsonFolders to know
- tokens/ — every visual property is a CSS variable. Change one token and the whole template re-themes. See Customization.
- fonts/ — Geist Variable bundled (woff2). Bring your own family by replacing the files and updating
--font-sans. - public/ (Next) or top-level (HTML) — favicons, og images, mockup PNGs. Replace the favicon at
favicon.svg. - analytics — vendor-agnostic, consent-gated. See Analytics.