Documentation Components

This page demonstrates the custom Vue components available in our documentation.

Callout Component

Enhanced callout boxes with icons for drawing attention to important information.

Usage

<Callout type="tip" title="Pro Tip">
This is a helpful tip for users!
</Callout>

Examples

Information

This is an informational callout with the default info icon.

Helpful Tip

Use this for tips and best practices.

Warning

Important warnings that users should be aware of.

Critical

Critical information that requires immediate attention.

Success

Positive confirmation or success messages.

Custom Icons

Custom Icon

You can override the default icon with any Lucide icon.

Tabs Component

Perfect for showing code examples in multiple languages or platforms.

Usage

<Tabs>
  <template #default="{ activeTab, setActiveTab }">
    <TabList :tabs="[
      { label: 'JavaScript', icon: '📜' },
      { label: 'TypeScript', icon: '📘' }
    ]" />

    <TabPanel :index="0">
      JavaScript content here
    </TabPanel>

    <TabPanel :index="1">
      TypeScript content here
    </TabPanel>
  </template>
</Tabs>

Example

# Clone the repository
git clone https://github.com/lissy93/pixelflare.git
cd pixelflare

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Clone the repository
git clone https://github.com/lissy93/pixelflare.git
cd pixelflare

# Install dependencies
pnpm install

# Start development server
pnpm dev

// Using the Pixelflare SDK
import { Pixelflare } from '@pixelflare/sdk';

const client = new Pixelflare({
  apiKey: 'your-api-key',
  endpoint: 'https://your-instance.com'
});

// Upload an image
await client.upload({
  file: imageFile,
  visibility: 'public'
});

Next Steps Component

Guide users to related pages with smart navigation cards.

Usage

<NextSteps
  title="What's Next?"
  :steps="[
    {
      title: 'Deploy to Production',
      description: 'Learn how to deploy your instance',
      link: '/deploy',
      icon: 'lucide:rocket',
      type: 'primary'
    },
    {
      title: 'Configure Features',
      description: 'Set up authentication, analytics, and more',
      link: '/deploy/config',
      icon: 'lucide:settings'
    }
  ]"
/>

Example

Explore More

Component Library

Browse all available Svelte components

TypeScript Types

View TypeScript type definitions

Configuration

Learn about configuration options

Markdown Containers

VitePress also supports built-in markdown containers:

INFO

This is an info box using markdown syntax.

TIP

This is a tip using markdown syntax.

WARNING

This is a warning using markdown syntax.

DANGER

This is a danger box using markdown syntax.

Component Props

Callout Props

Prop	Type	Default	Description
type	'info' | 'tip' | 'warning' | 'danger' | 'note' | 'success'	'info'	The callout variant
title	string	Type name	Custom title text
icon	string	Auto	Custom Lucide icon name

Tabs Props

Prop	Type	Default	Description
defaultTab	number	0	Initially active tab index
persist	boolean	false	Save active tab to localStorage
storageKey	string	'vitepress-tabs'	localStorage key name

NextSteps Props

Prop	Type	Description
steps	NextStep[]	Array of navigation items
title	string	Section title (default: "Next Steps")

NextStep Interface

interface NextStep {
  title: string;        // Card title
  description: string;  // Card description
  link: string;         // Target URL
  icon?: string;        // Optional Lucide icon
  type?: 'primary' | 'secondary'; // Visual emphasis
}