Docs / Getting started

Introduction

Manual is a lightweight toolkit for building fast, accessible web apps. This guide walks you through installation, configuration and the core concepts in about ten minutes.

💡 New in 2.4

Server components, a new theming API and 30% smaller bundles. Read the upgrade guide.

Installation

Install the package with your favourite package manager:

npm install manual-kit

pnpm add manual-kit

yarn add manual-kit

Quick start

Create your first app with a single component:

import { createApp, Button } from 'manual-kit';

const app = createApp({
  theme: 'light',
  root: document.getElementById('app'),
});

app.render(<Button variant="primary">Hello world</Button>);

Configuration

All options can be passed to createApp() or defined in manual.config.js:

Option	Type	Default	Description
`theme`	string	`'light'`	Color scheme: light, dark or system.
`locale`	string	`'en'`	Default language for built-in texts.
`strict`	boolean	`true`	Warn about accessibility problems in development.
`plugins`	array	`[]`	List of plugins to load at startup.

⚠️ Heads up

Changing strict in production has no effect — warnings are removed from production builds.

Components

Components are small, composable building blocks. Each one ships with sensible defaults, keyboard support and ARIA attributes.

ButtonActions & links DialogAccessible modals TabsSwitch between views ToastNotifications

Theming

Themes are plain CSS variables. Override them globally or per component:

:root {
  --mk-primary: #4f46e5;
  --mk-radius: 12px;
}

Routing

File-based routing maps every file in /pages to a URL. Dynamic segments use brackets: /pages/blog/[slug].js.

Data fetching

Use load() to fetch data on the server before a page renders. Results are cached automatically.

Deployment

Run npm run build and upload the dist folder to any static host — Netlify, Vercel, Cloudflare Pages or your own server.

✅ That's it!

You are ready to build. Join our community on Discord if you have questions.

FAQ

Does Manual work with TypeScript?

Yes, types are included out of the box.

Can I use it with my existing CSS?

Absolutely. Manual only uses scoped CSS variables and never resets global styles.

Last updated on September 20 · Edit this page