Skip to main content
One command installs complete features with React components and Convex backend functions. Build faster, ship sooner.

​
What is Convex UI?

Convex UI is a collection of copy-paste components built on shadcn/ui design patterns that integrate seamlessly with Convex. Each component includes:
  • React frontend components styled with Tailwind CSS
  • Convex backend functions with queries, mutations, and schema
  • Full TypeScript support for end-to-end type safety
  • Framework flexibility for Next.js, React, TanStack Start, and React Router v7

Authentication

Complete password-based and social OAuth flows using Convex Auth. Includes login, signup, password reset, and protected routes.

File Storage

Drag-and-drop file uploads powered by Convex Storage. Built-in progress tracking and file validation.

Realtime Chat

Instant messaging with automatic sync. Messages update across all clients in real-time with zero configuration.

Realtime Cursors

Collaborative presence indicators. Show where other users are pointing for multiplayer experiences.

​
Why Convex UI?

​
Realtime by default

Convex provides reactive queries out of the box. When data changes anywhere, your UI updates automatically—no polling, no WebSocket configuration, no cache invalidation. 
// This component automatically re-renders when messages change
const messages = useQuery(api.messages.list, { roomId: "general" });
The realtime connection is built into every component, powering features like live chat, presence indicators, and collaborative editing.

​
Full-stack in one command

Each component includes both frontend and backend code. No separate API layer to build or maintain. 
npx shadcn@latest add "https://convex-ui.vercel.app/r/realtime-chat-nextjs"
This single command installs:
  • React components in src/components/
  • Convex functions in convex/
  • Database schema definitions
  • All required dependencies
Your code, your control. Unlike npm packages, these components copy directly into your project. Customize styles, logic, and backend functions however you need.

​
Framework support

Works with your preferred React framework:
FrameworkStatusAuthStorageRealtime
Next.js✅ Full✅✅✅
React (Vite)✅ Full✅✅✅
TanStack Start✅ Full✅✅✅
React Router✅ Full✅✅✅
Each framework variant includes routing patterns, middleware, and configurations specific to that environment.

​
Component architecture

Every Convex UI component follows this structure: 
your-project/
├── src/components/          # React UI components
│   ├── login-form.tsx
│   └── realtime-chat.tsx
├── convex/                  # Backend functions
│   ├── schema.ts           # Database tables & indexes
│   ├── auth.ts             # Authentication config
│   ├── messages.ts         # Queries & mutations
│   └── presence.ts         # Realtime presence
└── .env.local              # Environment variables
Components are self-contained but composable. Mix and match features to build exactly what you need.

​
Available components

​
Authentication

Password Auth

Email/password login with signup, password reset, and email verification flows.

Social Auth

OAuth with GitHub and Google. Extensible for additional providers.

​
Realtime features

Chat

Real-time messaging with message history and typing indicators.

Cursors

Show live cursor positions for collaborative experiences.

Avatar Stack

Display online users with presence tracking.

​
Storage

Dropzone

Drag-and-drop file uploads with progress tracking and validation.

​
How it works

Convex UI uses the shadcn/ui registry system to deliver components:
1

Install a component

Run the add command for your framework:
npx shadcn@latest add "https://convex-ui.vercel.app/r/password-based-auth-nextjs"
2

Files are copied to your project

  • React components → src/components/
  • Convex functions → convex/
  • Dependencies installed automatically
3

Start Convex dev server

npx convex dev
Backend functions deploy automatically with hot reload.
4

Use the component

Import and use like any React component:
import { RealtimeChat } from "@/components/realtime-chat";

export default function ChatPage() {
  return <RealtimeChat roomName="general" username="Alice" />;
}
Components are installed locally, so you can customize anything—styles, validation logic, backend queries, or database schema.

​
Attribution

Convex UI is based on the Supabase UI Library (Apache 2.0). The original work has been adapted to use Convex as the backend platform.

​
Next steps

Quick Start

Set up your first Convex UI component in under 5 minutes

FAQ

Common questions about installation, frameworks, and troubleshooting

Build docs developers (and LLMs) love

Get started for freeTalk to us