About UI Potion

The Problem

Traditional UI component libraries have a fundamental problem: maintenance burden. Every framework update, every new pattern, every bug fix requires constant work. And developers still need to adapt the code to their specific project setup.

Our Approach

UI Potion takes a different approach: we don't provide code, we provide specifications.

Each "potion" is a comprehensive guide written specifically for AI coding assistants. It includes:

Detailed component specifications (dimensions, behavior, states)
Responsive breakpoints and mobile patterns
Accessibility requirements (ARIA, keyboard navigation)
Framework-specific implementation patterns (React, Vue, Angular, etc.)
Styling approaches (Tailwind, CSS Modules, Chakra, Material-UI, etc.)
Animation specifications and timing
Testing checklists

How It Works

For Developers

Browse potions on this website to find what you need (e.g., dashboard layout, pricing table, dialog)
Copy the potion URL or JSON link
Tell your AI assistant: "Implement the dashboard layout from this UI Potion guide" + paste link
Specify your stack: "Use React with Tailwind CSS" (or whatever you're using)
AI generates the code adapted to your specific framework and styling preferences

For AI Agents

AI agents can discover potions automatically:

Load the manifest: https://uipotion.com/uipotion-manifest.json
Browse available potions: https://uipotion.com/potions-index.json
Load specific guide: https://uipotion.com/potions/[category]/[potion-id].json
Parse specifications and adapt to user's framework/styling choices
Generate implementation code

Skill-compatible agents can also load UI Potion skills:

UI Potion Consumer - implement from guides
UI Potion Discovery - find the best matching potion

Example Workflow

Developer says:

"I need a dashboard layout with collapsible sidebar. I'm using React and Tailwind CSS. Here's the guide: https://uipotion.com/potions/layouts/dashboard"

AI agent:

Loads the dashboard.json guide
Understands the component structure and specifications
Adapts the patterns to React (useState, useEffect, etc.)
Uses Tailwind utility classes for styling
Generates complete, working code with proper accessibility

Result: Production-ready dashboard layout in minutes, perfectly adapted to your stack.

Framework & Styling Agnostic

UI Potion doesn't care what tools you use. Our guides work with:

Frameworks

React
Vue
Angular
Svelte
Solid
Any other framework

Styling

Tailwind CSS
CSS Modules
Styled Components
Chakra UI
Material-UI
Vanilla CSS
Any styling approach

Benefits

Zero Maintenance

Specifications don't break when frameworks update

Always Current

AI generates code using latest framework patterns

Truly Flexible

Not locked into specific framework versions or styling libraries

Production Quality

Includes accessibility, responsive design, and best practices

Learning Resource

Understand the "why" behind component patterns

JSON Structure

Each potion guide is available as a JSON file for programmatic access. Example structure:

{
  "id": "dashboard-layout",
  "name": "Dashboard Layout with Collapsible Sidebar",
  "aiAgentInstructions": {
    "summary": "...",
    "keyFeatures": [...],
    "implementationSteps": [...]
  },
  "components": {
    "Sidebar": { "dimensions": {...}, "states": [...] },
    "Header": { "dimensions": {...}, "elements": {...} }
  },
  "frameworkPatterns": {
    "react": {...},
    "vue": {...},
    "angular": {...}
  },
  "stylingApproaches": {
    "tailwindCSS": {...},
    "cssModules": {...}
  },
  "accessibility": {...},
  "testingChecklist": [...]
}

Contact & Support

Have questions or want to contribute?

GitHub Issues: Report bugs or request features
GitHub: github.com/uiPotion
X: @uipotion · @thejulianio

Get Started

Browse Potions

For legal information, please see our Disclaimer and Privacy Policy.