Skip to main content

​
Introduction

The T1 Component Library provides a collection of production-ready React components designed with accessibility, flexibility, and developer experience in mind. All components are built with TypeScript for type safety and use Tailwind CSS for styling with CSS custom properties for theming.

​
Design Philosophy

Type-Safe

All components are built with TypeScript, providing full IntelliSense support and compile-time type checking.

Accessible

Components follow WAI-ARIA guidelines with proper semantic HTML, keyboard navigation, and screen reader support.

Customizable

Extensive prop APIs and className support allow you to customize components to match your design system.

Responsive

All components are mobile-first and adapt seamlessly across different screen sizes.

​
Available Components

Button

Interactive button component with multiple variants (primary, secondary, accent, destructive, ghost, outline), sizes, loading states, and icon support.

Input

Flexible input field with label, error states, helper text, icons, and multiple size options for forms and data entry.

Card

Versatile container component with header, body, footer, and image sections. Supports multiple variants and hover effects.

Modal

Dialog component for overlaying content with header, body, and footer sections. Includes keyboard navigation and overlay click handling.

Navbar

Navigation bar with theme toggle, authentication, and responsive mobile menu. Displays interaction tracking and active route highlighting.

​
Naming Conventions

All components follow consistent naming patterns:
  • Component Files: PascalCase (e.g., Button.tsx, Modal.tsx)
  • Component Exports: Named exports using PascalCase (e.g., export const Button)
  • Props Interfaces: Component name + “Props” (e.g., ButtonProps, ModalProps)
  • Type Exports: Descriptive names (e.g., ButtonVariant, InputSize)
  • Sub-components: Parent name prefix (e.g., CardHeader, ModalBody)

​
Common Patterns

​
Variants

Many components support visual variants through the variant prop: 
<Button variant="primary">Primary Action</Button>
<Button variant="destructive">Delete</Button>
<Card variant="elevated">Featured Content</Card>

​
Sizes

Components offer multiple size options via the size prop: 
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

​
Icons

Many components support icons for enhanced visual communication: 
<Button leftIcon={<ArrowLeft />}>Back</Button>
<Input leftIcon={<Search />} placeholder="Search..." />

​
Getting Started

Explore individual component pages to learn about:
  • Complete TypeScript type definitions
  • All available props and their types
  • Real-world usage examples
  • Best practices and accessibility considerations
  • Visual examples of all variants and states

Button Component

Learn about button variants, sizes, loading states, and icon usage

Input Component

Explore input fields, validation, icons, and form integration

Build docs developers (and LLMs) love

Get started for freeTalk to us