Every developer building AI features eventually runs into the same problem:
You start with a text input and a submit button.
A few weeks later, you need:
- Prompt suggestions
- Regenerate actions
- Model selection
- Attachments
- Citations
- Streaming responses
- Variations
- Cost estimates
- AI disclosure
- Memory controls
- Verification steps
And suddenly you're not building one AI feature anymore. You're building an entire AI interface system.
That's the idea behind PatternBase: an open source, copy and paste React component library implementing 54 AI UX patterns, sourced from shapeof.ai's taxonomy, across Ant Design, Mantine, and shadcn/ui, with a shared TypeScript API.
AI products keep reinventing the same UI
Most AI applications look different on the surface, but underneath they share the same interaction patterns.
A coding assistant:
Prompt input
Suggestions
Attachments
Streaming response
Citations
Regenerate
A writing assistant:
Prompt input
Tone controls
Variations
Rewrite actions
Disclosure
An AI agent:
Prompt input
Memory
Verification
Action plans
References
These aren't random UI elements. They're recurring patterns, and shapeof.ai has already done the work of cataloguing them from a design perspective. PatternBase takes that taxonomy and answers the question developers actually have:
How do we turn these patterns into components you can actually drop into a codebase?
Why I built PatternBase
I work mostly with React ecosystems: Ant Design, Mantine, shadcn/ui, Next.js, TypeScript.
One thing I kept noticing: switching UI libraries meant rebuilding the same interaction logic. A team on Ant Design builds <Citation />. A team on Mantine builds the same concept from scratch. A team on shadcn/ui does it again. The visual implementation changes. The interaction pattern doesn't.
PatternBase separates those concerns:
AI Pattern
↓
Shared TypeScript API
↓
Ant Design · Mantine · shadcn/ui
So instead of rebuilding <Citation />, <Disclosure />, and <Verification /> for every UI stack, you think in terms of the pattern once and swap implementations underneath it.
What's inside
54 patterns, grouped into five categories:
Prompt Actions
Actions users ask AI to perform: OpenInput, Regenerate, Transform, Expand, Summary, Describe, Restructure, Restyle, and more.
Wayfinders
Patterns that help users discover what AI can do: Suggestions, FollowUp, Templates, Gallery, PromptDetails, Randomize.
Tuners
Controls that adjust AI behavior: ParameterControl, ModelManagement, Attachments, Filters, Modes, PromptEnhancer, VoiceAndTone.
Governors
Patterns that provide visibility and control: Citation, StreamOfThought, Variations, CostEstimate, References, Verification, Memory.
Trust Builders
Patterns that improve transparency: Disclosure, Caveat, Consent, DataOwnership, Footprints, IncognitoMode, Watermark.
One pattern, three renders
Every pattern component has identical props across all three frameworks. Pick your UI library, the API doesn't change:
// Ant Design
import { OpenInput, Suggestions } from "@patternbase/antd";
// Mantine
import { OpenInput, Suggestions } from "@patternbase/mantine";
// shadcn/ui
import { OpenInput, Suggestions } from "@patternbase/shadcn";
The goal isn't to hide the UI library. It's to give AI interactions a shared vocabulary that survives a framework switch.
You can see this live on the docs site: every pattern page has a framework toggle, so you can flip between Ant Design, Mantine, and shadcn/ui and watch the same component render again in each one.
How it works: copy, not install
PatternBase isn't an npm package you add to package.json. It's a copy-and-paste library, closer to shadcn/ui's model than to a traditional component library:
- Find a pattern on the docs site.
- Open the Code tab and pick your framework (Ant Design, Mantine, or shadcn/ui).
- Copy the component into your project.
The code is yours from that point. No version to bump, no library update that silently changes behavior under you. @patternbase/core holds the types, hooks, and utilities that don't depend on any single framework, the ones the copied components lean on, so bring that dependency in as needed.
The architecture
PatternBase is a pnpm workspace / Turborepo monorepo:
packages/
core/ types, hooks, state management (not tied to a framework)
antd/ Ant Design implementations
mantine/ Mantine implementations
shadcn/ shadcn/ui implementations
apps/
docs/ live pattern previews, prop tables, code snippets
@patternbase/core keeps interaction logic separate from rendering, so a Citation component in Ant Design and a Citation component in shadcn/ui share the same underlying hooks. They just render differently.
Why not just build these yourself?
You can, and most teams do. But AI interfaces are developing their own vocabulary, the same way web apps eventually standardized around tables, modals, forms, and notifications. AI products are converging around open inputs, suggestions, citations, variations, verification, memory, disclosure.
The more these patterns repeat, the more useful it is to have a copy-and-paste reference for each one: implemented once per framework, documented, and ready to adapt rather than started from a blank file.
Try it
- Docs & live previews: pattern-base.netlify.app
- Source: github.com/design-sparx/pattern-base
- Taxonomy this is built on: shapeof.ai
This is a project still in its early days: one contributor, actively growing. If you're building AI products with React, I'd love to hear which patterns you keep rebuilding, and which ones are missing.
MIT licensed. Contributions welcome.
Top comments (0)