React Inswitch Components

A modern React 19+ component library built with Vite and TypeScript, leveraging the latest React features.

🚀 Features

• React 19+ Only: Built exclusively for React 19+ with modern features like async components
• Modern Stack: TypeScript, Vite, and cutting-edge React patterns
• Accessible: Components built with Headless UI for maximum accessibility
• Customizable: Styled with class-variance-authority for flexible theming
• Developer Experience: Full TypeScript support with comprehensive type definitions
• Storybook: Interactive component documentation and testing

⚠️ Requirements

• React 19.1.0+ - This library requires React 19.1 or higher
• React DOM 19.1.0+ - Matching React DOM version
• TypeScript 5.0+ - For full type support

📦 Installation

npm install react-inswitch-components

yarn add react-inswitch-components

pnpm add react-inswitch-components

Note: Make sure your project is using React 19+ before installing this library.

🎯 Quick Start

import { Button, Dialog, BottomSheet } from 'react-inswitch-components';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Click me
      </Button>
    </div>
  );
}

📚 Components

Input Components

• Button - Customizable button with variants, sizes, and loading states
• Input - Text input with validation and helper text
• InputBase - Base input component for building custom inputs
• InputLabel - Accessible form labels
• InputTextHelper - Helper text for form inputs

Feedback Components

• Dialog - Modal dialogs with backdrop and transitions
• BottomSheet - Mobile-friendly bottom sheet modals
• Spinner - Loading indicators

Data Display Components

• Typography - Text components with semantic variants

🛠️ Development

Prerequisites

• Node.js 18+
• npm/yarn/pnpm

Setup

# Clone the repository
git clone <repository-url>
cd react-inswitch-components

# Install dependencies
npm install

# Start Storybook for development
npm run storybook

# Build the library
npm run build

# Run tests
npm test

Scripts

• npm run storybook - Start Storybook development server
• npm run build - Build the library for production
• npm run test - Run tests with Vitest
• npm run lint - Lint code with ESLint
• npm run format - Format code with Prettier

📖 Documentation

Visit our Storybook documentation to explore all components with interactive examples.

🎨 Theming

Components support custom theming through CSS variables. See the theming guide for more details.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🏢 About

Created by Inswitch - Channels team.

Built with ❤️ using React 19 and TypeScript.