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.

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:

# 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:

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:

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

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:

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:

: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:

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 for complete details.

Support & Resources

• 📖 Complete Documentation
• 🐛 Issue Tracking
• 💬 Community Discussions

Engineered with precision by the Datasurfr Team