@saeedkolivand/react-ui-toolkit NPM

Features

Modern Design - Clean and professional component designs
TypeScript Support - Full type definitions for all components
Accessibility - WCAG 2.1 compliant components
Customizable - Easily customize using Tailwind CSS
Dark Mode - Built-in dark mode support
Responsive - Mobile-first design approach

Installation

npm install @saeedkolivand/react-ui-toolkit
# or
yarn add @saeedkolivand/react-ui-toolkit

Quick Start

import React from "react";
import { Button, StylesProvider } from "@saeedkolivand/react-ui-toolkit";
import "@saeedkolivand/react-ui-toolkit/dist/styles.css";

function App() {
  return (
    <StylesProvider>
      <div className="p-4">
        <h1 className="text-2xl font-bold mb-4">Hello React UI Toolkit</h1>
        <Button variant="primary">Click Me</Button>
      </div>
    </StylesProvider>
  );
}

export default App;

Documentation

For detailed documentation, see the following resources:

Available Components

Base Components

Button
Input
Textarea
Select
Checkbox
Radio
Switch
Tooltip
Tag
Icon
Divider

Layout Components

Container
Row
Col

Feedback Components

Card
Alert
Badge
Avatar
Spinner
Progress
Notification

Navigation Components

Tabs
Modal
Drawer
Dropdown
Accordion

Theme Components

ThemeToggle

Development

# Clone the repository
git clone https://github.com/saeedkolivand/react-ui-toolkit.git
cd react-ui-toolkit

# Install dependencies
npm install

# Start Storybook for development
npm run storybook

# Run tests
npm test

# Build the library
npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Usage

Importing Styles

You have three options for importing styles:

Option 1: Direct CSS Import

import "@saeedkolivand/react-ui-toolkit/dist/styles.css";

Option 2: StylesProvider (Recommended)

import { StylesProvider } from "@saeedkolivand/react-ui-toolkit";

function App() {
  return (
    <StylesProvider>
      <YourApplication />
    </StylesProvider>
  );
}

Option 3: SSR-Compatible Provider (Next.js)

import { StylesProviderSSR } from "@saeedkolivand/react-ui-toolkit";

function App() {
  return (
    <StylesProviderSSR>
      <YourApplication />
    </StylesProviderSSR>
  );
}

Option 4: Higher-Order Component

import { withStylesProvider } from "@saeedkolivand/react-ui-toolkit";

function YourApp() {
  return <div>Your application content</div>;
}

export default withStylesProvider(YourApp);

Using Components

import { Button, Input } from "@saeedkolivand/react-ui-toolkit";

function App() {
  return (
    <div>
      <Input placeholder="Enter your name" />
      <Button>Click me</Button>
    </div>
  );
}