discrd-components

Discrd Components

A modern React component library inspired by Aceternity and shadcn/ui, built with TypeScript and designed for beautiful, accessible user interfaces.

Features

• 🎨 Multiple Variants: Default, destructive, outline, secondary, ghost, link, gradient, and glass
• 📏 Flexible Sizing: Small, default, large, and icon sizes
• ♿ Accessible: Built with accessibility in mind
• 🎯 TypeScript: Full TypeScript support with proper type definitions
• 🎪 Customizable: Easy to customize with CSS classes
• ⚡ Lightweight: Minimal dependencies, maximum performance

Installation

npm install discrd-components

Quick Start

import { Button } from "discrd-components";

function App() {
  return (
    <div>
      <Button variant="default">Click me</Button>
      <Button variant="gradient" size="lg">
        Get Started
      </Button>
      <Button variant="outline" size="sm">
        Learn More
      </Button>
    </div>
  );
}

Button Component

The Button component is highly customizable with multiple variants and sizes.

Variants

• default - Primary button with solid background
• destructive - Red button for destructive actions
• outline - Button with border and transparent background
• secondary - Secondary button with muted background
• ghost - Transparent button that shows background on hover
• link - Button that looks like a link
• gradient - Button with gradient background (inspired by Aceternity)
• glass - Glassmorphism effect button

Sizes

• sm - Small button
• default - Default size
• lg - Large button
• icon - Square button for icons

Props

interface ButtonProps {
  variant?:
    | "default"
    | "destructive"
    | "outline"
    | "secondary"
    | "ghost"
    | "link"
    | "gradient"
    | "glass";
  size?: "sm" | "default" | "lg" | "icon";
  asChild?: boolean;
  className?: string;
  // ... all standard button HTML attributes
}

Examples

// Basic usage
<Button>Click me</Button>

// With variants
<Button variant="gradient">Gradient Button</Button>
<Button variant="glass">Glass Button</Button>
<Button variant="destructive">Delete</Button>

// With sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">🚀</Button>

// Combined
<Button variant="gradient" size="lg">
  Get Started
</Button>

// Disabled state
<Button disabled>Disabled</Button>

// With custom className
<Button className="my-custom-class">
  Custom Styled
</Button>

Styling

The components use Tailwind CSS classes. Make sure you have Tailwind CSS configured in your project for the best experience.

CSS Variables

The components rely on CSS custom properties for theming. You can customize these in your CSS:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
}

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch for changes
npm run dev

Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.