Installation

TypeScript UI is available as an npm package. Install it with your favorite package manager and configure Tailwind CSS to use the component styles.

Prerequisites

Node.js 18+ — Required for building and running applications
React 18+ — TypeScript UI is built for React 18 and higher
React DOM 18+ — For rendering React components to the DOM
Tailwind CSS 3+ — Components are styled with Tailwind CSS

1. Install from npm

Using pnpm (recommended):

pnpm add typescript-ui

Or with npm:

npm install typescript-ui

Or with yarn:

yarn add typescript-ui

Or with Bun:

bun add typescript-ui

2. Add to Tailwind content configuration

TypeScript UI components use Tailwind CSS classes. Update your tailwind.config.ts to include the package in your content paths:

// tailwind.config.ts
import type { Config } from 'tailwindcss';

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/typescript-ui/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Why this matters

Tailwind CSS only generates styles for classes it finds in your content files. Without this configuration, component styles will not be generated, and components will appear unstyled.

3. Import and use a component

Components are organized by category. Import what you need:

// Feature sections
import {
  FeatureCard,
  FeatureGrid,
  FeatureWithImage,
  FeatureIconList,
  FeatureCentered,
} from 'typescript-ui/features';

// CTA sections
import {
  CTASimple,
  CTAWithBackground,
  CTASplit,
  CTANewsletter,
  CTABanner,
} from 'typescript-ui/cta';

// Pricing sections
import {
  PricingCard,
  PricingSimple,
  PricingTiered,
  PricingComparison,
  PricingMinimal,
} from 'typescript-ui/pricing';

Or import from the main entry point for all components:

import { FeatureGrid, PricingCard, CTASimple } from 'typescript-ui';

Setup in different environments

Next.js

TypeScript UI works seamlessly with Next.js 13+ (App Router) and 12 (Pages Router).

For server components, ensure you're using client components when needed:

'use client';

import { CTANewsletter } from 'typescript-ui/cta';

export default function NewsletterSection() {
  return <CTANewsletter />;
}

Note

Interactive components like PricingTiered and CTANewsletter require the 'use client' directive because they use React hooks.

Create React App

TypeScript UI works with Create React App. Ensure Tailwind CSS is configured:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then add the content path as described above in your tailwind.config.ts.

Vite

For Vite projects, install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Import Tailwind in your main CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

TypeScript setup

TypeScript UI exports full type definitions. All components include TypeScript interfaces for their props.

Import types separately to keep bundle size minimal:

import type { FeatureGridProps, FeatureItem } from 'typescript-ui/features';
import { FeatureGrid } from 'typescript-ui/features';

interface PageProps extends FeatureGridProps {
  // Your custom props
}

Peer dependencies

TypeScript UI has these peer dependencies, which you need to install:

{
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-dom": ">=18.0.0"
  }
}

These are typically already in your project if you're using React.

Troubleshooting

Components are unstyled

If components appear without styles, the most common cause is that Tailwind CSS content paths are not configured correctly.

Check that tailwind.config.ts includes ./node_modules/typescript-ui/**/*.{js,ts,jsx,tsx}
Rebuild your project
Clear any build caches (.next, dist, etc.)

Module not found errors

Ensure you're importing from the correct entry points:

// ✓ Correct
import { FeatureGrid } from 'typescript-ui/features';

// ✗ Incorrect
import { FeatureGrid } from 'typescript-ui/src/components/features';

TypeScript errors

If you see TypeScript errors, ensure you're using TypeScript 5.0 or higher. Check your tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "moduleResolution": "bundler"
  }
}