Developed By-: Siddharth Sekhar Singh StoryBook URL for this component library-: My PortFolio URL-: LinkedIn URL:https://www.linkedin.com/in/siddharth-sekhar-singh-7626041a7/

PredatorUI

Overview

PredatorUI is a premium React component library designed for modern web applications. Built with TypeScript, Tailwind CSS, and React, it provides a comprehensive set of beautiful, accessible, and customizable UI components.

Features

• ⚡ Lightning Fast - Optimized for performance with tree-shakable exports
• 🎨 Beautiful Design - Premium components with electric blue accents and smooth animations
• 📦 Easy Integration - Simple npm install and import
• 🔧 TypeScript First - Full type safety with comprehensive TypeScript definitions
• 🎯 Customizable - Built with Tailwind CSS and customizable design tokens
• ♿ Accessible - WCAG compliant components with proper ARIA attributes
• 📱 Responsive - Mobile-first design with responsive breakpoints

Installation

Install PredatorUI using your preferred package manager:

# npm
npm install predatorui-react

# yarn
yarn add predatorui-react

# pnpm
pnpm add predatorui-react

Quick Start

1. Import the styles in your main application file:

import 'predatorui-react/styles.css';

2. Start using components:

import { Button, Card, CardHeader, CardTitle, CardContent } from 'predatorui-react';

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to PredatorUI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="primary">Get Started</Button>
      </CardContent>
    </Card>
  );
}

Available Components

Core Components

• Button - Multiple variants (primary, secondary, outline, ghost) and sizes
• Card - Flexible card components with variants (default, interactive, elevated)
• Input - Text inputs with focus states and validation
• Textarea - Multi-line text input component

Feedback Components

• Alert - Contextual feedback messages with variants (success, warning, error, info)
• Badge - Small status indicators and labels
• Progress - Visual progress indicators with color variants
• Toast - Non-blocking notifications (via sonner)

Data Display

• Avatar - User profile images with fallback support
• Divider - Horizontal and vertical separators
• Typography - Heading, Paragraph, Text, and Code components

Layout

• Container - Responsive containers with different max widths
• Grid - Flexible grid system for layouts

Customization

PredatorUI uses CSS custom properties for theming. Override these variables to customize the appearance:

:root {
  --primary: 217 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 190 100% 50%;
  --secondary-foreground: 0 0% 100%;
  /* Add more custom values */
}

TypeScript Support

PredatorUI is built with TypeScript and includes full type definitions. No additional @types packages are needed.

import type { ButtonProps, CardProps } from 'predatorui-react';

Browser Support

PredatorUI supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Documentation

Visit our documentation website for:

• Interactive component playground
• Detailed API documentation
• Usage examples and best practices
• Accessibility guidelines

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT © PredatorUI Team

Peer Dependencies

• React >= 16.8.0
• React DOM >= 16.8.0

Credits

Built with:

• React
• TypeScript
• Tailwind CSS
• Radix UI
• Lucide Icons

Made with ⚡ by the PredatorUI Team