Geeklego logoGeeklego

Components built on a design system

A design-system-first component library built to streamline your digital workflows and keep your team focused on what truly matters.

--color-brand
--font-size
--spacing
--radius
--shadow
01Primitives — raw values
02Semantics — intent-mapped
03Component — scoped
Button
Get Started
Walking for 8 weeks
Avg this week10,276 steps
12345678
Input
Placeholder…

Build like lego, ship like a team

Components, tokens, and documentation in one cohesive system — built for React and TypeScript teams.

variant="primary" size="md"
rounded="full" icon=true
🧱
Get started
SecondaryGhost

Composable Components

Drop-in accessible React components — buttons, inputs, cards — built to snap together like lego bricks.

foreground
primary
brand
background
border
muted
geeklego.css imported

Design Tokens

One unified token layer for colors, spacing, and typography. Your single source of truth, everywhere.

button.mdx
import { Button } from '@geeklego/react'|
## Button
Primary action component.
<Button variant="primary">
  Get started
</Button>
PreviewGet started

Live MDX Documentation

Every component ships with interactive docs, prop tables, and syntax-highlighted examples powered by MDX and Shiki.

Light
System
Dark
data-theme="light"

TypeScript + Dark Mode

Fully typed with TypeScript. Dark mode built-in via data-theme attribute — no extra config needed.

Tweak once, update everywhere

Design tokens live in one CSS file. Change a value in the token editor and every component reflects it instantly — no hunting through stylesheets.

Token Editor

geeklego.css
/* Design tokens */
--color-primary:#155dfc
--spacing-md:16px
--radius-lg:12px
live · single source of truth
live preview
Design System
@geeklego/ui
v1.0
AtomsTokensTypography

Every layer, intentional

Atoms compose into molecules, molecules into organisms. Each level is independently documented, tested, and typed.

01
Atoms
Smallest indivisible units
02
Molecules
Atoms bonded with purpose
03
Organisms
Complex sections with behavior
04
Templates
Page structures without content
05
Pages
Fully realized experiences

Skills that do the work.

From generating production components to syncing your design system and auditing for XSS — built-in skills automate the hard parts so your team ships faster.

/component-builder

One command.
Five production files.

Run /component-builder and get a complete 5-file component — implementation, types, Storybook stories, mock data, and MDX docs — already wired to the design token system.

5 files1 commandproduction-ready

Skills

claude > /component-builder
Dropdown.tsx
tsx
Dropdown.types.ts
ts
Dropdown.stories.tsx
tsx
mock-data.json
json
Dropdown.docs.mdx
mdx
ready
/figma-sync
01 · Primitives
02 · Semantic
03 · Component
Text styles
Screenshot verify
ready

Code to Figma, automated.

Syncs design tokens, text styles, and components from your codebase directly into Figma collections — no manual handoff required.

/security · xss-scan
XSS scan
Sanitization
OWASP injection
CSP headers
Input validation
ready

XSS-free by default.

Audits every component for XSS vectors, OWASP injection, and unsafe inputs — before it ever reaches production.

Let's Build Together

Contact Us

AI-native, open-source, and built for teams who care about design. Explore the docs, star the repo, or reach out — we'd love to hear what you're building.