About Magoo Component UI

Magoo Component UI is a library of CSS-less, skeleton UI components whose primary consumer is an AI agent. Instead of regenerating boilerplate for every task, an agent browses this catalog, picks the components that fit, and copies their structure and behavior — saving tokens and keeping markup consistent.

Core ideas

• Single canonical source per component. Author once; a generator emits every target — Drupal SDC, Drupal Code Components (Preact), React, Vue, and Storybook. No hand-porting.
• Components ship no CSS. Markup is pure tokenized Tailwind bound to CSS-variable design tokens; interactivity is vanilla JS by default.
• One theme contract, many looks. Every theme shares one fixed set of CSS-variable names — only the values differ. Switch a component between all four themes right here in the preview.
• Granular catalog. One component per concept (a podcast card is not a movie card is not a product card), each modestly configurable via props.
• Drupal-first mapping. Every component maps to a Drupal paragraph type + fields + Twig template, with importable config YAML.

How to explore

• Components — browse the full catalog. Filter by category, search, and switch the preview theme and breakpoint. Your filters and page live in the URL, so a view is shareable and survives reload.
• Examples — full pages assembled from catalog components (a blog post, a marketing landing page, a news homepage), each viewable across every theme and breakpoint.

The preview is a static Astro site generated from the catalog. Everything you see is rendered from the same canonical component sources the generator targets.