tailwind-button-pro

v0.1.6

Published

10 months ago

A highly configurable React component library built with Tailwind CSS, focusing on performance and accessibility.

0High
0Medium
0Low

tkajmal

Tailwind Button Pro

A highly configurable React component library built with Tailwind CSS, focusing on performance and accessibility.

Components

Atomic Design Structure

This library follows atomic design principles:

Atoms: Basic building blocks (Button, Input, FormLabel, Checkbox, etc.)
Molecules: Combinations of atoms (Card, FormGroup, Breadcrumbs, Dropdown, etc.)
Organisms: Complex UI components (Form, etc.)
Templates: Page layouts and patterns (AuthForm, etc.)

Features

Button Component

🎨 Multiple variants (default, destructive, outline, secondary, ghost, link, success, warning, info, primary, subtle, glass)
📏 Various sizes (sm, default, lg, xl, 2xl, icon, icon-sm, icon-lg)
🔄 Loading states with customizable indicators
🔘 Configurable border radius (none, sm, default, lg, xl, 2xl, full)
🎭 Icon support (start and end positions) with adjustable spacing
📱 Full width option
🏗️ Elevation/shadow options (sm, md, lg, xl, inner)
✨ Animation options (pulse, bounce, spin, ping)
🔤 Typography controls (font weight, text transform, letter spacing)
🖌️ Border styles (none, default, thick)
💫 Interactive effects (ripple, hover scale, pressed scale)
🎯 Tooltip support with positioning
🌈 Gradient backgrounds
♿ Fully accessible

Card Component

🎨 Multiple variants (default, destructive, success, warning, info, primary, subtle, glass, outline, ghost)
📏 Various sizes (sm, default, lg, xl)
🔘 Configurable border radius (none, sm, md, lg, xl, 2xl, full)
🏗️ Elevation/shadow options (none, sm, md, lg, xl, 2xl, inner)
🖌️ Border styles (none, default, thick)
📱 Full width option
💫 Hover effects (subtle, lift, grow, glow)
🔤 Header and footer alignment options
🎯 Separator options for headers and footers
♿ Fully accessible

Input Component

🎨 Multiple variants (default, destructive, success, warning, info, primary, subtle, ghost, glass)
📏 Various sizes (sm, default, lg, xl, 2xl)
🔘 Configurable border radius (none, sm, default, lg, xl, 2xl, full)
🎭 Icon support (start and end positions)
📱 Full width option
🏗️ Elevation/shadow options (none, sm, md, lg, xl, inner)
✨ Animation options (none, pulse, bounce)
🔤 Typography controls (font weight, letter spacing)
🖌️ Border styles (none, default, thick)
💫 Interactive effects (hover effects, tooltips)
🎯 Tooltip support with positioning
📝 Label and helper text support
⚠️ Error state and validation
🏷️ Floating label option
♿ Fully accessible

Breadcrumbs Component

🧭 Navigation hierarchy visualization
🎨 Multiple variants (default, muted, primary)
📏 Various sizes (sm, default, lg)
🔀 Separator options (chevron, slash, dot, custom)
🏠 Home icon option
🎭 Icon support for each breadcrumb item
📱 Collapsible for long paths
🔍 Current page highlighting
♿ Fully accessible with proper ARIA attributes

Dropdown Component

🔽 Customizable dropdown menus
🎨 Multiple trigger variants (default, outline, ghost, primary, destructive, subtle)
📏 Various sizes (sm, default, lg, icon)
🎭 Support for icons in trigger and items
📐 Flexible positioning (start, center, end alignment)
📏 Configurable width (auto, trigger, sm, md, lg)
🏗️ Elevation options (sm, md, lg, xl)
🔄 Interactive states (active, disabled)
🔍 Support for nested dropdowns
🔢 Grouping with labels and separators
♿ Fully accessible with keyboard navigation

Checkbox Component

🎨 Multiple variants (default, primary, success, warning, danger, info)
📏 Various sizes (sm, default, lg, xl)
🔘 Configurable shapes (rounded, square, circle)
✨ Animation effects (bounce, pulse, scale, wiggle)
💫 Interactive effects (ripple, glow, outline)
🔄 Support for indeterminate state
🎭 Custom icons for checked and indeterminate states
📝 Label and description support
⚠️ Error state display
🔀 Label position (left/right)
♿ Fully accessible with proper ARIA attributes

Installation

npm install tailwind-button-pro

Usage

Basic Usage (No Tailwind Required)

The library comes with pre-bundled styles, so you don't need to have Tailwind CSS in your project:

import { Button, Card, CardHeader, CardTitle, CardContent, CardFooter, Input } from 'tailwind-button-pro';
import { Mail, Search } from 'lucide-react';

function App() {
  return (
    <div>
      {/* Button examples */}
      <Button variant="primary" size="lg" rounded="full" startIcon={<Mail />}>
        Send Email
      </Button>
      
      {/* Card examples */}
      <Card variant="default" hover="lift" elevation="md">
        <CardHeader>
          <CardTitle>Card Title</CardTitle>
        </CardHeader>
        <CardContent>
          <p>Card content goes here</p>
        </CardContent>
        <CardFooter>
          <Button>Action</Button>
        </CardFooter>
      </Card>
      
      {/* Input examples */}
      <Input 
        label="Search" 
        placeholder="Search..." 
        startIcon={<Search />}
        variant="primary"
        rounded="full"
      />
    </div>
  );
}

Usage with Tailwind CSS

If you're already using Tailwind CSS in your project, you can extend your Tailwind configuration to use our preset:

// tailwind.config.js
import { tailwindPreset } from 'tailwind-button-pro';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [tailwindPreset],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // Add this line to include the component library's classes
    './node_modules/tailwind-button-pro/dist/**/*.js',
  ],
  theme: {
    extend: {
      // Your custom theme extensions
    },
  },
  plugins: [],
};

Props

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'success' | 'warning' | 'info' | 'primary' | 'subtle' | 'glass' | 'default' | The visual style of the button | | size | 'default' | 'sm' | 'lg' | 'xl' | '2xl' | 'icon' | 'icon-sm' | 'icon-lg' | 'default' | The size of the button | | rounded | 'default' | 'none' | 'sm' | 'lg' | 'xl' | '2xl' | 'full' | 'default' | The border radius of the button | | animation | 'none' | 'pulse' | 'bounce' | 'spin' | 'ping' | 'none' | The animation effect of the button | | elevation | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'inner' | 'none' | The shadow elevation of the button | | fullWidth | boolean | false | Whether the button should take up the full width of its container | | fontWeight | 'normal' | 'medium' | 'semibold' | 'bold' | 'medium' | The font weight of the button text | | textTransform | 'none' | 'uppercase' | 'lowercase' | 'capitalize' | 'none' | The text transformation of the button text | | letterSpacing | 'normal' | 'wide' | 'wider' | 'widest' | 'tight' | 'normal' | The letter spacing of the button text | | border | 'none' | 'default' | 'thick' | 'none' | The border style of the button | | iconSpacing | 'default' | 'tight' | 'wide' | 'default' | The spacing between the icon and text | | isLoading | boolean | false | Whether the button is in a loading state | | loadingText | string | - | Text to display when the button is loading | | startIcon | ReactNode | - | Icon to display at the start of the button | | endIcon | ReactNode | - | Icon to display at the end of the button | | loadingIndicator | ReactNode | - | Custom loading spinner component | | ripple | boolean | false | Whether to show a ripple effect on click | | rippleColor | string | 'rgba(255, 255, 255, 0.7)' | The color of the ripple effect | | hoverScale | boolean | 'sm' | 'md' | 'lg' | false | Whether to scale the button on hover | | pressedScale | boolean | 'sm' | 'md' | 'lg' | false | Whether to scale the button when pressed | | tooltip | string | - | Text to display in a tooltip on hover | | tooltipPosition | 'top' | 'bottom' | 'left' | 'right' | 'top' | The position of the tooltip | | gradient | boolean | 'primary' | 'success' | 'warning' | 'danger' | 'info' | false | Whether to use a gradient background |

Card Props

Input Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' | 'destructive' | 'success' | 'warning' | 'info' | 'primary' | 'subtle' | 'ghost' | 'glass' | 'default' | The visual style of the input | | size | 'default' | 'sm' | 'lg' | 'xl' | '2xl' | 'default' | The size of the input | | rounded | 'default' | 'none' | 'sm' | 'lg' | 'xl' | '2xl' | 'full' | 'default' | The border radius of the input | | elevation | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'inner' | 'none' | The shadow elevation of the input | | fullWidth | boolean | true | Whether the input should take up the full width of its container | | fontWeight | 'normal' | 'medium' | 'semibold' | 'bold' | 'normal' | The font weight of the input text | | letterSpacing | 'normal' | 'wide' | 'wider' | 'widest' | 'tight' | 'normal' | The letter spacing of the input text | | border | 'none' | 'default' | 'thick' | 'default' | The border style of the input | | animation | 'none' | 'pulse' | 'bounce' | 'none' | The animation effect of the input | | iconPosition | 'none' | 'left' | 'right' | 'both' | 'none' | The position of the icons | | startIcon | ReactNode | - | Icon to display at the start of the input | | endIcon | ReactNode | - | Icon to display at the end of the input | | hoverEffect | boolean | 'subtle' | 'glow' | 'scale' | false | The hover effect of the input | | tooltip | string | - | Text to display in a tooltip on hover | | tooltipPosition | 'top' | 'bottom' | 'left' | 'right' | 'top' | The position of the tooltip | | error | string | - | Error message to display | | helperText | string | - | Helper text to display below the input | | label | string | - | Label for the input | | hideLabel | boolean | false | Whether to hide the label visually | | required | boolean | false | Whether the input is required | | containerClassName | string | - | Additional class name for the container | | floating | boolean | false | Whether to use a floating label |

Breadcrumbs Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | Array<{ label: string, href?: string, icon?: ReactNode, current?: boolean }> | [] | The items to display in the breadcrumbs | | variant | 'default' | 'muted' | 'primary' | 'default' | The visual style of the breadcrumbs | | size | 'default' | 'sm' | 'lg' | 'default' | The size of the breadcrumbs | | separator | 'default' | 'slash' | 'arrow' | 'dot' | 'custom' | 'default' | The separator style between breadcrumb items | | showHomeIcon | boolean | false | Whether to show a home icon as the first item | | homeHref | string | '/' | The URL for the home icon | | customSeparator | ReactNode | - | Custom separator element to use between breadcrumb items | | markLastItemAsCurrent | boolean | true | Whether to mark the last item as the current page | | maxItems | number | - | Maximum number of items to display before truncating | | collapsible | boolean | false | Whether to collapse breadcrumbs when there are more items than maxItems |

Dropdown Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | trigger | ReactNode | 'Options' | The trigger element for the dropdown | | defaultOpen | boolean | false | Whether the dropdown is open by default | | open | boolean | - | Controlled open state | | onOpenChange | (open: boolean) => void | - | Callback when open state changes | | triggerVariant | 'default' | 'outline' | 'ghost' | 'primary' | 'destructive' | 'subtle' | 'default' | The variant of the trigger button | | triggerSize | 'default' | 'sm' | 'lg' | 'icon' | 'default' | The size of the trigger button | | triggerFullWidth | boolean | false | Whether the trigger should take full width | | contentVariant | 'default' | 'primary' | 'destructive' | 'default' | The variant of the dropdown content | | align | 'start' | 'center' | 'end' | 'start' | The alignment of the dropdown content | | sideOffset | 'default' | 'tight' | 'none' | 'default' | The offset of the dropdown from the trigger | | width | 'auto' | 'trigger' | 'sm' | 'md' | 'lg' | 'auto' | The width of the dropdown content | | elevation | 'default' | 'sm' | 'lg' | 'xl' | 'default' | The elevation/shadow of the dropdown | | closeOnItemClick | boolean | true | Whether to close the dropdown when an item is clicked | | closeOnOutsideClick | boolean | true | Whether to close the dropdown when clicking outside | | closeOnEscape | boolean | true | Whether to close the dropdown when pressing Escape | | showChevron | boolean | true | Whether to show a chevron icon in the trigger |

Checkbox Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' | The visual style of the checkbox | | size | 'default' | 'sm' | 'lg' | 'xl' | 'default' | The size of the checkbox | | rounded | 'default' | 'none' | 'full' | 'default' | The border radius of the checkbox | | animation | 'none' | 'bounce' | 'pulse' | 'scale' | 'wiggle' | 'none' | The animation effect when checked | | effect | 'none' | 'glow' | 'ripple' | 'outline' | 'fill' | 'none' | The visual effect of the checkbox | | label | string | - | Label text for the checkbox | | description | string | - | Description text to display below the label | | error | string | - | Error message to display | | indeterminate | boolean | false | Whether the checkbox is in an indeterminate state | | checkIcon | ReactNode | - | Custom icon to display when checked | | indeterminateIcon | ReactNode | - | Custom icon to display when indeterminate | | labelLeft | boolean | false | Whether to position the label on the left side | | ripple | boolean | false | Whether to show a ripple effect when clicked | | rippleColor | string | 'rgba(0, 0, 0, 0.1)' | The color of the ripple effect |

Plus all standard HTML attributes for each component type.

Theming

The library supports theming through CSS variables. You can customize the primary color and other aspects:

:root {
  /* Primary color */
  --color-primary-50: 238 242 255;
  --color-primary-100: 224 231 255;
  /* ... other shades */
  --color-primary-900: 49 46 129;
}

/* Dark mode support */
.dark {
  /* Dark mode overrides */
}

You can also use the ThemeProvider component for dynamic theming:

import { ThemeProvider, useTheme, Button } from 'tailwind-button-pro';

function App() {
  return (
    <ThemeProvider>
      <ThemeControls />
      <Button variant="primary">Themed Button</Button>
    </ThemeProvider>
  );
}

function ThemeControls() {
  const { mode, setMode, colors, setColors } = useTheme();
  
  return (
    <div>
      <button onClick={() => setMode('dark')}>Dark Mode</button>
      <button onClick={() => setMode('light')}>Light Mode</button>
      <input 
        type="color" 
        value="#6366f1"
        onChange={(e) => setColors({ primary: e.target.value })} 
      />
    </div>
  );
}

Accessibility

Proper ARIA attributes for interactive states
Focus visible styles for keyboard navigation
Appropriate color contrast ratios
Semantic HTML elements
Tooltips for additional context

Performance

Optimized for minimal re-renders
Efficient class generation with class-variance-authority
Smart class merging with tailwind-merge
Tree-shakable exports
Small bundle size

License

MIT