Catalog
The Magic Patterns Catalog is an open-source website that lists the most popular React component libraries, helping you find the perfect component.
Install / Use
/learn @magicpatterns/CatalogREADME
The Catalog by Magic Patterns
<p align="center"> <p align="center">Discover the perfect component from a variety of design systems from the <a href="https://www.magicpatterns.com/">Magic Patterns</a> <a href="https://www.magicpatterns.com/catalog">Catalog</a>. </p> </p> <h4 align="center"> <a href="https://www.magicpatterns.com/">Magic Patterns</a> | <a href="https://join.slack.com/t/magic-patterns/shared_invite/zt-1ps2xtxh0-2NaixFfFzSKZbr5gw_AHfA">Community Slack</a> </h4> <h4 align="center"> <a href="https://github.com/"> <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen" alt="PRs welcome!" /> </a> <a href="https://join.slack.com/t/mirrorful/shared_invite/zt-1ps2xtxh0-2NaixFfFzSKZbr5gw_AHfA"> <img src="https://img.shields.io/badge/chat-on%20Slack-blueviolet" alt="Slack community channel" /> </a> <a href="https://twitter.com/magicpatterns"> <img src="https://img.shields.io/twitter/follow/magicpatterns?label=Follow" alt="Magic Patterns Twitter" /> </a> </h4> <h4 align="center"> <a href="https://www.producthunt.com/posts/patterns-5?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-patterns-5" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=412621&theme=light&period=daily" alt="Patterns - Find the perfect component | Product Hunt" style="width: 200px; height: 50px;" width="150" height="27" /></a> </h4> <img src="./public/collection.png" width="100%" alt="Catalog" />Generating UI with Magic Patterns
Magic Patterns helps engineers ship faster by generating frontend code from your React component library.
If you are interested in learning more about generating UI from your design system, feel free to book a meeting with us:
<a href="https://cal.com/adanilowicz/generating-custom-ui-with-patterns"><img alt="Schedule a meeting" src="https://cal.com/book-with-cal-dark.svg" /></a>
Join our community of designers and engineers!
Related Skills
bluebubbles
345.4kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
slack
345.4kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
claude-opus-4-5-migration
104.6kMigrate prompts and code from Claude Sonnet 4.0, Sonnet 4.5, or Opus 4.1 to Opus 4.5
frontend-design
104.6kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
