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.

AI Response Rendering Pattern - Streaming, Tool Calls, and Optional Reasoning
patterns, ai, streaming, markdown, tool-calls, reasoning, citations, artifacts, a11y
A framework-agnostic pattern for rendering an AI assistant reply: streaming tokens, incremental Markdown, code blocks, tool-call cards, citations, artifacts, and recovery from mid-stream errors. Optional reasoning-status surface when the provider explicitly exposes it. Companion to the AI Agent Chat Layout.
Read more
Ecommerce Product Page
layouts, ecommerce, merchandising, product-page, product-detail-page, pdp, conversion, reviews, responsive
A conversion-oriented ecommerce product detail page layout with media gallery, buy box, variant selectors, shipping and returns context, reviews, and mobile sticky purchase actions.
Read more
Sidebar Navigation
components, sidebar, navigation, collapsible, multi-level, responsive, overlay, a11y
A responsive sidebar navigation component with collapsible icon-only mode, multi-level nested groups, badge support, inline search, and mobile overlay. The primary navigation pattern for SaaS dashboards, admin panels, and application shells.
Read more
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
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 scaffold and chat-build Harold + UI Potion sites; the model uses only real potion specs from the catalog.