🦎 Mantis UI

A powerful and lightweight React component library built for internal dashboards and business applications

✨ Why Mantis UI?

Built by NeoVantis for the modern web, Mantis UI delivers production-ready components that help you build stunning internal tools and dashboards fast. No bloat, no complexity – just beautiful, accessible components that work.

🚀 Quick Start

npm install @neovantis/mantisui

import { Button, Card, Table, Sidebar } from '@neovantis/mantisui';
import '@neovantis/mantisui/styles';

function Dashboard() {
  return (
    <div className="dashboard">
      <Sidebar items={navItems} collapsible />
      <main>
        <Card variant="elevated">
          <h1>Revenue Overview</h1>
          <Table columns={columns} dataSource={salesData} />
          <Button variant="primary" size="lg">
            Generate Report
          </Button>
        </Card>
      </main>
    </div>
  );
}

🎯 What's Inside

🔘 Buttons - 6 variants, 3 sizes, icons, loading states

<Button variant="primary" loading={isSubmitting}>
  Save Changes
</Button>
<Button variant="ghost" icon={<DownloadIcon />}>
  Export Data
</Button>

📄 Cards - Flexible containers with headers, footers, variants

<Card variant="elevated" header="User Analytics">
  <StatGrid data={metrics} />
</Card>

📊 Tables - Sortable, customizable, responsive data tables

<Table 
  columns={[
    { key: 'name', title: 'Employee', dataIndex: 'name', sortable: true },
    { key: 'status', title: 'Status', render: (status) => <StatusBadge status={status} /> }
  ]}
  dataSource={employees}
  onRowClick={(record) => openProfile(record.id)}
/>

📑 Sidebar - Collapsible navigation with nested menus

<Sidebar 
  items={navigationItems}
  collapsible 
  header={<Logo />}
  footer={<UserProfile />}
/>

✨ Animations - Smooth, performant CSS animations

<Animation type="fadeInUp" triggerOnScroll>
  <MetricsCard />
</Animation>

🎨 Design System

Mantis UI follows a cohesive design language with:

• 🎯 Consistent spacing - 8px grid system
• 🌈 Smart color palette - Primary, secondary, success, warning, error variants
• 📱 Mobile-first - Responsive by default
• ♿ Accessible - WCAG 2.1 AA compliant
• 🎭 Smooth animations - Subtle, performant transitions

Customization Made Easy

:root {
  --mantis-primary: #3b82f6;
  --mantis-radius: 8px;
  --mantis-font-family: 'Inter', sans-serif;
  --mantis-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

📦 Real-World Example

Here's how companies use Mantis UI to build internal tools:

function EmployeeDashboard() {
  const [employees, setEmployees] = useState([]);
  const [loading, setLoading] = useState(false);

  const columns = [
    { 
      key: 'name', 
      title: 'Employee', 
      dataIndex: 'name',
      sortable: true 
    },
    { 
      key: 'department', 
      title: 'Department', 
      dataIndex: 'department' 
    },
    {
      key: 'status',
      title: 'Status',
      dataIndex: 'status',
      render: (status) => (
        <span className={`status status--${status.toLowerCase()}`}>
          {status}
        </span>
      )
    }
  ];

  return (
    <div className="app">
      <Sidebar 
        items={[
          { id: 'dashboard', label: 'Dashboard', icon: '📊' },
          { id: 'employees', label: 'Employees', icon: '👥', isActive: true },
          { id: 'reports', label: 'Reports', icon: '📈' }
        ]}
        collapsible
      />
      
      <main className="main-content">
        <Card variant="elevated">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <h1>Employee Directory</h1>
            <Button variant="primary" icon="+" loading={loading}>
              Add Employee
            </Button>
          </div>
          
          <Table 
            columns={columns}
            dataSource={employees}
            onRowClick={(employee) => openEmployeeProfile(employee.id)}
          />
        </Card>
      </main>
    </div>
  );
}

🏗️ Architecture

• ⚡ Tree-shakeable - Import only what you need
• 📦 Tiny bundle - <30kb gzipped for the full library
• 🔧 TypeScript - Complete type definitions included
• 🎨 CSS Variables - Easy theming without build tools
• 📱 Responsive - Works beautifully on all devices

🌟 Community

• 🐛 Issues: GitHub Issues
• 💡 Feature Requests: GitHub Discussions
• 📖 Documentation: Full Docs
• 💬 Support: NeoVantis Team

📄 License

MIT © NeoVantis

Built with ❤️ by the NeoVantis team

⭐ Star on GitHub • 📦 View on npm • 🔗 Visit NeoVantis