✨ @arolariu/components

🎯 Why Choose @arolariu/components?

For Developers Who Care About Quality

• 🎨 Beautiful by Default - Carefully designed components that look great out of the box
• ♿ Accessibility First - Built on Radix UI primitives with WAI-ARIA compliance
• ⚡ Performance Optimized - Tree-shakeable, minimal bundle impact, source maps included
• 🔧 Developer Experience - Full TypeScript support, comprehensive docs, and debugging tools
• 🎭 Flexible Styling - Tailwind CSS integration with easy customization
• 🚀 Modern Stack - React 18/19, ESM, SSR compatible

Perfect for building modern web applications, design systems, and prototypes.

� Quick Start

Get up and running with @arolariu/components in under 2 minutes!

Installation

# npm
npm install @arolariu/components

# yarn
yarn add @arolariu/components

# pnpm
pnpm add @arolariu/components

Basic Setup

// 1. Import the component you need
import { Button } from "@arolariu/components/button";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@arolariu/components/card";

// 2. Use it in your React component
export default function MyApp() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Welcome to @arolariu/components!</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  );
}

Add Styles (Required)

// Import the CSS in your app's entry point (e.g., main.tsx, _app.tsx)
import "@arolariu/components/styles";

That's it! 🎉 You're ready to build beautiful UIs.

📖 Component Catalog

Explore our comprehensive collection of 60+ components organized by category:

🎨 Layout & Structure

🎭 Interactive Elements

🧭 Navigation

� Overlays & Dialogs

📊 Data Display

🎪 Animated Backgrounds

🎛️ Form Controls

� Feedback & Status

👀 View All Components in our interactive Storybook

💡 Usage Examples

Building a Login Form

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
} from "@arolariu/components/card";
import { Input } from "@arolariu/components/input";
import { Button } from "@arolariu/components/button";
import { Label } from "@arolariu/components/label";

export function LoginForm() {
  return (
    <Card className="w-96 mx-auto">
      <CardHeader>
        <CardTitle>Welcome Back</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="you@example.com" />
        </div>
        <div>
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" />
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Sign In</Button>
      </CardFooter>
    </Card>
  );
}

Data Dashboard

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@arolariu/components/card";
import { Progress } from "@arolariu/components/progress";
import { Badge } from "@arolariu/components/badge";
import { Chart } from "@arolariu/components/chart";

export function Dashboard() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            Sales <Badge variant="secondary">+12%</Badge>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Progress value={75} className="w-full" />
          <p className="text-sm text-muted-foreground mt-2">
            75% of monthly goal
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Revenue</CardTitle>
        </CardHeader>
        <CardContent>
          <Chart data={chartData} type="line" />
        </CardContent>
      </Card>
    </div>
  );
}

Interactive Navigation

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuList,
} from "@arolariu/components/navigation-menu";
import { Button } from "@arolariu/components/button";
import { Sheet, SheetContent, SheetTrigger } from "@arolariu/components/sheet";
import { MenuIcon } from "lucide-react";

export function AppHeader() {
  return (
    <header className="border-b">
      <div className="container mx-auto px-4 py-2 flex items-center justify-between">
        <h1 className="text-2xl font-bold">My App</h1>

        {/* Desktop Navigation */}
        <NavigationMenu className="hidden md:flex">
          <NavigationMenuList>
            <NavigationMenuItem>
              <Button variant="ghost">Home</Button>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <Button variant="ghost">About</Button>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <Button variant="ghost">Contact</Button>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>

        {/* Mobile Navigation */}
        <Sheet>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon" className="md:hidden">
              <MenuIcon />
            </Button>
          </SheetTrigger>
          <SheetContent>
            <nav className="space-y-4">
              <Button variant="ghost" className="w-full justify-start">
                Home
              </Button>
              <Button variant="ghost" className="w-full justify-start">
                About
              </Button>
              <Button variant="ghost" className="w-full justify-start">
                Contact
              </Button>
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  );
}

🛠️ Advanced Features

Tree Shaking & Bundle Optimization

@arolariu/components is built with bundle optimization in mind:

// ✅ Optimal: Import only what you need
import { Button } from "@arolariu/components/button";
import { Card } from "@arolariu/components/card";

// ❌ Avoid: Barrel imports increase bundle size
import { Button, Card } from "@arolariu/components";

Bundle Impact:

• Individual components: ~2-5KB gzipped
• Full library: ~150KB gzipped
• With tree shaking: Only pay for what you use

TypeScript Integration

Full TypeScript support with intelligent autocomplete:

import { Button, type ButtonProps } from "@arolariu/components/button";
import { type VariantProps } from "class-variance-authority";

// Get variant types for custom components
type ButtonVariant = VariantProps<typeof Button>["variant"];

interface CustomButtonProps extends ButtonProps {
  icon?: React.ReactNode;
  variant?: ButtonVariant;
}

export function CustomButton({ icon, children, ...props }: CustomButtonProps) {
  return (
    <Button {...props}>
      {icon && <span className="mr-2">{icon}</span>}
      {children}
    </Button>
  );
}

Server-Side Rendering (SSR)

Compatible with Next.js, Remix, and other SSR frameworks:

// app/page.tsx (Next.js App Router)
import { Card, CardContent } from "@arolariu/components/card";
import { Button } from "@arolariu/components/button";

export default function HomePage() {
  return (
    <Card>
      <CardContent>
        <Button>Server-rendered Button</Button>
      </CardContent>
    </Card>
  );
}

// For client-side interactivity
("use client");
import { useState } from "react";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
} from "@arolariu/components/dialog";

export function InteractiveComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <p>This dialog requires client-side JavaScript!</p>
      </DialogContent>
    </Dialog>
  );
}

Theming & Customization

Built with Tailwind CSS for easy customization:

// Custom theme configuration
import { Button } from "@arolariu/components/button";

// Override styles with Tailwind classes
<Button className="bg-purple-600 hover:bg-purple-700 text-white">
  Custom Styled Button
</Button>;

// Or create your own variants
import { cva } from "class-variance-authority";

const customButtonVariants = cva(
  "inline-flex items-center justify-center rounded-md font-medium transition-colors",
  {
    variants: {
      variant: {
        gradient:
          "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600",
        neon: "bg-black text-green-400 border border-green-400 hover:bg-green-400 hover:text-black",
      },
    },
  },
);

🔍 Debugging & Development

Complete Source Map Support

Debug like a pro with comprehensive development tools:

• ✅ JavaScript source maps for accurate debugging
• ✅ CSS source maps for Tailwind debugging
• ✅ TypeScript declaration maps for IDE IntelliSense
• ✅ Original source access via included src/ directory

Browser DevTools Integration

// Components are easily debuggable in DevTools
import { Button } from "@arolariu/components/button";

function MyComponent() {
  return <Button onClick={() => console.log("Clicked!")}>Debug Me</Button>;
}

// Set breakpoints in your original TypeScript code
// Stack traces point to exact source locations
// Inspect component props and state easily

📖 Full Debugging Guide - Learn advanced debugging techniques

🌐 Browser Support

Modern browsers only for optimal performance:

Why modern browsers? We use latest web standards for smaller bundles and better performance.

🤝 Contributing

We welcome contributions! Help make @arolariu/components even better.

Quick Start for Contributors

# 1. Fork and clone the repository
git clone https://github.com/your-username/arolariu.ro.git
cd arolariu.ro/packages/components

# 2. Install dependencies
yarn install

# 3. Start development environment
yarn storybook        # Launch Storybook at http://localhost:6006
yarn build           # Build the library

# 4. Make your changes and test
yarn build           # Ensure everything builds correctly

Ways to Contribute

• 🐛 Report bugs - Found an issue? Open an issue
• 💡 Suggest features - Have an idea? We'd love to hear it!
• 🔧 Fix issues - Browse open issues and submit PRs
• 📖 Improve docs - Help make our documentation clearer
• 🎨 Add components - Contribute new components following our patterns

Component Development Guidelines

1. Follow accessibility standards - Use Radix UI primitives when possible
2. Include TypeScript types - Full type definitions required
3. Add Storybook stories - Document all variants and use cases
4. Write tests - Ensure components work correctly
5. Follow naming conventions - Use clear, descriptive names

Read our full contributing guide →

📦 Package Details

Bundle Information

# Package size analysis
npm install @arolariu/components
npx bundlephobia @arolariu/components

Key Stats:

• � Bundle size: ~150KB (full library, gzipped)
• 🌲 Tree-shakeable: Import only what you need (2-5KB per component)
• 📝 TypeScript: 100% typed with declaration maps
• ♿ Accessibility: WAI-ARIA compliant via Radix UI
• 🎭 Styling: Tailwind CSS integration
• 📱 Responsive: Mobile-first design approach

Dependencies

Zero runtime dependencies for end users! Built on top of:

• Radix UI - Accessible component primitives
• Tailwind CSS - Utility-first styling (peer dependency)
• Motion - Animation library (peer dependency)
• React 18/19 - Modern React features (peer dependency)

📄 License

MIT License - Use freely in personal and commercial projects.

MIT License

Copyright (c) 2025 Alexandru-Razvan Olariu

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...

View full license →

👨‍💻 About the Author

Alexandru-Razvan Olariu

Senior Software Engineer passionate about creating beautiful, accessible user interfaces and developer tools.

• 🌐 Website: arolariu.ro
• 💻 GitHub: @arolariu
• � LinkedIn: Alexandru-Razvan Olariu
• 📧 Email: admin@arolariu.ro

🙏 Acknowledgments & Inspiration

This library wouldn't exist without these amazing projects:

• 🎨 Radix UI - Accessible component primitives
• 💫 shadcn/ui - Component design patterns and inspiration
• 🎭 Tailwind CSS - Utility-first CSS framework
• ⚡ Motion - Animation library for React
• 🛠️ Rslib - Fast, modern bundling with Rsbuild
• 📖 Storybook - Component development environment
• 🎪 Magic UI - Additional component inspiration
• ✨ Aceternity UI - Creative component patterns

Special thanks to the open-source community for making all of this possible! 💜

📋 Release History

Stay updated with the latest improvements, features, and fixes!

All notable changes to @arolariu/components are documented here following Keep a Changelog format and Semantic Versioning.

🎉 Latest Releases

0.2.0 - 2025-10-01

✨ New Features & Improvements

• ⚙️ Migrated tooling to monorepo-based NPM+NX for better package management and development experience.
• ⬆️ Updated rslib/rsbuild core packages to latest versions.

0.1.2 - 2025-09-08

🔧 Dependencies & Infrastructure

• ⬆️ Updated rslib/rsbuild core packages to latest versions.
• 🆕 useWindowSize Hook Added new hook to get window dimensions.

0.1.1 - 2025-08-25

🔧 Dependencies & Infrastructure

• ⬆️ Upgraded Radix UI packages to latest versions for better performance.
• ⬆️ Updated rslib/rsbuild core packages to latest versions.
• 🆕 Typewriter Component Added new component from Aceternity UI.
• ⬆️ Recharts V3 Upgraded chart.tsx to use Rechars v3.

0.1.0 - 2025-08-12

🔧 Dependencies & Infrastructure

• 💥 Breaking Change: Only export ESM format starting from this version.
• ⬆️ Upgraded Radix UI packages to latest versions for better performance.
• ⬆️ Updated rslib/rsbuild core packages to latest versions.

0.0.40 - 2025-07-25

🔧 Dependencies & Infrastructure

• ⬆️ Upgraded Radix UI packages to latest versions for better performance.
• ⬆️ Updated rslib/rsbuild core packages to latest versions.

0.0.39 - 2025-06-25

🔧 Dependencies & Infrastructure

• ⬆️ Upgraded Radix UI packages to latest versions for better performance.
• ⬆️ Updated rslib/rsbuild core packages to latest versions.
• ⬆️ Bumped Storybook to v8 with enhanced documentation features.
• 🔗 Fixed broken anchor links in readme.md file.

0.0.38 - 2025-05-16

✨ Features & Documentation

• ⬆️ Radix UI updates - Latest component primitives.
• ⬆️ Build tool updates - Enhanced rslib/rsbuild packages.
• 📚 Complete Storybook coverage - Interactive stories for all major components.
• 🆕 New Component: DropDrawer - Advanced drawer with drop zones.
  • Thanks to Jia Wei Ng for the contribution! 🙏

0.0.37 - 2025-04-20

🎨 Component Library Expansion

• ⬆️ Radix UI updates - Latest component primitives.
• 📖 Enhanced README - Better documentation for new components.
• ✨ 9 new Animate-UI components - Beautiful animations out of the box.
• 🪄 2 new Magic-UI components - Enhanced utility components.
• 🎭 1 new Aceternity-UI component - Creative design patterns.

0.0.36 - 2025-04-17

🔄 Package Manager Migration

• 📦 Migrated from npm to Yarn - Better dependency management and performance.
• ⬆️ Updated ShadCN packages - Latest component definitions and patterns.

0.0.35 - 2025-04-08

🛠️ Build System Overhaul

• 🔧 Vite → Rslib migration - Faster builds and better tree-shaking.
• 📅 Calendar component upgrade - Updated from v8 to v9 with new features.

0.0.34 - 2025-03-27

🧹 Dependency Cleanup

• ⬆️ Package version updates - Latest stable versions.
• ❌ Removed daisyUI dependency - Cleaner build without unused CSS framework.
• 🧽 De-duplicated yarn.lock - Optimized dependency tree.

0.0.33 - 2025-03-13

🎯 Developer Experience

• ✨ Added toast function - Programmatic toast notifications with the Toast components.

0.0.32 - 2025-03-05

📦 View on npm • ⭐ Star on GitHub