Geeklego logoGeeklego

Installation

Get Geeklego up and running in your project.

Requirements

  • Node.js 20.0.0 or later
  • pnpm 9.15.0 (pinned)
  • React 19
  • Tailwind CSS v4

Quick Setup

Geeklego is a fork-first design system. Clone it, install dependencies, and start building immediately — you get the full source: components, tokens, token editor, Storybook, and built-in skills.

1. Clone the repository

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

Want to track your own changes? Fork it on GitHub first, then clone your fork — this lets you commit your customisations and pull upstream updates when needed.

2. Install dependencies

Install pnpmif you don't have it, then install all dependencies:

1npm install -g pnpm@9.15.02pnpm install

3. Start the dev servers

pnpm dev:all

This starts both tools side-by-side:

URLWhat it is
localhost:5173Token editor — visually edit colours, fonts, and spacing
localhost:6006Storybook — browse and interact with all components

Or run them individually:

1pnpm dev        # Token editor only2pnpm storybook  # Storybook only

Using Components

Components live in components/. Use them inside your own app by referencing the package name — or copy components directly into your project:

1import { Button } from "@geeklego/ui";2 3export default function App() {4  return <Button variant="primary">Click me</Button>;5}

You can also import individual components directly:

1import { Button } from "@geeklego/ui/components/atoms/Button";2import { Modal } from "@geeklego/ui/components/organisms/Modal";

Design System CSS

Import the design token stylesheet in your root CSS file to get all primitives, semantic tokens, and theme overrides (light and dark modes):

1/* globals.css */2@import "tailwindcss";3@import "@geeklego/ui/styles";

Theming

Geeklego supports two built-in themes: light (default) and dark. Switch themes by setting the data-theme attribute on your root HTML element:

<html data-theme="dark">

Toggle dynamically in JavaScript:

document.documentElement.setAttribute("data-theme", "dark");

All tokens automatically adapt — no extra configuration or Tailwind dark: variants needed.

Utilities

The library ships utility hooks and helpers you can import into your project:

1// Keyboard navigation2import { useRovingTabindex, useFocusTrap, useEscapeDismiss, useClickOutside } from "@geeklego/ui/utils/keyboard";3 4// Accessibility helpers5import { getDisclosureProps, getLoadingProps } from "@geeklego/ui/utils/aria";6 7// Security8import { sanitizeHref, getSafeExternalLinkProps } from "@geeklego/ui/utils/security";9 10// Internationalization11import { useComponentI18n } from "@geeklego/ui/utils/i18n";

TypeScript

All components are written in TypeScript with fully typed props. No additional @types packages required.

import type { ButtonProps } from "@geeklego/ui";

What's Next

  • Design Tokens — Learn how the token system works and how to customise it
  • Components — Browse the full component library
  • Skills — Use AI skills to generate components, sync to Figma, and more