Components

Customize and extend the built-in landing page and UI components.

UI Components

Built on shadcn/ui and Radix UI primitives - accessible, customizable, and type-safe.

Available Components

Button

Primary, secondary, and variant buttons

Dialog

Modal dialogs (license activation)

Input

Text input fields

Card

Content containers with header/footer

Accordion

Collapsible content (FAQ)

Sonner

Toast notifications

Alert

Notification messages and warnings

Separator

Visual dividers

Want to add more components?

Browse the full shadcn/ui component library and add what you need:

→ shadcn/ui Components Documentation

Using Components

Import Pattern

import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Card } from '@/components/ui/card';

export function MyComponent() {
  return (
    <div>
      <Button>Click me</Button>
      <Input placeholder="Enter text" />
    </div>
  );
}

Toast Notifications

import { toast } from 'sonner';

// Success
toast.success('File processed successfully!');

// Error
toast.error('Failed to process file');

// Loading
toast.loading('Processing...');

Customization Methods

Method 1: Tailwind Classes (Recommended)

<Button className="bg-blue-500 hover:bg-blue-600">
  Custom Button
</Button>

Method 2: Variants

<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>
<Button variant="ghost">Subtle Action</Button>

Method 3: Modify Component Files

Edit files in components/ui/ to change default styles.

Landing Page Components

Six modular components in components/landing/:

Herocomponents/landing/Hero.tsx

Main headline and CTA

Customize: title, subtitle, CTA text and action

Featurescomponents/landing/Features.tsx

Product features grid

Customize: feature items, icons, descriptions

Pricingcomponents/landing/Pricing.tsx

Pricing cards with CTA

Customize: price display, features list, CTA behavior

FAQcomponents/landing/FAQ.tsx

Frequently asked questions

Customize: questions and answers (accordion items)

CTAcomponents/landing/CTA.tsx

Final call-to-action

Customize: title, subtitle, CTA text, show/hide price

Footercomponents/landing/Footer.tsx

Site footer with links

Customize: social links, additional links

Edit in: app/home-client.tsx to modify props and layout

Common Patterns

Loading States

import { Loader2 } from 'lucide-react';

<Button disabled={isLoading}>
  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
  {isLoading ? 'Processing...' : 'Process File'}
</Button>

Error States

import { Alert, AlertDescription } from '@/components/ui/alert';

{error && (
  <Alert variant="destructive">
    <AlertDescription>{error}</AlertDescription>
  </Alert>
)}

Empty States

{items.length === 0 ? (
  <div className="text-center py-12 text-gray-500">
    <p>No items yet</p>
    <Button onClick={addItem}>Add First Item</Button>
  </div>
) : (
  <ItemList items={items} />
)}

Accessibility

All components are built on Radix UI primitives, which are accessible by default with keyboard navigation, screen reader support, and ARIA attributes.

✅ Good - preserves accessibility

<Button aria-label="Close dialog" onClick={handleClose}>
  <X className="h-4 w-4" />
</Button>

❌ Bad - no accessible label

<button onClick={handleClose}>
  <X className="h-4 w-4" />
</button>