Examples

Example projects and templates using ComponentVault components.

Examples

Get started quickly with our example projects and templates.

Starter Templates

Next.js Starter

A complete Next.js 14 starter with all free components pre-installed.

Dashboard Template

Full admin dashboard using Sidebar Pro and Data Table Pro.

SaaS Landing Page

Marketing landing page with Animated Cards and modern design.

Code Examples

Basic Card Grid

A responsive grid of animated cards:

import { AnimatedCard } from '@/components/ui/animated-card';

export function CardGrid() {
  const items = [
    { title: 'Analytics', description: 'Track your metrics' },
    { title: 'Reports', description: 'Generate insights' },
    { title: 'Settings', description: 'Configure your app' },
  ];

  return (
    <div className="grid gap-4 md:grid-cols-3">
      {items.map((item) => (
        <AnimatedCard key={item.title} variant="hover">
          <h3 className="font-semibold">{item.title}</h3>
          <p className="text-muted-foreground">{item.description}</p>
        </AnimatedCard>
      ))}
    </div>
  );
}

Search with Results

Search input with live filtering:

import { useState } from 'react';
import { SearchInput } from '@/components/ui/search-input';

export function SearchWithResults() {
  const [results, setResults] = useState<string[]>([]);

  const handleSearch = (query: string) => {
    // Filter your data here
    const filtered = allItems.filter((item) =>
      item.toLowerCase().includes(query.toLowerCase())
    );
    setResults(filtered);
  };

  return (
    <div className="space-y-4">
      <SearchInput
        placeholder="Search items..."
        onSearch={handleSearch}
      />
      <ul className="space-y-2">
        {results.map((result) => (
          <li key={result}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

Status Dashboard

Real-time status indicators:

import { StatusBadge } from '@/components/ui/status-badge';

const services = [
  { name: 'API', status: 'online' },
  { name: 'Database', status: 'online' },
  { name: 'Cache', status: 'away' },
  { name: 'Queue', status: 'offline' },
];

export function StatusDashboard() {
  return (
    <div className="space-y-2">
      {services.map((service) => (
        <div key={service.name} className="flex items-center justify-between">
          <span>{service.name}</span>
          <StatusBadge status={service.status} />
        </div>
      ))}
    </div>
  );
}

Keyboard-driven command palette:

import { useState, useEffect } from 'react';
import { CommandPalette } from '@/components/ui/command-palette';

export function AppCommandMenu() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen(true);
      }
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <CommandPalette
      open={open}
      onOpenChange={setOpen}
      commands={[
        { id: 'home', label: 'Go Home', action: () => router.push('/') },
        { id: 'settings', label: 'Settings', action: () => router.push('/settings') },
      ]}
    />
  );
}