@abhishekbarve/react-components

A modern React component library with TypeScript support, built with best practices and accessibility in mind.

Installation

npm install @abhishekbarve/react-components
# or
yarn add @abhishekbarve/react-components
# or
pnpm add @abhishekbarve/react-components

Usage

import { Button, Container, Header } from "@abhishekbarve/react-components";
import "@abhishekbarve/react-components/styles.css";

function App() {
  return (
    <Container>
      <Header>My App</Header>
      <Button variant="primary">Click me</Button>
    </Container>
  );
}

Components

Button

A flexible button component with various styles and states.

<Button variant="primary" size="medium" disabled={false}>
  Click me
</Button>

Container

A responsive container component for layout management.

<Container maxWidth="lg" padding="medium">
  {/* Your content */}
</Container>

Header

A customizable header component.

<Header>
  <Nav>
    <NavItem href="/home">Home</NavItem>
    <NavItem href="/about">About</NavItem>
  </Nav>
</Header>

Form Components

Various form components including Input, Checkbox, Radio, and Select.

<Form onSubmit={handleSubmit}>
  <Input label="Username" name="username" />
  <Checkbox label="Remember me" name="remember" />
</Form>

Grid

A flexible grid system for layout management.

<Grid>
  <Row>
    <Column span={6}>Left content</Column>
    <Column span={6}>Right content</Column>
  </Row>
</Grid>

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Build the library
pnpm build

# Run Storybook
pnpm storybook

Features

• 🎨 Modern design system
• 📦 Tree-shakeable
• 🔍 TypeScript support
• ♿️ Accessible components
• 📱 Responsive design
• 🎭 Comprehensive test coverage
• 📚 Storybook documentation

Contributing

We welcome contributions! Please see our contributing guide for details.

License

MIT © Abhishek Barve