vitepress-template-fluent

A VitePress custom theme inspired by Microsoft Fluent 2 — clean typography, a restrained accent palette, and ready-made landing components (Hero, ProductGrid, FeatureSection, CallToAction) plus an Office-style AppHeader / AppFooter.

Live demo: https://undownding.github.io/vitepress-template-fluent/

Install

npm install vitepress-template-fluent vitepress vue
# or
pnpm add vitepress-template-fluent vitepress vue
# or
yarn add vitepress-template-fluent vitepress vue

vitepress and vue are peer dependencies.

Use as a custom theme

In your own docs project, create docs/.vitepress/theme/index.ts that re-exports this theme (see VitePress — Using a Custom Theme):

// docs/.vitepress/theme/index.ts
import Theme from 'vitepress-template-fluent'

export default Theme

Then in docs/.vitepress/config.ts, tell Vue's template compiler about Fluent's custom elements:

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'My Site',
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith('fluent-'),
      },
    },
  },
})

Use the landing components in markdown

The theme registers these components globally, so you can drop them straight into any .md page:

---
layout: fluent-home
title: My product
---

<Hero
  eyebrow="Our product"
  title="Build your best work."
  description="A short value proposition that sets the tone."
  primary-text="Get started"
  primary-href="#start"
  secondary-text="Learn more"
  secondary-href="#learn"
/>

<ProductGrid />

<FeatureSection
  eyebrow="Productivity"
  title="Write, analyze, design — together."
  description="Pair rich prose with structured data to tell your story."
  :bullets='["Real-time co-authoring","Shared spaces","Smart suggestions"]'
  cta-text="Explore"
  cta-href="#explore"
/>

<CallToAction
  title="Start today."
  description="Free to try. No credit card required."
  primary-text="Start free"
  primary-href="#start"
/>

Overriding tokens

The theme exposes CSS custom properties for colors, surfaces, and borders. Override them in your own stylesheet (loaded after the theme):

:root {
  --fluent-accent: #0f6cbd;
  --fluent-accent-hover: #115ea3;
}

.dark {
  --fluent-accent: #479ef5;
}

Additional subpath exports are available if you want to cherry-pick:

import Hero from 'vitepress-template-fluent/components/Hero.vue'
import 'vitepress-template-fluent/styles/vars.css'

Develop this repo

npm install
npm run dev      # start the demo site
npm run build    # build the demo site to docs/.vitepress/dist
npm run preview  # preview the production build

The demo site lives in docs/. The publishable theme lives in theme/ at the repo root — the demo's docs/.vitepress/theme/index.ts simply re-exports it.

Repo layout

theme/                       # ← published on npm
├── index.ts
├── Layout.vue
├── fluent.client.ts
├── components/              # Hero, ProductGrid, FeatureSection, CallToAction, AppHeader, AppFooter
└── styles/                  # vars.css, global.css
docs/                        # demo site (not published)
├── .vitepress/
│   ├── config.ts
│   └── theme/
│       └── index.ts         # re-exports ../../../theme
├── index.md                 # uses layout: fluent-home
└── ...

Notes on Fluent UI + VitePress

Fluent Web Components are registered via provideFluentDesignSystem() inside an if (inBrowser) block — they touch browser-only APIs and must not run during SSR. The fluent- prefix must be declared as a custom-element prefix in your VitePress config so Vue's template compiler does not warn.

License

MIT © undownding