Skip to content

ui.md

Latest commit

 

History

History
980 lines (832 loc) · 24.4 KB

ui.md

File metadata and controls

980 lines (832 loc) · 24.4 KB
Raw

UI Libraries 🎨

Component libraries and design systems for creating beautiful user interfaces.

Material-UI (MUI)

Description: React components implementing Google's Material Design with a comprehensive set of components.

Key Features:

  • Material Design components
  • Customizable theming
  • Responsive design
  • Accessibility built-in
  • TypeScript support
  • Extensive component library

Installation:

npm install @mui/material @emotion/react @emotion/styled

Basic Usage:

import { Button, Typography, Container } from '@mui/material';

function App() {
  return (
    <Container>
      <Typography variant="h1">Hello MUI</Typography>
      <Button variant="contained" color="primary">
        Click me
      </Button>
    </Container>
  );
}

Use Cases: Enterprise applications, admin dashboards, mobile-first designs

Chakra UI

Description: Simple, modular and accessible component library that gives you the building blocks you need.

Key Features:

  • Simple and intuitive API
  • Modular architecture
  • Built-in dark mode
  • Responsive design
  • Accessibility first
  • Emotion-based styling

Installation:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Basic Usage:

import { ChakraProvider, Box, Button, Heading } from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider>
      <Box p={8}>
        <Heading size="lg">Hello Chakra UI</Heading>
        <Button colorScheme="blue">Click me</Button>
      </Box>
    </ChakraProvider>
  );
}

Use Cases: Rapid prototyping, modern web applications, accessible interfaces

Ant Design

Description: Enterprise-class UI design language and React UI library with a set of high-quality React components.

Key Features:

  • Enterprise-class components
  • Internationalization support
  • TypeScript support
  • Less-based theming
  • Comprehensive design system
  • Professional look and feel

Installation:

npm install antd

Basic Usage:

import { Button, Typography, Layout } from 'antd';

const { Header, Content } = Layout;
const { Title } = Typography;

function App() {
  return (
    <Layout>
      <Header>
        <Title level={3}>Hello Ant Design</Title>
      </Header>
      <Content>
        <Button type="primary">Click me</Button>
      </Content>
    </Layout>
  );
}

Use Cases: Enterprise applications, admin interfaces, business dashboards

ShadCN/UI

Description: Beautifully designed components built with Radix UI and Tailwind CSS, copy-paste friendly.

Key Features:

  • Copy-paste components
  • Built with Radix UI primitives
  • Tailwind CSS styling
  • Fully customizable
  • TypeScript support
  • Modern design aesthetic

Installation:

npx shadcn-ui@latest init
npx shadcn-ui@latest add button

Basic Usage:

import { Button } from "@/components/ui/button"

function App() {
  return (
    <div>
      <h1>Hello ShadCN/UI</h1>
      <Button>Click me</Button>
    </div>
  );
}

Use Cases: Modern web applications, design systems, custom component libraries

React Icons

Description: Popular icon libraries as React components with easy customization and extensive icon collections.

Key Features:

  • Popular icon libraries included
  • Easy to use React components
  • Customizable size and color
  • Tree-shakable imports
  • TypeScript support
  • No additional dependencies

Installation:

npm install react-icons

Basic Usage:

import { FaHome, FaUser, FaSearch } from 'react-icons/fa';
import { MdEmail, MdPhone } from 'react-icons/md';
import { AiOutlineHeart, AiFillHeart } from 'react-icons/ai';

function App() {
  const [liked, setLiked] = useState(false);

  return (
    <div>
      {/* Font Awesome icons */}
      <FaHome size={24} color="#333" />
      <FaUser size={20} />
      <FaSearch size={18} />
      
      {/* Material Design icons */}
      <MdEmail size={24} color="#007bff" />
      <MdPhone size={20} />
      
      {/* Ant Design icons */}
      <button onClick={() => setLiked(!liked)}>
        {liked ? <AiFillHeart color="red" /> : <AiOutlineHeart />}
      </button>
    </div>
  );
}

// Custom icon component
import { FaStar } from 'react-icons/fa';

function StarRating({ rating, maxRating = 5 }) {
  return (
    <div>
      {Array.from({ length: maxRating }, (_, index) => (
        <FaStar
          key={index}
          color={index < rating ? '#ffc107' : '#e4e5e9'}
          size={16}
        />
      ))}
    </div>
  );
}

// Icon button component
function IconButton({ icon: Icon, onClick, ...props }) {
  return (
    <button
      onClick={onClick}
      className="p-2 hover:bg-gray-100 rounded-full transition-colors"
      {...props}
    >
      <Icon size={20} />
    </button>
  );
}

// Usage
function Header() {
  return (
    <header className="flex items-center justify-between p-4">
      <div className="flex items-center space-x-4">
        <FaHome size={24} />
        <span>My App</span>
      </div>
      
      <div className="flex items-center space-x-2">
        <IconButton icon={FaSearch} />
        <IconButton icon={FaUser} />
        <IconButton icon={MdEmail} />
      </div>
    </header>
  );
}

Available Icon Libraries:

  • Font Awesome (react-icons/fa) - Most popular icon library
  • Material Design (react-icons/md) - Google's Material Design icons
  • Ant Design (react-icons/ai) - Ant Design icons
  • Bootstrap (react-icons/bs) - Bootstrap icons
  • Feather (react-icons/fi) - Simple, beautiful icons
  • Heroicons (react-icons/hi) - Hand-crafted SVG icons
  • Lucide (react-icons/lu) - Beautiful & consistent icon toolkit
  • Tabler (react-icons/tb) - Free and open source icons
  • And many more...

Use Cases: UI icons, navigation elements, action buttons, status indicators

CMDK (Command Menu)

Description: Fast, unstyled command menu component for React with keyboard navigation and search.

Key Features:

  • Fast search and filtering
  • Keyboard navigation
  • Customizable styling
  • TypeScript support
  • Accessible by default
  • Command palette functionality
  • Fuzzy search support

Installation:

npm install cmdk

Basic Usage:

import { Command } from 'cmdk';

function CommandMenu() {
  const [open, setOpen] = useState(false);

  return (
    <Command className="rounded-lg border shadow-md">
      <Command.Input placeholder="Type a command or search..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        
        <Command.Group heading="Suggestions">
          <Command.Item>Calendar</Command.Item>
          <Command.Item>Search Emoji</Command.Item>
          <Command.Item>Calculator</Command.Item>
        </Command.Group>
        
        <Command.Group heading="Settings">
          <Command.Item>Profile</Command.Item>
          <Command.Item>Billing</Command.Item>
          <Command.Item>Settings</Command.Item>
        </Command.Group>
      </Command.List>
    </Command>
  );
}

// With keyboard shortcut
function App() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const down = (e) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((open) => !open);
      }
    };

    document.addEventListener('keydown', down);
    return () => document.removeEventListener('keydown', down);
  }, []);

  return (
    <div>
      <button onClick={() => setOpen(true)}>
        Open Command Menu (⌘K)
      </button>
      
      {open && (
        <div className="fixed inset-0 z-50 bg-black/50" onClick={() => setOpen(false)}>
          <div className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200">
            <Command>
              <Command.Input placeholder="Type a command or search..." />
              <Command.List>
                <Command.Empty>No results found.</Command.Empty>
                <Command.Item>Calendar</Command.Item>
                <Command.Item>Search Emoji</Command.Item>
                <Command.Item>Calculator</Command.Item>
              </Command.List>
            </Command>
          </div>
        </div>
      )}
    </div>
  );
}

Use Cases: Command palettes, search interfaces, keyboard shortcuts, app navigation

Embla Carousel React

Description: Lightweight carousel library with smooth scrolling and touch gestures for React.

Key Features:

  • Smooth scrolling
  • Touch/swipe gestures
  • Mouse wheel support
  • Keyboard navigation
  • Auto-play functionality
  • Responsive design
  • TypeScript support
  • Small bundle size

Installation:

npm install embla-carousel-react

Basic Usage:

import useEmblaCarousel from 'embla-carousel-react';
import { useCallback } from 'react';

function Carousel() {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev();
  }, [emblaApi]);

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext();
  }, [emblaApi]);

  return (
    <div className="embla">
      <div className="embla__viewport" ref={emblaRef}>
        <div className="embla__container">
          <div className="embla__slide">
            <div className="embla__slide__number">1</div>
          </div>
          <div className="embla__slide">
            <div className="embla__slide__number">2</div>
          </div>
          <div className="embla__slide">
            <div className="embla__slide__number">3</div>
          </div>
        </div>
      </div>
      <button className="embla__prev" onClick={scrollPrev}>
        Prev
      </button>
      <button className="embla__next" onClick={scrollNext}>
        Next
      </button>
    </div>
  );
}

// With auto-play
import Autoplay from 'embla-carousel-autoplay';

function AutoPlayCarousel() {
  const [emblaRef] = useEmblaCarousel(
    { loop: true },
    [Autoplay({ delay: 2000 })]
  );

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </div>
  );
}

Use Cases: Image galleries, product carousels, testimonials, content sliders

Lucide React

Description: Beautiful & consistent icon toolkit as React components with customizable size and color.

Key Features:

  • 1000+ beautiful icons
  • Consistent design
  • Customizable size and color
  • Tree-shakable
  • TypeScript support
  • Lightweight
  • SVG-based

Installation:

npm install lucide-react

Basic Usage:

import { 
  Home, 
  User, 
  Search, 
  Settings, 
  Heart,
  Star,
  Mail,
  Phone,
  Calendar,
  Clock
} from 'lucide-react';

function App() {
  return (
    <div className="flex items-center space-x-4">
      <Home size={24} color="#333" />
      <User size={20} className="text-blue-500" />
      <Search size={18} />
      <Settings size={16} />
    </div>
  );
}

// Icon button component
function IconButton({ icon: Icon, onClick, ...props }) {
  return (
    <button
      onClick={onClick}
      className="p-2 hover:bg-gray-100 rounded-full transition-colors"
      {...props}
    >
      <Icon size={20} />
    </button>
  );
}

// Usage
function Header() {
  return (
    <header className="flex items-center justify-between p-4">
      <div className="flex items-center space-x-4">
        <Home size={24} />
        <span>My App</span>
      </div>
      
      <div className="flex items-center space-x-2">
        <IconButton icon={Search} />
        <IconButton icon={User} />
        <IconButton icon={Settings} />
      </div>
    </header>
  );
}

// With conditional rendering
function LikeButton({ liked, onToggle }) {
  return (
    <button onClick={onToggle} className="flex items-center space-x-1">
      {liked ? (
        <Heart size={20} className="text-red-500 fill-current" />
      ) : (
        <Heart size={20} className="text-gray-400" />
      )}
      <span>{liked ? 'Liked' : 'Like'}</span>
    </button>
  );
}

Use Cases: UI icons, navigation elements, action buttons, status indicators

Motion (Framer Motion)

Description: Production-ready motion library for React with declarative animations and gestures.

Key Features:

  • Declarative animations
  • Gesture recognition
  • Layout animations
  • Scroll-triggered animations
  • Physics-based animations
  • TypeScript support
  • Performance optimized
  • Rich animation controls

Installation:

npm install motion

Basic Usage:

import { motion } from 'motion/react';

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
      className="w-20 h-20 bg-blue-500 rounded-lg"
    />
  );
}

// With variants
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: { y: 0, opacity: 1 }
};

function StaggeredList() {
  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      className="space-y-4"
    >
      {[1, 2, 3, 4, 5].map((item) => (
        <motion.div
          key={item}
          variants={itemVariants}
          className="p-4 bg-gray-100 rounded"
        >
          Item {item}
        </motion.div>
      ))}
    </motion.div>
  );
}

// With gestures
function GestureBox() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 300, top: 0, bottom: 300 }}
      whileDrag={{ scale: 1.1 }}
      className="w-20 h-20 bg-green-500 rounded-lg cursor-grab"
    />
  );
}

// Layout animations
function LayoutAnimation() {
  const [items, setItems] = useState([1, 2, 3]);

  const addItem = () => {
    setItems([...items, items.length + 1]);
  };

  const removeItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <motion.div layout className="space-y-2">
        {items.map((item, index) => (
          <motion.div
            key={item}
            layout
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.8 }}
            className="p-4 bg-blue-100 rounded flex justify-between items-center"
          >
            <span>Item {item}</span>
            <button onClick={() => removeItem(index)}>Remove</button>
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
}

Use Cases: UI animations, micro-interactions, page transitions, gesture-based interactions

React Resizable Panels

Description: Resizable panel components for React with smooth drag interactions and keyboard support.

Key Features:

  • Smooth resizing
  • Keyboard support
  • Touch support
  • Nested panels
  • Collapsible panels
  • TypeScript support
  • Accessible
  • Customizable handles

Installation:

npm install react-resizable-panels

Basic Usage:

import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';

function ResizableLayout() {
  return (
    <PanelGroup direction="horizontal" className="h-screen">
      <Panel defaultSize={30} minSize={20}>
        <div className="p-4 bg-gray-100">
          <h2>Sidebar</h2>
          <p>This panel can be resized</p>
        </div>
      </Panel>
      
      <PanelResizeHandle className="w-2 bg-gray-300 hover:bg-gray-400" />
      
      <Panel defaultSize={70} minSize={30}>
        <div className="p-4">
          <h2>Main Content</h2>
          <p>This is the main content area</p>
        </div>
      </Panel>
    </PanelGroup>
  );
}

// Vertical layout
function VerticalLayout() {
  return (
    <PanelGroup direction="vertical" className="h-screen">
      <Panel defaultSize={40} minSize={20}>
        <div className="p-4 bg-blue-100">
          <h2>Header</h2>
        </div>
      </Panel>
      
      <PanelResizeHandle className="h-2 bg-gray-300 hover:bg-gray-400" />
      
      <Panel defaultSize={60} minSize={30}>
        <div className="p-4">
          <h2>Content</h2>
        </div>
      </Panel>
    </PanelGroup>
  );
}

// With collapsible panels
function CollapsibleLayout() {
  return (
    <PanelGroup direction="horizontal" className="h-screen">
      <Panel 
        defaultSize={25} 
        minSize={15}
        collapsible={true}
        collapsedSize={0}
      >
        <div className="p-4 bg-gray-100">
          <h2>Collapsible Sidebar</h2>
        </div>
      </Panel>
      
      <PanelResizeHandle />
      
      <Panel defaultSize={75}>
        <div className="p-4">
          <h2>Main Content</h2>
        </div>
      </Panel>
    </PanelGroup>
  );
}

Use Cases: Code editors, dashboards, file explorers, split-screen layouts

Vaul (Drawer Components)

Description: Unstyled drawer component for React with smooth animations and accessibility features.

Key Features:

  • Smooth animations
  • Accessible by default
  • Customizable styling
  • TypeScript support
  • Keyboard navigation
  • Focus management
  • Portal rendering
  • Mobile-friendly

Installation:

npm install vaul

Basic Usage:

import { Drawer } from 'vaul';

function BasicDrawer() {
  return (
    <Drawer.Root>
      <Drawer.Trigger asChild>
        <button>Open Drawer</button>
      </Drawer.Trigger>
      
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="bg-white flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0">
          <div className="p-4 bg-white rounded-t-[10px] flex-1">
            <div className="mx-auto w-12 h-1.5 flex-shrink-0 bg-gray-300 rounded-full mb-8" />
            <div className="max-w-md mx-auto">
              <Drawer.Title className="font-medium mb-4">
                Unstyled drawer for React.
              </Drawer.Title>
              <p className="text-gray-500 mb-2">
                This component can be used as a replacement for a Dialog on mobile and tablet devices.
              </p>
            </div>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

// With custom content
function CustomDrawer() {
  return (
    <Drawer.Root>
      <Drawer.Trigger asChild>
        <button className="px-4 py-2 bg-blue-500 text-white rounded">
          Open Settings
        </button>
      </Drawer.Trigger>
      
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="bg-white flex flex-col rounded-t-[10px] h-[85%] mt-24 fixed bottom-0 left-0 right-0">
          <div className="p-6 bg-white rounded-t-[10px] flex-1">
            <div className="mx-auto w-12 h-1.5 flex-shrink-0 bg-gray-300 rounded-full mb-6" />
            
            <div className="max-w-md mx-auto">
              <Drawer.Title className="text-xl font-semibold mb-6">
                Settings
              </Drawer.Title>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-2">
                    Theme
                  </label>
                  <select className="w-full p-2 border rounded">
                    <option>Light</option>
                    <option>Dark</option>
                    <option>System</option>
                  </select>
                </div>
                
                <div>
                  <label className="block text-sm font-medium mb-2">
                    Notifications
                  </label>
                  <div className="space-y-2">
                    <label className="flex items-center">
                      <input type="checkbox" className="mr-2" />
                      Email notifications
                    </label>
                    <label className="flex items-center">
                      <input type="checkbox" className="mr-2" />
                      Push notifications
                    </label>
                  </div>
                </div>
              </div>
              
              <div className="mt-8 flex space-x-4">
                <Drawer.Close asChild>
                  <button className="flex-1 px-4 py-2 border rounded">
                    Cancel
                  </button>
                </Drawer.Close>
                <button className="flex-1 px-4 py-2 bg-blue-500 text-white rounded">
                  Save
                </button>
              </div>
            </div>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Use Cases: Mobile menus, settings panels, bottom sheets, modal alternatives

dnd-kit (Drag and Drop)

Description: A modern, accessible, and extensible drag-and-drop toolkit for React. Built on sensors with excellent keyboard support and customizable collision detection.

Key Features:

  • Accessible by default (keyboard + screen reader friendly)
  • Sensor-based architecture (pointer, mouse, touch, keyboard)
  • Reorderable lists and sortable grids
  • Custom collision detection strategies
  • Auto-scrolling, drag overlays, constraints
  • TypeScript support and small core

Installation:

npm install @dnd-kit/core

Basic Usage:

import { DndContext, useDraggable, useDroppable } from '@dnd-kit/core';

function Draggable({ id }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({ id });
  const style = {
    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
    width: 80,
    height: 80,
    background: '#60a5fa',
    borderRadius: 8,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  };

  return (
    <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
      Drag me
    </button>
  );
}

function Droppable({ id, children }) {
  const { isOver, setNodeRef } = useDroppable({ id });
  const style = {
    width: 160,
    height: 160,
    borderRadius: 12,
    border: '2px dashed #cbd5e1',
    background: isOver ? '#ecfeff' : 'transparent',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  };

  return (
    <div ref={setNodeRef} style={style}>
      {children}
    </div>
  );
}

function Example() {
  const handleDragEnd = (event) => {
    const { over } = event;
    if (over) {
      // Handle drop on `over.id`
      console.log('Dropped on', over.id);
    }
  };

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
        <Draggable id="draggable-1" />
        <Droppable id="dropzone-1">Drop here</Droppable>
      </div>
    </DndContext>
  );
}

// Sortable lists (via @dnd-kit/sortable)

npm install @dnd-kit/sortable

Use Cases: Drag-and-drop interactions, sortable lists/grids, kanban boards, file reordering

Comparison Table

Library Bundle Size Learning Curve Customization Design System
MUI Large Medium High Material Design
Chakra UI Medium Low High Custom
Ant Design Large Low Medium Enterprise
ShadCN/UI Small Medium Very High Modern/Custom
React Icons Small Low High Multiple Libraries
CMDK Small Low High Unstyled
Embla Carousel Small Low High Unstyled
Lucide React Small Low High Consistent
Motion Medium Medium Very High Unstyled
React Resizable Panels Small Low High Unstyled
Vaul Small Low High Unstyled

When to Use Each

  • MUI: When you want Material Design and need a comprehensive component library
  • Chakra UI: When you want simplicity and rapid development with good customization
  • Ant Design: When building enterprise applications with professional requirements
  • ShadCN/UI: When you want maximum control and modern aesthetics
  • React Icons: When you need icons from popular libraries with easy React integration

Best Practices

  1. Choose based on your design requirements and team preferences
  2. Consider bundle size impact on performance
  3. Ensure accessibility compliance
  4. Use consistent theming across your application
  5. Customize components to match your brand
  6. Test components across different devices and browsers