Getting started

Build beautiful, accessible component libraries in TypeScript with TypeScript UI. A comprehensive collection of accessible, production-ready primitives and pre-styled marketing components for React 18+.

TypeScript UI is built for developers who care about type safety, accessibility, and developer experience. Whether you're building a design system, shipping a SaaS product, or creating a marketing site, TypeScript UI provides the foundation.

Quick start

Get up and running in three steps.

1. Install the package

pnpm add typescript-ui

Or with npm:

npm install typescript-ui

Or yarn:

yarn add typescript-ui

2. Configure Tailwind CSS

TypeScript UI components ship with Tailwind CSS classes. Add the package to your Tailwind content configuration:

// 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;

This ensures Tailwind generates the correct styles for all component classes.

3. Import and use a component

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

export function HomePage() {
  const features: FeatureItem[] = [
    {
      title: 'Type Safe',
      description: 'Full TypeScript support with comprehensive type definitions.',
    },
    {
      title: 'Accessible',
      description: 'WCAG 2.1 compliant with built-in ARIA attributes.',
    },
    {
      title: 'Customizable',
      description: 'Style components with Tailwind CSS and CSS variables.',
    },
  ];

  return (
    <FeatureGrid
      features={features}
      columns={3}
      alignment="center"
    />
  );
}

What's included

TypeScript UI provides everything you need to build complete web applications.

Primitives and Components

Over 50 unstyled, accessible components built on Radix UI and shadcn/ui patterns. From buttons and forms to complex components like data tables and carousels. Browse the component catalog to explore them all.

Marketing Sections

Pre-styled, copy-and-paste-ready components for landing pages and marketing sites:

• Feature Sections — Cards, grids, icon lists, and image layouts for showcasing features
• CTA Sections — Simple callouts, full-width backgrounds, split layouts, and newsletter signup forms
• Pricing Sections — Static cards, tiered toggle pricing, and comparison tables
• Testimonials — Grid layouts for customer testimonials and social proof
• FAQ — Accordion-based frequently asked questions sections
• Stats — Number counters and metric displays
• Logo Cloud — Logo grids and marquees for partner/client logos
• Team — Team member cards and bios
• Headers — Navigation bars and header layouts
• Footers — Multi-column, simple, and minimal footer variants
• Auth — Login and signup forms
• Contact — Contact forms and inquiry components

Basic usage

Here's a complete page built with TypeScript UI components:

'use client';

import { useState } from 'react';
import {
  HeaderSimple,
  HeroSection,
  FeatureGrid,
  PricingTiered,
  FAQAccordion,
  TestimonialGrid,
  CTAWithBackground,
  FooterMultiColumn,
} from 'typescript-ui';

export function LandingPage() {
  const [isYearly, setIsYearly] = useState(false);

  return (
    <>
      <HeaderSimple />

      <HeroSection
        title="Build faster with TypeScript UI"
        description="A complete component library for React with type safety and accessibility built in."
      />

      <FeatureGrid
        features={[
          {
            title: 'Type Safe',
            description: 'Full TypeScript support with comprehensive type definitions.',
            icon: '✓',
          },
          {
            title: 'Accessible',
            description: 'WCAG 2.1 compliant with built-in ARIA attributes.',
            icon: '✓',
          },
          {
            title: 'Customizable',
            description: 'Style components with Tailwind CSS and CSS variables.',
            icon: '✓',
          },
        ]}
        columns={3}
      />

      <PricingTiered
        isYearly={isYearly}
        onToggle={() => setIsYearly(!isYearly)}
        tiers={[
          {
            name: 'Starter',
            description: 'Perfect for projects just getting started',
            monthlyPrice: '$29',
            yearlyPrice: '$290',
            features: [
              { text: 'All components', included: true },
              { text: 'Dark mode', included: true },
              { text: 'Priority support', included: false },
            ],
            buttonText: 'Get started',
            buttonHref: '#',
          },
        ]}
      />

      <FAQAccordion
        items={[
          {
            title: 'Can I use this in production?',
            content: 'Yes. TypeScript UI is production-ready and powers many live projects.',
          },
          {
            title: 'How do I customize components?',
            content: 'Components ship with className props for Tailwind CSS customization and CSS variables for theming.',
          },
        ]}
      />

      <TestimonialGrid
        testimonials={[
          {
            quote: 'TypeScript UI saved us months of development time.',
            author: 'Jane Developer',
            company: 'Acme Inc',
          },
        ]}
      />

      <CTAWithBackground
        title="Ready to build?"
        description="Start using TypeScript UI in your next project."
        buttonText="Get started"
        buttonHref="/docs/installation"
      />

      <FooterMultiColumn />
    </>
  );
}

Getting help

Questions and issues

Have a bug to report? Want to request a feature? Open an issue on GitHub.

Contributing

Contributions are welcome! Whether you're fixing bugs, adding components, or improving documentation, see our contributing guide.

Browse the full library

Explore all components in the component catalog. Each component page includes live examples, props documentation, and copy-ready code snippets.

Why TypeScript UI?

• Type safe by default — Full TypeScript support with inference and type checking
• Accessible — WCAG 2.1 compliant with proper ARIA attributes and keyboard navigation
• Fully customizable — Tailwind CSS, CSS variables, and className props for complete control
• Production ready — Tested, performant, and used in real applications
• No lock-in — Components are just React components; use what you need, nothing more
• Comprehensive — From simple primitives to complete page sections