Theme Development

VeloCMS themes come in two flavors: preset configs (JSON objects that define colors, typography, and layout — no code required) and full layout themes (npm packages that export React components). Most marketplace themes are layout themes, which give you complete control over the content area.

The platform handles routing, authentication, member management, and the admin UI. Your theme controls how the blog looks to readers: the blog index, individual post pages, and optionally a custom homepage. VeloCMS wraps your components with its own navigation chrome — you style the content, not the platform shell.

In this section

Preset JSON schema

The complete preset config schema: colors, typography, spacing, layout variants.

Design tokens

OKLCH color tokens, semantic variables, and how they map to Tailwind utilities in the theme engine.

Layout variants

Header variants, post grid options, sidebar config, and footer styles available to themes.

Submission process

Screenshot requirements, review criteria, pricing mechanics, and what makes a theme stand out in the marketplace.

Quick scaffolding

npx create-velocms-theme my-blog-theme
cd my-blog-theme
npm install && npm run dev