UI Potion Logo UI Potion

UI Potions That Blend with Your Stack

Works with any AI coding assistant and your tools. No dependencies, no installation, no library management—just paste a link and build.

Browse Potions How It Works Potion Kit

AI Agent Discovery URL:

https://uipotion.com/uipotion-manifest.json

Available Potions

Each potion is a detailed guide that AI agents can use to recreate UI components in any framework.

Documentation Website Layout
layouts, documentation, sidebar, table-of-contents, responsive, search, scroll-spy, a11y
A three-column documentation website layout with hierarchical sidebar navigation, prose content area, and scroll-spy table of contents. Inspired by Next.js docs, Nextra, Docusaurus, and Mintlify. Designed for developer documentation, knowledge bases, and technical reference pages.
Read more
Command Palette
components, command-palette, command-menu, omnibox, keyboard-shortcuts, fuzzy-search, productivity, a11y, aria
An accessible command palette component for keyboard-first navigation and action execution, with fuzzy search, grouped results, recent commands, and role-aware command visibility.
Read more
Dark/Light Mode Pattern - Theme Switching and Color Schemes
patterns, dark-mode, light-mode, theme, color-scheme, accessibility, design-tokens, responsive
A framework-agnostic pattern for implementing dark and light theme switching with system preference detection, user override persistence, semantic color tokens, and accessibility compliance.
Read more
Tabs Component
components, tabs, navigation, segmented-content, a11y, aria, keyboard-navigation, responsive, scrollable
An accessible tabs component for horizontal and vertical layouts with fixed or scrollable tab lists, keyboard navigation, optional manual activation, responsive behavior, and robust overflow handling for many tabs.
Read more
Blog Layout (List and Post)
layouts, blog, article, post, content, responsive, sidebar, pagination, newsletter
A comprehensive blog layout covering the list frontpage (post cards, grid, pagination) and single post layout (article, sidebar, comments, related posts). Includes all UI sections typically needed in blogs.
Read more
Button
components, button, cta, a11y, wcag, aria, focus-visible, loading, icon-button, states, variants, forms
A foundational, accessible Button component with semantic variants, sizes, icon-only support, loading/disabled states, and optional link/toggle behavior. Designed to map cleanly into existing design systems via tokens.
Read more
View All Potions

Why UI Potion?

🤖 Built for AI Agents

Guides written specifically for AI coding assistants to understand and implement, not just copy-paste code.

🎨 Works with Any Stack

React, Vue, Angular, Svelte, or any framework. AI adapts the specifications to your exact technology stack.

🚀 Zero Maintenance

No code libraries to maintain or update. Just specifications that never break when frameworks evolve.

📐 Complete Specifications

Comprehensive guides with exact dimensions, behaviors, accessibility requirements, and responsive breakpoints.

⚡ Always Current

AI generates code using the latest framework patterns and best practices, always up-to-date with your stack.

🎯 Your Styling, Your Way

Tailwind CSS, CSS Modules, Chakra UI, Material-UI, or any styling approach. AI adapts to your preferences.

How to Use

1

Find a Potion

Browse the catalog and find the UI component you need

2

Share with AI

Paste the potion URL or JSON link to your AI coding assistant

3

Customize & Generate

Tell AI your framework and styling preferences, it handles the rest

Or use Potion Kit: a CLI that lets you chat with AI to build Harold + UI Potion sites; the model uses only real potion specs from the catalog.