Importing Components

TypeScript UI provides a modular component library that allows you to import only what you need. This keeps your bundle size small while giving you access to a comprehensive set of UI components.

Basic Imports

Import components directly from their respective module paths:

// Feature Sections
import {
  FeatureCard,
  FeatureGrid,
  FeatureWithImage,
  FeatureIconList,
  FeatureCentered,
} from '@/components/ui/features';

// CTA Sections
import {
  CTASimple,
  CTAWithBackground,
  CTASplit,
  CTANewsletter,
  CTABanner,
} from '@/components/ui/cta';

// Pricing Sections
import {
  PricingCard,
  PricingSimple,
  PricingTiered,
  PricingComparison,
  PricingMinimal,
} from '@/components/ui/pricing';

Individual Component Imports

For smaller bundle sizes, import components individually:

// Import only what you need
import { FeatureCard } from '@/components/ui/features/FeatureCard';
import { CTASimple } from '@/components/ui/cta/CTASimple';
import { PricingCard } from '@/components/ui/pricing/PricingCard';

Type Imports

All components come with TypeScript interfaces. Import types separately to keep runtime code minimal:

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

import type {
  CTASimpleProps,
  CTAWithBackgroundProps,
} from '@/components/ui/cta';

import type {
  PricingCardProps,
  PricingFeature,
  ComparisonTier,
} from '@/components/ui/pricing';

Path Aliases

TypeScript UI uses the @/ path alias which maps to src/. Ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Server vs Client Components

Some components use React hooks and must be rendered on the client. These include:

• PricingTiered (uses useState for billing toggle)
• CTANewsletter (uses useState for form state)
• CTABanner (uses useState for dismissible state)

These components include the 'use client' directive at the top of their files.

For Server Components, you can safely use:

• FeatureCard
• CTASimple
• PricingCard
• And other static display components

Best Practices