Skip to content

QUICK_START_GUIDE.md

Latest commit

 

History

History
222 lines (177 loc) · 5.07 KB

QUICK_START_GUIDE.md

File metadata and controls

222 lines (177 loc) · 5.07 KB

Component Library Quick Start Guide

New Components

Section Component

import { Section } from '@/components/ui/section'

// Basic usage
<Section padding="md" background="default">
  <h1>Content</h1>
</Section>

// With gradient background
<Section padding="lg" background="gradient" container={false}>
  <CustomContainer>Content</CustomContainer>
</Section>

Heading Component

import { Heading } from '@/components/ui/heading'

// Semantic levels (auto-sized)
<Heading level={1}>Main Title</Heading>
<Heading level={2}>Subtitle</Heading>

// With gradient
<Heading level={1} gradient>Gradient Title</Heading>

// Custom size override
<Heading level={3} size="2xl">Large H3</Heading>

Updated Components

Button Variants

import { Button } from '@/components/ui/button'

// New gradient variants
<Button variant="gradient">Primary Gradient</Button>
<Button variant="gradient-blue">Blue Gradient</Button>
<Button variant="gradient-accent">Accent Gradient</Button>

// Enterprise variant
<Button variant="enterprise">Enterprise CTA</Button>

Card Surfaces

import { Card } from '@/components/ui/card'

// Clean surface variants
<Card surface="default">Standard card</Card>
<Card surface="muted">Muted background</Card>
<Card surface="elevated">High elevation</Card>
<Card surface="glass">Glass effect</Card>

// With padding control
<Card surface="elevated" padding="lg">
  Large padding content
</Card>

Dashboard Patterns

Metric Display

import { MetricCard } from '@/components/dashboard/metric-card'

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
  <MetricCard
    title="Total Users"
    value={1234}
    icon={<Users className="h-4 w-4" />}
    description="Registered users"
    variant="primary"
  />
</div>

Action Cards

import { ActionCard } from '@/components/dashboard/action-card'
import { Card } from '@/components/ui/card'

// Elevated card with hover states
<Link href="/path">
  <Card surface="elevated" className="group cursor-pointer">
    <CardContent className="flex items-center p-6">
      <div className="rounded-xl bg-primary/15 p-3 mr-4 group-hover:bg-primary/25 transition-colors">
        <Icon className="h-6 w-6 text-primary" />
      </div>
      <div className="flex-1">
        <h3 className="font-semibold text-base mb-0.5">Title</h3>
        <p className="text-sm text-muted-foreground">Description</p>
      </div>
    </CardContent>
  </Card>
</Link>

Design Tokens

Spacing

  • gap-4 = 1rem (16px)
  • gap-6 = 1.5rem (24px)
  • gap-8 = 2rem (32px)

Shadows

  • shadow-sm = Subtle shadow
  • shadow-md = Medium shadow
  • shadow-lg = Large shadow
  • shadow-xl = Extra large shadow

Border Radius

  • rounded-xl = 0.75rem (12px) - Cards, icons
  • rounded-lg = 0.5rem (8px) - Buttons
  • rounded-md = 0.375rem (6px) - Inputs

Transitions

  • Duration: 300ms
  • Timing: cubic-bezier(0.16,1,0.3,1)

Color Semantics

// Icon backgrounds (15% opacity)
<div className="bg-primary/15"> // Blue
<div className="bg-success/15"> // Green
<div className="bg-accent/15">  // Teal
<div className="bg-warning/15"> // Amber
<div className="bg-info/15">    // Blue
<div className="bg-destructive/15"> // Red

// Hover states (25% opacity)
className="group-hover:bg-primary/25"

Migration Commands

# Apply RLS policies
npx supabase db push

# Type check
npm run type-check

# Run dev server
npm run dev

# Build for production
npm run build

Common Patterns

Dashboard Layout

<DashboardShell title="Dashboard" subtitle="Description">
  {/* Metrics */}
  <div className="grid gap-4 md:grid-cols-3">
    <MetricCard ... />
  </div>

  {/* Actions */}
  <DashboardSection title="Quick Actions">
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <Card surface="elevated">...</Card>
    </div>
  </DashboardSection>
</DashboardShell>

Landing Page Section

<Section padding="lg" background="gradient">
  <div className="text-center max-w-4xl mx-auto">
    <Heading level={1} gradient>
      Transform Clinical Education
    </Heading>
    <p className="mt-4 text-lg text-muted-foreground">
      Description text
    </p>
    <div className="mt-8 flex gap-4 justify-center">
      <Button variant="gradient-blue" size="lg">
        Get Started
      </Button>
      <Button variant="outline" size="lg">
        Learn More
      </Button>
    </div>
  </div>
</Section>

Responsive Grid Patterns

// 1 col mobile, 2 col tablet, 3 col desktop
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">

// 1 col mobile, 2 col tablet, 4 col desktop
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">

// Equal columns with auto-fit
<div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,1fr))]">

Accessibility Checklist

  • ✅ Use semantic HTML (Heading component)
  • ✅ Provide ARIA labels for icons
  • ✅ Ensure keyboard navigation works
  • ✅ Test with screen readers
  • ✅ Check color contrast ratios
  • ✅ Respect reduced motion preferences

Reference: See /COMPONENT_LIBRARY_POLISH.md for full documentation