London UI

An opinionated UI library built on top of Mantine UI

London UI is a carefully curated collection of React components designed to accelerate development while maintaining consistency and quality. Built on the solid foundation of Mantine UI, London UI provides pre-configured, opinionated components that follow modern design principles and best practices.

🚀 Features

• 🎯 Opinionated by Design - Pre-configured components with sensible defaults
• ⚡ Built for Speed - Ready-to-use components out of the box
• 🎨 Mantine Foundation - Leverages the robust Mantine UI ecosystem
• 📱 Modern & Responsive - Mobile-first design approach
• ♿ Accessible - WCAG compliant components
• 🔧 TypeScript First - Full TypeScript support with comprehensive type definitions
• 🎭 Storybook Documentation - Interactive component documentation

📦 Installation

# npm
npm install london-ui @mantine/core @mantine/hooks

# yarn
yarn add london-ui @mantine/core @mantine/hooks

# pnpm
pnpm add london-ui @mantine/core @mantine/hooks

🎯 Quick Start

1. Setup Provider

import { UIProvider } from 'london-ui'
import 'london-ui/dist/index.css'

function App() {
  return (
    <UIProvider>
      {/* Your app content */}
    </UIProvider>
  )
}

Note: UIProvider automatically includes MantineProvider with London UI's default theme, so you don't need to wrap with both providers.

2. Custom Theme (Optional)

import { UIProvider } from 'london-ui'

function App() {
  return (
    <UIProvider
      theme={{
        fontFamily: 'Inter, sans-serif',
        primaryColor: 'blue',
      }}
    >
      {/* Your app content */}
    </UIProvider>
  )
}

3. Use Components

import { DataGrid, StatCard, TextInput } from 'london-ui'

function Dashboard() {
  return (
    <div>
      <TextInput
        label="Search"
        placeholder="Enter search term..."
        name="search"
      />

      <StatCard
        title="Total Users"
        value="1,234"
        description="Active users this month"
        color="#3b82f6"
      />

      <DataGrid
        data={users}
        columns={columns}
        searchable
        sortable
      />
    </div>
  )
}

🧩 Components

Atoms

• Logo - Configurable logo component
• TextInput - Enhanced text input with validation

Molecules

• Breadcrumb - Navigation breadcrumb
• EmptyView - Empty state component
• ErrorBoundary - Error boundary with fallback UI
• FileInput - File upload component
• FilePreview - File preview component
• FiltersDropdown - Advanced filtering dropdown
• LoadingView - Loading state component
• ModalLayout - Modal wrapper with consistent styling
• RadioSelect - Radio button selection
• StatCard - Statistics display card
• Table - Feature-rich data table
• TimeRange - Date/time range picker
• Topbar - Application header component
• DataGrid - Advanced data grid with virtualization

Organisms

• DashboardLayout - Complete dashboard layout
• Navigation - Sidebar navigation component
• FormBuilder - Dynamic form builder with validation
• KanbanBoard - Drag-and-drop kanban board

Charts

• BarChart - Customizable bar charts
• LineChart - Line and area charts
• PieChart - Pie and donut charts

📖 Documentation

Visit our Storybook documentation to explore components interactively with live examples and API documentation.

🎨 Tailwind CSS Integration

London UI works seamlessly with Tailwind CSS:

Tailwind v3

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/london-ui/dist/**/*.{js,mjs}'
  ],
  // ... rest of config
}

Tailwind v4

@import "tailwindcss";
@import "london-ui/dist/index.css";

@config {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/london-ui/dist/**/*.{js,mjs}"
  ];
}

🔧 Development

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Build library
pnpm build

# Run tests
pnpm test

# Type checking
pnpm typecheck

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on:

• Development setup
• Component creation guidelines
• Code standards and conventions
• Testing requirements
• Pull request process

📄 License

MIT © Cedric Mutesa

🔗 Links

• GitHub Repository
• Documentation
• npm Package
• Issues & Bug Reports

🏗️ Built With

• React - UI library
• Mantine - Component foundation
• TypeScript - Type safety
• Storybook - Documentation
• Vite - Build tool
• Tailwind CSS - Styling (optional)

Built and maintained by Cedric Mutesa