Complete Potions Catalog

Browse our full collection of AI-optimized UI component guides. Each potion provides comprehensive specifications that AI agents can use to recreate components in any framework and styling system.

Layouts

Full-page layouts and structural patterns for dashboards, landing pages, documentation layouts, and app shells.

layouts, chat, ai, agent, conversation, messaging, responsive, a11y
A responsive AI agent chat interface layout with message history, input area, typing indicators, and conversation management. Perfect for AI assistants, chatbots, and conversational interfaces.
layouts, landing-page, marketing, hero, feature-highlights, testimonials, cta, responsive, conversion
A conversion-optimized marketing landing page layout with hero section, feature highlights, social proof, and multiple CTAs. Perfect for product launches, SaaS marketing, and lead generation campaigns.
layouts, dashboard, sidebar, responsive, admin
A responsive admin dashboard layout with collapsible sidebar navigation and fixed header. Perfect for admin panels, SaaS applications, and data-driven interfaces.

Components

Reusable UI building blocks including buttons, dialogs, cards, forms, navigation, data tables, and more.

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.
components, file-upload, dropzone, drag-and-drop, forms, a11y, wcag, aria, keyboard-navigation, progress, validation
A fully accessible file upload component with drag-and-drop, browse button fallback, validation (type/size/count), per-file progress, retry/cancel, and robust keyboard and screen reader support.
components, toast, notifications, snackbar, feedback, alerts, a11y, wcag, aria, queue
A non-blocking toast notification system with success/error/warning/info variants, queue management, auto-dismiss, keyboard navigation, and screen reader announcements. Perfect for user feedback after actions.
components, data-table, table, sortable, pagination, filtering, selection, responsive, a11y, wcag, admin, dashboard
A comprehensive data table component with sorting, pagination, filtering, row selection, and responsive behavior. Includes loading, empty, and error states with full keyboard navigation support.
components, navbar, navigation, header, responsive, mobile-menu, sticky, dropdown, a11y
A responsive navigation bar component with mobile hamburger menu, sticky scroll behavior, optional transparent-to-solid transition, and first-class dropdown support. Supports marketing (logo + links + CTA) and app (user menu, notifications) variants.
components, modal, dialog, overlay, focus-trap, a11y, wcag, aria
An accessible modal dialog component with focus trapping, Escape/backdrop dismissal rules, scroll locking, and action footer. Includes confirm/alert variants and responsive fullscreen behavior on small screens.

Features

Complete user-facing features and flows like pricing tables, authentication, e-commerce, onboarding, and search.

features, form, authentication, login, registration, validation, accessibility, forms
Complete authentication forms (login and registration) with real-time validation, error handling, password strength, and accessibility. Demonstrates best practices for form validation UX.
features, pricing, saas, subscription, billing, marketing, responsive, conversion
A responsive 3-tier pricing table component with monthly/yearly billing toggle, highlighted "Most Popular" plan, and feature comparison. Perfect for SaaS marketing pages, product pages, and subscription-based services.

Patterns

Design and interaction patterns including drag-and-drop, infinite scroll, accessibility patterns, and responsive behaviors.

validation, forms, ux, accessibility, error-handling, progressive-disclosure, patterns, user-experience
A comprehensive UX pattern for form validation covering timing strategies, error display, async validation, accessibility, and integration with form libraries.

Tooling

Developer tools and infrastructure including build tools, CLI utilities, third-party integrations, and API patterns.

eslint, linting, config, code-quality, developer-experience, tooling, typescript, accessibility, formatting
A comprehensive ESLint configuration generator supporting React, Vue, Angular, and Svelte with accessibility linting, TypeScript support, and Prettier integration.

Don't See What You Need?

We're constantly adding new potions. Have a suggestion for a component guide?

Contribute a Potion