Getting started

This template demonstrates a practical docs shell with persistent navigation, content areas, and support elements like tabs, data tables, and FAQ blocks.

Note: Every section uses existing Graffiti classes so the structure can be copied directly into app docs without custom CSS.

Quickstart

Install Graffiti and import the stylesheet in your SvelteKit layout:

npm i @graffiti-css/drop-in
import '@graffiti-css/drop-in';

Tabs section

Overview

Use tabs when readers need to scan short alternatives like framework-specific setup notes.

SvelteKit

Import Graffiti in your root layout and compose sections with semantic HTML and utility classes.

Static HTML

The same class stack works in plain HTML pages for framework-agnostic documentation sites.

Table section

Documentation sections and completion status.
Section	Owner	Status	Updated
Getting started	Docs team	Published	Mar 8, 2026
Layout utilities	Design systems	Reviewing	Mar 10, 2026
Component API	DX engineering	Draft	Mar 12, 2026

FAQ details section

Do I need JavaScript for this layout?

No. Navigation, tabs, and disclosures are built with semantic HTML patterns and Graffiti classes.

Can I reuse this in another framework?

Yes. The markup is framework-agnostic and can be copied into any docs project that includes Graffiti.

How should I organize long docs pages?

Pair a sidebar nav with a right-side table of contents so readers can move between sections quickly.