@shared-ui-explore/components

Optimized UI component library with zero-configuration styling using CSS injection.

✅ Key Features

• Zero-Configuration CSS: Styles automatically injected when components are imported
• Bundle Optimized: 24 kB (gzipped: 6.8 kB) for both components
• Tree-Shaking Ready: Import only what you need
• TypeScript Support: Full type definitions included

🚀 Usage

Import Components (Recommended)

// Import only what you need
import { Button } from '@shared-ui-explore/components';
import { Badge } from '@shared-ui-explore/components';

// CSS is automatically injected - no manual imports needed!
export function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Badge variant="success">New</Badge>
    </div>
  );
}

Individual Component Imports

// For more granular control
import { Button } from '@shared-ui-explore/components/button';
import { Badge } from '@shared-ui-explore/components/badge';

// CSS still automatically injected

🎨 CSS Styling

No manual CSS imports required! The components use vite-plugin-css-injected-by-js which automatically:

1. Injects CSS when components are imported
2. Prevents duplication - CSS only injected once
3. Applies styles immediately - no FOUC (Flash of Unstyled Content)
4. Works in all environments - browser, SSR, etc.

📦 Bundle Size

• Components Bundle: 24 kB (gzipped: 6.8 kB)
• CSS Included: Automatically injected with components
• Individual Package: Button (19.1 kB), Badge (13.2 kB) with separate CSS injection

🔧 Available Components

Button

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  className?: string;
  children: React.ReactNode;
}

Badge

interface BadgeProps {
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  appearance?: 'solid' | 'outline' | 'default';
  shape?: 'rounded' | 'pill' | 'square' | 'dot';
  children: React.ReactNode;
  icon?: React.ReactNode;
}

This package provides the perfect balance between developer convenience and bundle optimization with truly zero-configuration styling.