npm package: @mitkatadvisory/datasurfr-ui-library
Description: A modern React UI component library built with Tailwind CSS and Radix UI
Author: MitKat Developers
Latest version: 1.0.27

# Datasurfr UI Library

A modern React UI component library built with Tailwind CSS and Radix UI primitives. Designed for building beautiful, accessible, and responsive user interfaces.

[![npm version](https://badge.fury.io/js/@mitkatadvisory%2Fdatasurfr-ui-library.svg)](https://badge.fury.io/js/@mitkatadvisory%2Fdatasurfr-ui-library)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Features

- 🎨 **Modern Design**: Clean, professional components with attention to detail
- ♿ **Accessible**: Built with accessibility in mind using Radix UI primitives
- 🎯 **TypeScript**: Full TypeScript support with comprehensive type definitions
- 🌈 **Customizable**: Easy to customize and extend with Tailwind CSS
- 📦 **Tree-shakeable**: Import only what you need
- 🚀 **Production Ready**: Battle-tested components for real-world applications

## Installation

Install the package using your preferred package manager:

```bash
# npm
npm install @mitkatadvisory/datasurfr-ui-library

# yarn
yarn add @mitkatadvisory/datasurfr-ui-library

# pnpm
pnpm add @mitkatadvisory/datasurfr-ui-library
```

## Quick Start

Import and use components directly in your React application:

```tsx
import { Button, Badge } from "@mitkatadvisory/datasurfr-ui-library";

function MyComponent() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Badge variant="success">New</Badge>
    </div>
  );
}
```

## Usage Example

Here's a complete example demonstrating Datasurfr UI components in a production application:

```tsx
import React from "react";
import { Badge, Button } from "@mitkatadvisory/datasurfr-ui-library";

export default function AdminPage() {
  return (
    <div className="p-6 space-y-4">
      <h1 className="text-2xl font-bold">Using Button and Badge Variants</h1>

      <div className="flex gap-4 items-center">
        <Button variant="destructive">Delete Selected</Button>
        <Button variant="outlined"> Save</Button>

        <Badge variant="live">Live Status</Badge>
      </div>
    </div>
  );
}
```

## Documentation

For comprehensive documentation, component API references, and interactive examples, visit our Storybook documentation:

**📚 [View Complete Documentation](https://storybook.datasurfr.ai)**

Our documentation includes:

- Interactive component playground
- Complete API documentation
- Usage examples and best practices
- Design tokens and theming guide
- Accessibility guidelines

## Customization

### Tailwind CSS Integration

Ensure optimal integration by including the library components in your `tailwind.config.js`:

```js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@mitkatadvisory/datasurfr-ui-library/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of your configuration
};
```

### Theme Customization

Customize the design system using CSS custom properties:

```css
:root {
  --primary: your-primary-color;
  --secondary: your-secondary-color;
  /* Additional custom properties */
}
```

## TypeScript Support

Full TypeScript integration with comprehensive type definitions for enhanced developer experience:

```tsx
import type {
  ButtonProps,
  BadgeProps,
} from "@mitkatadvisory/datasurfr-ui-library";

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};
```

## System Requirements

- React 18.0.0 or higher
- Node.js 16.0.0 or higher
- Tailwind CSS (recommended for optimal styling)

## License

This project is licensed under the MIT License. See [LICENSE](https://github.com/mitkatadvisory/datasurfr-ui-library/blob/main/LICENSE) for complete details.

## Support & Resources

- 📖 [Complete Documentation](https://storybook.datasurfr.ai)
- 🐛 [Issue Tracking](https://github.com/mitkatadvisory/datasurfr-ui-library/issues)
- 💬 [Community Discussions](https://github.com/mitkatadvisory/datasurfr-ui-library/discussions)

---

Engineered with precision by the Datasurfr Team