@travelopia/react-components

Headless React component library focused on performance (INP) and accessibility. Built with TypeScript, minimal CSS, and designed for modern React applications.

Features

• 🚀 Performance-first: Optimized for Interaction to Next Paint (INP)
• ♿ Accessible: Full ARIA support, keyboard navigation, and focus management
• 🎨 Headless: Minimal styling, easily customizable with Tailwind CSS or your own styles
• 📦 Tree-shakeable: Import only what you need
• 💪 TypeScript: Full type safety with comprehensive type definitions
• ⚡ Modern: Built with React 18+ and Vite

Installation

npm install @travelopia/react-components

yarn add @travelopia/react-components

pnpm add @travelopia/react-components

Components

TpModal

A fully accessible modal dialog component with focus management, body scroll lock, and portal rendering.

import { TpModal, TpModalOverlay, TpModalContent, TpModalTitle } from '@travelopia/react-components'

<TpModal open={isOpen} onOpenChange={setIsOpen}>
  <TpModalOverlay>
    <TpModalContent>
      <TpModalTitle>Modal Title</TpModalTitle>
      <p>Modal content goes here</p>
    </TpModalContent>
  </TpModalOverlay>
</TpModal>

Features:

• ✅ Controlled and uncontrolled modes
• ✅ Focus trap and focus management
• ✅ Body scroll lock
• ✅ Keyboard navigation (Escape to close)
• ✅ Click outside to close
• ✅ Portal rendering

View full TpModal documentation →

TpAccordion

INP-optimized accordion component with CSS Grid animations and SEO-friendly architecture.

import { TpAccordion, TpAccordionItem, TpAccordionTrigger, TpAccordionContent } from '@travelopia/react-components'

<TpAccordion defaultValue={['item-1']}>
  <TpAccordionItem value="item-1">
    <TpAccordionTrigger>Question 1</TpAccordionTrigger>
    <TpAccordionContent>
      <p>Answer 1</p>
    </TpAccordionContent>
  </TpAccordionItem>
</TpAccordion>

Features:

• ✅ INP-optimized with useCallbackWithYield
• ✅ SEO-friendly (content always in DOM)
• ✅ CSS Grid animations (200ms, hardware-accelerated)
• ✅ Multiple items can be open simultaneously
• ✅ Controlled and uncontrolled modes
• ✅ WAI-ARIA compliant

View full TpAccordion documentation →

Hooks

useTpModal

Manage modal state imperatively.

import { useTpModal } from '@travelopia/react-components'

const modal = useTpModal()
// Returns: { isOpen, open, close, toggle }

useTpAccordion

Manage accordion state imperatively.

import { useTpAccordion } from '@travelopia/react-components'

const accordion = useTpAccordion(['item-1'])
// Returns: { value, openItem, closeItem, toggleItem, openAll, closeAll }

Styling

All components are headless with minimal structural CSS. Style them with:

Tailwind CSS

<TpModalContent className="bg-white rounded-lg shadow-xl p-6 max-w-md">
  <TpModalTitle className="text-2xl font-bold mb-4">
    Styled Modal
  </TpModalTitle>
</TpModalContent>

CSS Modules

import styles from './MyModal.module.css'

<TpModalContent className={styles.modal}>
  <TpModalTitle className={styles.title}>
    Styled Modal
  </TpModalTitle>
</TpModalContent>

Plain CSS

<TpModalContent className="my-modal">
  <TpModalTitle className="my-title">
    Styled Modal
  </TpModalTitle>
</TpModalContent>

TypeScript

Full TypeScript support with exported types:

import type {
  TpModalProps,
  TpAccordionProps,
  UseTpModalReturn,
  UseTpAccordionReturn,
} from '@travelopia/react-components'

Browser Support

• React 18+
• Modern browsers (Chrome, Firefox, Safari, Edge)
• CSS Grid support required for TpAccordion animations

Development

# Install dependencies
npm install

# Run tests
npm test

# Run tests in watch mode
npm test -- --watch

# Run tests with coverage
npm run test:coverage

# Build library
npm run build

# Lint
npm run lint

# Format
npm run format

# Type check
npm run typecheck

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

Credits

Built with ❤️ by Travelopia

Inspired by Travelopia Web Components