Components Library

ClawPlate includes a comprehensive set of Vue components designed for modern SaaS applications. Each component is built with TypeScript, styled with Tailwind CSS, and optimized for performance.

Component Categories

🎨 UI Components

Core interface elements and interactive components.

• Button - Versatile button component with multiple variants
• Toast - Notification system for user feedback

📐 Layout Components

Structural components for page layout and navigation.

• Header - Main navigation with responsive design
• Footer - Site footer with links and branding
• GlobalModal - Centralized modal system

📝 Form Components

Input and form handling components.

• ContactForm - Contact form with validation
• RegisterForm - User registration form

🏠 Landing Page Components

Marketing and presentation components.

• HeroComponent - Main hero section
• Features - Feature showcase grid
• Pricing - Pricing plans display
• Testimonials - Customer testimonials
• BentoGrid - Modern grid layout

🎭 Interactive Components

Animation and interaction components.

• AnimatedBeam - Animated connection lines

⚙️ Utility Components

Helper and utility components.

• SwitchLanguage - Language switcher
• AlertModal - Alert notifications

Usage Patterns

All components follow consistent patterns:

• TypeScript Support - Full type safety and IntelliSense
• Composable Integration - Use Vue composables for state management
• Tailwind Styling - Utility-first CSS classes
• Accessibility - ARIA labels and keyboard navigation
• Responsive Design - Mobile-first approach

Getting Started

To use any component in your pages or other components:

<script setup lang="ts">
// Import composables as needed
const { user } = useAuth()
const { showToast } = useToasts()
</script>

<template>
  <div>
    <Header />
    <main>
      <!-- Your content -->
    </main>
    <Footer />
  </div>
</template>

Component API Reference

Each component documentation includes:

• Props - Component properties and their types
• Events - Emitted events and their payloads
• Slots - Available content slots
• Composables - Related Vue composables
• Examples - Usage examples and code snippets