Documentation

Build with Vlak
Documentation
Reader settings

Preferences apply to this reader.

100%
Documentation

Guides.

  1. Before arranging a page, decide what someone needs to understand first, what comes next, and what can wait.

    Foundations7 September 20264 min read

  2. Keep the value someone is editing separate from the value a service has accepted. Make both names and transitions explicit.

    Components3 September 20263 min read

  3. A phone needs a complete task at a readable scale. Give the list, the detail and the action their own places.

    Patterns28 August 20263 min read

  4. An action needs more than a click response. Explain what changed, what remains pending, and where someone can recover.

    Patterns20 August 20263 min read

  5. A shared module gives pages a familiar rhythm. Use it to align meaning, then let the content carry the page.

    Foundations12 August 20263 min read

  6. Zero, missing, not recorded and unavailable are different states. Give the application room to say which one it has.

    Components5 August 20263 min read
Field guide / 2026Original sample documentation
6 guidesA place to read and return

Browse the index → read a document → navigate its contents

View source

Inside the interface

A documentation reader adapted from the essays design at renatovaldes.com. An open index pairs document summaries with quiet metadata. Articles use a 592px reading measure and a compact heading outline that reveals readable labels on approach. Inter carries every heading, paragraph and control. Reader settings adjust appearance and text size.

Documents are original sample copy. Navigation and reader preferences work within this study; no publishing service or subscription is connected.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed
Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Vlak Button and Icon provide document navigation, contents actions and reader controls. The 204px module, metadata track and article measure follow the reference site's editorial layout.
  • Popover, Field and the shared settings mark compose reader preferences. Toggle group selects appearance; text-size actions resize the reading content without changing the surrounding site.
  • The heading outline tracks the current section, reveals labels on hover or keyboard focus and can stay open while reading. Document navigation preserves the index position, with a responsive disclosure replacing the desktop rail.
  • On mobile, the document index and reader use the full specimen width. A disclosure exposes navigation or article contents; reader settings and Back stay reachable while the text scrolls independently.