loopit

A modern, production-ready React component library for building beautiful, accessible, and highly customizable UIs. Built with TypeScript, Tailwind CSS v4+, and a powerful oklch-based design system.

Features

• 50+ fully themeable, accessible React components
• Semantic Tailwind v4+ classes (no arbitrary values in components)
• oklch color system for perceptually uniform, future-proof theming
• Dark mode and custom themes ready
• Production-level code quality and accessibility
• TypeScript types for all components
• Sidebar and Header with subroute support
• No Tailwind config required (uses CSS variables)

Installation

# With yarn
yarn add loopit
# Or with npm
npm install loopit

Peer Dependencies

• react (18+ or 19+)
• react-dom (18+ or 19+)
• clsx

Usage

import { Button, Input, Header } from 'loopit';

<Button variant="primary">Click me</Button>
<Input label="Email" placeholder="Enter your email" />

Importing Styles

To ensure all components are styled correctly, import the library's CSS file in your app entry point (e.g., app/layout.tsx or pages/_app.tsx in Next.js):

import 'loopit/dist/loopit.css';

This will include all required Tailwind and custom styles for the components.

Custom Theming

You can override the default color variables to customize the theme. To do this, define your own CSS variables in your global CSS file after importing the library's CSS:

:root {
  --primary: oklch(0.5 0.1 200); /* Your custom color */
  --primary-foreground: oklch(0.1 0.1 0);
  /* ...override any other variables as needed */
}

The values you define will take precedence, allowing you to easily theme the components.

Theming & Design System

• All colors are defined in globals.css using the oklch color space for maximum fidelity and future-proofing.
• Use semantic Tailwind classes like bg-primary, text-muted-foreground, border-border, etc. in your own code.
• Easily override or extend the color system by changing CSS variables in globals.css.
• Shadows, radii, and spacing are also controlled by CSS variables.

Example (globals.css):

:root {
  --primary: oklch(0.29 0.045 264);
  --primary-foreground: oklch(0.98 0 0);
  --sidebar: oklch(0.97 0.01 264);
  --sidebar-foreground: oklch(0.18 0 0);
  /* ...and many more */
}

Available Components

• Layout: Sidebar, Header, Modal, Card, Accordion
• Forms: Input, Textarea, Select, MultiSelect, Checkbox, Radio, Toggle, FilePicker, DatePicker, DateRangePicker
• Data Display: Table, Badge, Avatar, Typography, Tooltip, Skeleton, Loading, Tabs, Pagination
• Actions: Button, IconButton
• Feedback: InactivityModal

All components are fully typed and support custom className, theming, and accessibility out of the box.

Best Practices

• Use only semantic Tailwind classes in your own code for maximum theme compatibility.
• Use the provided color variables for custom components.
• All components are accessible and keyboard navigable by default.
• Use the currentPath and onNavigate props for navigation-aware components (Sidebar, Header).

Build & TypeScript

• Built with tsup for fast, modern builds.
• TypeScript types are included for all components.
• Exports both ESM and CJS formats.

License

MIT

Author

Muhammad Sohaib Arshad
[email protected]