Geeklego logoGeeklego

Introduction

An open-source, design-system-first React component library built on Tailwind CSS v4.

Why Geeklego?

  • Design-system-first — Tokens are the source of truth, not component styles. Change a token, every component updates automatically.
  • Pure Tailwind — No cn(), cva, CSS modules, or inline styles. Just Tailwind classes powered by design tokens.
  • Strict component hierarchy — Atoms → Molecules → Organisms with enforced import boundaries.
  • Theming built in — Light, dark, and brand modes via a single data-theme attribute.
  • Accessibility-first — WCAG 2.2 AA with keyboard navigation hooks and ARIA helpers.
  • Batteries included — i18n provider, security utilities, and Schema.org structured data support.

What's Included

Category
Count
Examples
Atoms
35
Button, Input, Badge, Switch, Slider, Avatar
Molecules
16
Card, Toast, Tooltip, Combobox, SearchBar
Organisms
12
Modal, DataTable, Tabs, Accordion, Sidebar
Utilities
8+
Focus trap, roving tabindex, click outside, ARIA helpers
Design Tokens
5,400+ lines
Colors, spacing, typography, motion, sizing

How the Design System Works

Every visual property flows through a three-level token chain — components never reference raw values directly:

  • Primitives — Raw values like colors, sizes, and spacing defined in the Tailwind @theme block.
  • Semantic tokens — Purpose-driven aliases that describe intent, not appearance. For example, --color-action-primary instead of --color-blue-500.
  • Component tokens — Scoped overrides per component, such as --button-bg or --card-radius.

Swap the semantic layer to retheme the entire library — no component code changes needed.

Quick Start

1. Clone the repo

1git clone https://github.com/GeekyAnts/geeklego.git2cd geeklego

2. Install dependencies

pnpm install

3. Start the project

pnpm dev:all

This starts both the token editor (localhost:5173) and Storybook (localhost:6006) side-by-side.

For full setup instructions — see the Installation guide.

What's Next