Step 5: Components

Now you'll reuse a component instead of copying HTML.

Before you start

Step 4 finished

Do it

Type each command on its own and wait for it to finish before the next one.

Add this to any Markdown page:

<ZoneGrid>
  <ZoneCard title="Tutorials" link="/tutorials/" text="Step-by-step lessons." />
</ZoneGrid>

Need a pattern (cards, hero, pricing, FAQ)? Find one on 21st.dev, then rebuild it as a small Vue component that uses your tokens. Check each component's licence before you copy code.

To add your own component, create site/.vitepress/theme/components/Callout.vue. Then register it in theme/index.ts:

import Callout from './components/Callout.vue';
app.component('Callout', Callout);

Result

The card shows on the page and uses your tokens.

Checkpoint

It works in light and dark mode
It has no hard-coded colours

Next step

Step 6: Write the docs

Back: Step 4: Pages & zones

Step 5: Components ​

Before you start ​

Do it ​

Result ​

Checkpoint ​

Next step ​