Introduction

Introduction

What is EndUI?

EndUI is a simple, powerful and flexible UI library with everything you love from React. Built with modern web development principles, EndUI provides a comprehensive collection of accessible, customizable, and production-ready components that help you build beautiful user interfaces faster.

Why EndUI?

🚀 Simple to Use

EndUI components follow intuitive APIs and consistent patterns. Get started quickly with minimal setup and start building immediately.

import { Button } from 'endui'
 
function App() {
  return <Button variant="primary">Get Started</Button>
}

💪 Powerful by Design

Every component is built with flexibility in mind. Extensive variant systems, size options, and customization capabilities let you create exactly what you need.

<Button variant="ghost" size="lg" className="custom-styles">
  Fully Customizable
</Button>

🎨 Flexible Styling

Built on top of Tailwind CSS with full TypeScript support. Customize themes, create variants, and maintain design consistency across your application.

Key Features

  • 🔧 TypeScript First - Complete type safety with comprehensive TypeScript definitions
  • ♿ Accessibility Built-in - WCAG compliant components using Radix UI primitives
  • 🌙 Dark Mode Ready - Full dark mode support with CSS custom properties
  • 📱 Responsive Design - Mobile-first components that work on all screen sizes
  • 🎨 Themeable - Easy customization with CSS variables and Tailwind CSS
  • 📦 Tree Shakeable - Import only what you need for optimal bundle sizes
  • ⚡ Performance Optimized - Lightweight components with minimal runtime overhead

Component Library

EndUI includes everything you need to build modern web applications:

Core Components

  • Buttons - Primary, secondary, ghost, and more variants
  • Inputs - Text inputs, textareas, and form controls
  • Typography - Headings, text, and semantic HTML elements

Layout Components

  • Cards - Flexible containers for content organization
  • Sidebar - Collapsible navigation with context API
  • Tables - Data display with sorting and pagination
  • Tabs - Organized content switching

Feedback Components

  • Alerts - Success, warning, error, and info notifications
  • Modals - Accessible dialog system with multiple sizes
  • Loading Spinners - Visual feedback for async operations
  • Badges - Status indicators and labels

Navigation Components

  • Pagination - Smart page navigation with customizable ranges
  • Breadcrumbs - Hierarchical navigation trails
  • Navigation Menus - Dropdown and mega menu support

Getting Started

Installation

npm install endui
# or
yarn add endui
# or
pnpm add endui

Setup

  1. Install Tailwind CSS (if not already installed)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  1. Configure Tailwind - Add EndUI paths to your tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/endui/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. Import CSS - Add to your main CSS file:
@import 'endui/dist/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

Basic Usage

import React from 'react'
import { 
  Button, 
  Card, 
  CardHeader, 
  CardTitle, 
  CardContent,
  Alert,
  AlertTitle,
  AlertDescription 
} from 'endui'
 
function App() {
  return (
    <div className="p-8 space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Welcome to EndUI</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="mb-4">
            Start building beautiful interfaces with our component library.
          </p>
          <Button variant="default" size="lg">
            Get Started
          </Button>
        </CardContent>
      </Card>
 
      <Alert variant="success">
        <AlertTitle>Success!</AlertTitle>
        <AlertDescription>
          EndUI is now ready to use in your project.
        </AlertDescription>
      </Alert>
    </div>
  )
}
 
export default App

Design Philosophy

Consistency First

All EndUI components follow the same API patterns. Once you learn one component, you'll understand them all.

// Consistent variant and size props across all components
<Button variant="primary" size="lg" />
<Card variant="elevated" size="lg" />
<Alert variant="success" size="lg" />

Accessibility by Default

Every component is built with accessibility in mind, following WCAG guidelines and using semantic HTML.

Developer Experience

Comprehensive TypeScript support, intuitive APIs, and helpful error messages make development smooth and enjoyable.

Community & Support

What's Next?

Ready to dive deeper? Explore our component documentation:

  • Components Overview - Browse all available components
  • Button - Learn about button variants and usage
  • Card - Flexible containers for your content
  • Forms - Input components and form patterns
  • Theming Guide - Customize EndUI for your brand
  • Examples - Real-world usage patterns and recipes

Built with ❤️ by the EndUI team. Start building something amazing today!

Advanced