Component Props

TypeScript UI provides full TypeScript support with comprehensive type definitions. This guide covers the prop patterns and interfaces used across components.

Common Patterns

ClassName Prop

All components accept an optional className prop for custom styling:

interface BaseProps {
  className?: string;
}

<FeatureCard className="custom-styles" />

Children vs Content Props

Some components use children, others use explicit content props:

// Explicit props (most TypeScript UI components)
<FeatureCard
  title="Feature Title"
  description="Feature description text."
/>

// Children pattern (when wrapping is needed)
<Callout title="Note">
  This is the callout content.
</Callout>

Feature Section Props

FeatureCardProps

interface FeatureCardProps {
  icon?: React.ReactNode;     // Optional icon element
  title: string;              // Required title text
  description: string;        // Required description
  className?: string;         // Optional custom classes
}

FeatureGridProps

interface FeatureGridProps {
  features: Omit<FeatureCardProps, 'className'>[];
  columns?: 2 | 3 | 4;           // Grid columns (default: 3)
  alignment?: 'left' | 'center'; // Text alignment (default: 'left')
  className?: string;
}

FeatureItem (for FeatureWithImage)

interface FeatureItem {
  icon?: React.ReactNode;
  title: string;
  description: string;
}

interface FeatureWithImageProps {
  title: string;
  description: string;
  features: FeatureItem[];
  imageSrc: string;
  imageAlt: string;
  imagePosition?: 'left' | 'right';
  className?: string;
}

CTA Section Props

Button Configuration

Many CTA components use a consistent button pattern:

interface ButtonConfig {
  text: string;    // Button label
  href: string;    // Link destination
}

interface CTASimpleProps {
  title: string;
  description: string;
  primaryButton: ButtonConfig;
  secondaryButton?: ButtonConfig;  // Optional
  className?: string;
}

Event Handlers

Interactive components support callbacks:

interface CTANewsletterProps {
  // ... other props
  onSubmit?: (email: string) => void;
}

interface CTABannerProps {
  // ... other props
  onDismiss?: () => void;
}

Pricing Section Props

PricingFeature

Used in pricing cards to show included/excluded features:

interface PricingFeature {
  text: string;
  included: boolean;
}

PricingCardProps

interface PricingCardProps {
  name: string;               // Plan name
  description: string;        // Plan description
  price: string;              // Price display (e.g., "$29")
  period?: string;            // Billing period (default: "/month")
  features: PricingFeature[]; // Feature list
  buttonText: string;         // CTA button text
  buttonHref: string;         // CTA button link
  highlighted?: boolean;      // Apply highlight styling
  badge?: string;             // Optional badge (e.g., "Popular")
  className?: string;
}

Tiered Pricing

For monthly/yearly toggle:

interface PricingTier extends Omit<PricingCardProps, 'price' | 'period' | 'className'> {
  monthlyPrice: string;
  yearlyPrice: string;
}

Comparison Tables

interface ComparisonTier {
  name: string;
  price: string;
  period?: string;
  buttonText: string;
  buttonHref: string;
  highlighted?: boolean;
}

interface ComparisonFeature {
  name: string;
  tiers: Record<string, boolean | string>;
  // e.g., { Free: true, Pro: true, Enterprise: '24/7' }
}

interface ComparisonCategory {
  name: string;
  features: ComparisonFeature[];
}

Type Utilities

Omit Pattern

Many props interfaces use Omit to exclude certain props when composing:

// PricingSimple doesn't need className per tier
interface PricingSimpleProps {
  tiers: Omit<PricingCardProps, 'className'>[];
}

Union Types

Variants use literal union types:

interface CTAWithBackgroundProps {
  variant?: 'solid' | 'gradient' | 'image';
}

interface FeatureGridProps {
  columns?: 2 | 3 | 4;
  alignment?: 'left' | 'center';
}

Best Practices

import type { FeatureCardProps } from '@/components/ui/features';

interface CustomFeatureCardProps extends FeatureCardProps {
  badge?: string;
  onClick?: () => void;
}