Components

A curated collection of reusable components to accelerate your development process.

Button

A versatile button component with various styles and sizes for different use cases.

Usage

import { Button } from '@our-company/package';

<Button variant="primary" onClick={() => console.log('Clicked!')}>
  Click me
</Button>

Card

A flexible card component for displaying content in a structured and visually appealing manner.

Usage

import { Card, CardHeader, CardContent } from '@our-company/package';

<Card>
  <CardHeader>Card Title</CardHeader>
  <CardContent>
    This is the card content area where you can place any content.
  </CardContent>
</Card>

Input

A styled input component for collecting user input with built-in validation support.

Usage

import { Input } from '@our-company/package';

<Input 
  placeholder="Enter your name" 
  onChange={(e) => console.log(e.target.value)} 
/>

Form

A comprehensive form component with validation, error handling, and accessibility features.

Usage

import { Form, FormField, FormLabel, FormMessage } from '@our-company/package';

<Form onSubmit={handleSubmit}>
  <FormField>
    <FormLabel>Email</FormLabel>
    <Input type="email" name="email" required />
    <FormMessage />
  </FormField>
  <Button type="submit">Submit</Button>
</Form>

Need More Components?

Check out our comprehensive API Reference for a complete list of all available components and their properties.