majaLab

A premium, dark-first React component library — built from true atoms up to full page templates. Token-driven, accessible, TypeScript-first, and obsessively hover-isolated.

• 🎨 Token system — every component reads CSS variables; override one accent (#501BFD) and it cascades everywhere via color-mix.
• 🌗 Dark by default, opt-in light theme, per-instance token overrides.
• 🧱 Atomic architecture — primitives → atoms → forms → overlays → navigation → data-display → molecules → organisms → templates.
• ♿ Accessible — keyboard navigation, focus traps, ARIA, prefers-reduced-motion.
• 🧩 Hover-isolated — hovering one item never affects its siblings (all interactive state is item-level and mlb--scoped).
• 🟦 TypeScript-first — every component ships typed props.

Install

npm install majalab framer-motion react-icons

Usage

import "majalab/styles.css";
import { ThemeProvider, Button, Heading, HighlightText } from "majalab";

export default function App() {
  return (
    <ThemeProvider mode="dark">
      <Heading as="h1" size="6xl">
        Build <HighlightText>better</HighlightText> interfaces.
      </Heading>
      <Button variant="primary" size="lg">Get started</Button>
    </ThemeProvider>
  );
}

Theming

// Re-theme any subtree with a single accent override
<ThemeProvider tokens={{ accent: "#10b981" }}>
  <Button>Emerald</Button>
</ThemeProvider>

// Opt into light mode
<ThemeProvider mode="light">…</ThemeProvider>

What's inside

| Layer | Components | | --- | --- | | Foundation | ThemeProvider, Box, Slot, Portal, VisuallyHidden, hooks (useControllableState, useDisclosure, useMediaQuery, useClickOutside), tokens | | Typography | Text, Heading, Display, Paragraph, Caption, Overline, Kicker, HighlightText, GradientText, SplitHeading, Code, InlineCode, LinkText | | Layout | Container, Section, Stack, Inline, Cluster, Grid, Center, Split, Spacer, AspectRatio, ScrollArea, Sticky, Frame | | Atoms | Button (12 variants), IconButton, ButtonGroup, ToggleButton, CopyButton, FloatingActionButton, Badge, Tag, Pill, Dot, StatusDot, Avatar, AvatarGroup, Spinner, Skeleton, Progress, Icon, Divider, Kbd, Image, Logo | | Forms | FormField, Label, HelperText, ErrorText, Input, Textarea, Select, Checkbox, Radio, Switch, Slider, RangeSlider, SearchInput, PasswordInput, NumberInput, OTPInput, ColorInput, DateInput, FileInput, InputGroup | | Overlays | Tooltip, Popover, DropdownMenu, ContextMenu, Modal, Drawer | | Navigation | Tabs, SegmentedControl, Breadcrumbs, Pagination, Stepper, NavItem, SidebarItem | | Data display | Card, StatCard, MetricCard, FeatureCard, PricingCard, TestimonialCard, UserCard, TeamCard, ProductCard, BlogCard, Table, List, DescriptionList, Rating | | Feedback | Alert, Callout, EmptyState, ToastProvider + useToast | | Motion | Motion, Reveal, Magnetic, AnimatedNumber, Marquee | | Molecules | SearchBar, FilterBar, NewsletterForm, FieldGroup, FormRow, ThemeToggle, LanguageSwitcher, CopyCodeBlock, CommandItem | | Organisms | Navbar, Sidebar, Footer, Hero, FAQ, CommandPalette, FloatingDock, CompareSlider, FileUploader, MultiStepForm, TestimonialCarousel, ContactForm, LoginForm, section grids, docs primitives | | Templates | AdminDashboard, DashboardTemplate, SettingsTemplate, AuthTemplate, SaaSLandingTemplate, PortfolioTemplate, DocumentationTemplate, EcommerceTemplate, ContactSection |

The Lab

Run the docs/playground locally:

npm run dev

It documents every layer with live previews, code, prop tables, a theme switcher, a live playground, and a dedicated Hover Isolation test page.

License

MIT © majaLab