See it. Understand it. Copy it.
A visual developer reference — layouts, API auth, HTTP codes, security headers, performance, and accessibility.
Live demos, practical context, and copy-ready examples built with shadcn/ui.
Topics · Features · Run locally · Structure · Add a topic · About
Most dev references are either too dense (specs and RFCs) or too shallow (blog posts that age fast). Dev Wiki sits in the middle: visual, browsable, and practical.
Each topic follows the same rhythm:
- Map page — scan all entries at a glance
- Detail page — context, tips, warnings, and copy-ready code
- Navigate fast — search, filters, breadcrumbs, and related entries
No theory overload. No handoff gap between design and implementation. Just see → understand → copy.
55 entries across 6 topics, grouped by category on the home page.
| Topic | Route | Entries | What you get |
|---|---|---|---|
| Webpage Layouts | /layouts |
12 | Live layout demos, when to use / avoid, real-world examples, shadcn/ui snippets |
| # | Layout | Best when you need… |
|---|---|---|
| 01 | Single Column | Reading flow, blogs, docs, mobile-first content |
| 02 | Two Column | Sidebar navigation + focused main area |
| 03 | Grid | Portfolios, product cards, image galleries |
| 04 | F-Pattern | Scannable landing pages (eyes move top → left) |
| 05 | Z-Pattern | Marketing pages that guide toward a CTA |
| 06 | Split Screen | Comparisons, dual offerings, bold choices |
| 07 | Magazine | Editorial hierarchy with a hero story |
| 08 | Asymmetrical | Creative, dynamic, brand-forward compositions |
| 09 | Holy Grail | Classic app shell: header · sidebars · footer |
| 10 | Masonry | Pinterest-style staggered media grids |
| 11 | Hero Landing | Conversion-focused SaaS / product pages |
| 12 | Full-Screen | Immersive storytelling with scroll-snap |
| Topic | Route | Entries | What you get |
|---|---|---|---|
| API Authentication | /api-auth |
6 | Flow diagrams, security warnings, example requests (API key → mTLS) |
| HTTP Status Codes | /http-status |
12 | When to use each code, example responses (200 → 503) |
| Security Headers | /security-headers |
8 | CSP, HSTS, CORS, and copy-ready header configs |
| Topic | Route | Entries | What you get |
|---|---|---|---|
| Performance | /performance |
9 | Optimization checklist with impact levels and Core Web Vitals mapping |
| Accessibility | /accessibility |
8 | Inclusive practices with practical tips and code examples |
| Feature | Description |
|---|---|
| Global search | ⌘K / Ctrl+K — search all 55 entries across topics |
| Tag filters | Filter map pages by category tag (e.g. images, 2xx success, xss) |
| Related entries | Discover similar items at the bottom of each detail page |
| Breadcrumbs | Always know where you are: Home → Topic → Entry |
| Topic navigation | Header links to every section; mobile hamburger menu |
| Dark mode | Persistent theme toggle |
| One-click copy | Syntax-highlighted code blocks with VS Code themes |
Every layout detail page includes:
| What | Why it matters | |
|---|---|---|
| Context | Best for, avoid when, real-world examples | Pick the right pattern for the job |
| Live demo | Realistic UI with shadcn/ui components | Judge spacing, rhythm, and hierarchy |
| IDE code | Syntax-highlighted TSX | Read it like your editor |
| One-click copy | Grab the snippet and paste | Skip the scaffolding |
Built with a soft pastel palette — warm backgrounds, gentle accent tints, and generous whitespace.
- Light & dark mode with a persistent theme toggle
- tweakcn-style CSS variables on Tailwind v4
- shadcn/ui
new-yorkcomponents - Inter typography, rounded cards, subtle borders
The goal: feel curated, not generic.
git clone https://github.com/Luke-official/webpage-layouts.git
cd webpage-layouts
npm install
npm run devOpen http://localhost:5173 and explore.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Type-check + production build |
npm run preview |
Preview production build |
npm run lint |
Run oxlint |
| Layer | Tech |
|---|---|
| Framework | Vite + React 19 + TypeScript |
| Styling | Tailwind CSS v4 |
| Components | shadcn/ui |
| Routing | React Router |
| Code display | react-syntax-highlighter |
src/
├── components/
│ ├── ui/ # shadcn/ui primitives
│ ├── site/ # Header, footer, theme toggle
│ ├── wiki/ # Shared wiki shell (layout, search, cards, code block)
│ ├── layouts/ # Layout topic components
│ ├── api-auth/ # API auth topic components
│ ├── performance/ # Performance topic components
│ ├── http-status/ # HTTP status topic components
│ ├── security-headers/ # Security headers topic components
│ └── accessibility/ # Accessibility topic components
├── data/ # Topic registries, entry definitions, search index
├── hooks/ # Page title, theme sync
├── layouts/ # 12 live layout demo components
├── pages/ # Route pages (map + detail per topic)
└── lib/ # Brand tokens, wiki utilities
Components outside ui/ are organized by wiki section — adding a topic means adding a folder under components/ and a data file under data/.
- Define entries — create
src/data/your-topic.tswith slug, title, tag, description, tips, and optional code - Register the topic — add to
src/data/wiki-topics.ts(title, path, category, entry count) - Add to search — register entries in
src/data/wiki-search-index.ts - Create components —
src/components/your-topic/for previews and detail views - Create pages — map page + detail page in
src/pages/ - Add routes — register in
src/App.tsx
Checklist-style topics can reuse ChecklistItemInfo from components/wiki/. Layout-style topics with live demos follow the pattern in components/layouts/.
Luke (@Luke-official) — Front-end engineer with a product mindset.
Bridging pixel-perfect UI and high-level product vision. Based in Messina, Italy. Building digital experiences that balance business value and end-user delight.
If this project saves you time, consider giving it a star — it helps others discover it too.
MIT — free to use, remix, and share.
Made with intention · Open for everyone