Component Library Overview
Explore our collection of reusable React components with TypeScript support.
InputField Component
Flexible input component with multiple variants, sizes, and states.
DataTable Component
Feature-rich table component with sorting, selection, and more.
| Name | Role | Status |
|---|---|---|
| John Doe | Admin | Active |
| Jane Smith | User | Active |
InputField Component
A flexible input component with multiple variants, sizes, and states.
Interactive Playground
Helper text goes here
This field is required
Examples
Variants
Sizes
States
This field has an error
DataTable Component
Feature-rich table component with sorting, selection, and loading states.
Users
0 selected
| Name ↕ | Email ↕ | Role ↕ | Status ↕ |
|---|
Products
0 selected
| Name ↕ | Category ↕ | Price ↕ | Stock ↕ |
|---|
Orders
0 selected
| Order ID ↕ | Customer ↕ | Date ↕ | Amount ↕ | Status ↕ |
|---|
Loading State
| Name | Role | Status | |
|---|---|---|---|
Empty State
| Name | Role | Status | |
|---|---|---|---|
|
📋
No data availableThere are no items to display at this time. |
|||
Documentation
Complete guide to using our React component library.
Installation
npm install @your-org/component-library
# or
yarn add @your-org/component-libraryInputField Component
Basic Usage
import { InputField } from '@your-org/component-library';
function MyForm() {
const [value, setValue] = useState('');
return (
<InputField
value={value}
onChange={(e) => setValue(e.target.value)}
label="Email Address"
placeholder="Enter your email"
type="email"
variant="outlined"
size="md"
/>
);
}Props API
| Prop | Type | Default | Description |
|---|---|---|---|
value |
string | - | The input value |
onChange |
function | - | Change event handler |
variant |
'filled' | 'outlined' | 'ghost' | 'outlined' | Visual variant |
size |
'sm' | 'md' | 'lg' | 'md' | Size variant |
disabled |
boolean | false | Disable the input |
invalid |
boolean | false | Show error state |
DataTable Component
Basic Usage
import { DataTable } from '@your-org/component-library';
const columns = [
{ key: 'name', title: 'Name', dataIndex: 'name', sortable: true },
{ key: 'email', title: 'Email', dataIndex: 'email', sortable: true },
{
key: 'status',
title: 'Status',
dataIndex: 'status',
render: (value) => <Badge variant={value === 'Active' ? 'success' : 'warning'}>{value}</Badge>
}
];
function UserTable() {
const [selectedRows, setSelectedRows] = useState([]);
return (
<DataTable
data={users}
columns={columns}
selectable
onRowSelect={setSelectedRows}
/>
);
}Accessibility Features
- Keyboard Navigation: Full keyboard support for all interactive elements
- Screen Reader Support: Proper ARIA labels and descriptions
- Focus Management: Clear focus indicators and logical tab order
- High Contrast: Supports high contrast mode and color themes