Skip to content
pycolors
PyColors UIv1.7.0

Build your interface. Make it yours.

React components and semantic colors for dashboards, forms, and settings. Explore the UI, shape your theme, and bring it into your Next.js app.

Start buildingTry the components
  • Open source · MIT
  • Light and dark
  • Semantic color tokens
  • Keyboard interactions
@pycolors/ui npm version@pycolors/ui npm downloads@pycolors/ui license

Versioned · documented · tested · actively maintained

View on GitHub

Live components

Try a conversation
Preview mode
Customize colors

Your theme in use

One palette, from workspace settings to assistant conversations. Try the controls, then see how the same theme brings a conversation together.

Interactive demo
Accent12 shades
Neutral12 shades

Actions & feedback

Each action is a local demo.

Ready for review
Your team can review the latest changes.

Notifications

ActiveIn reviewDraft

Workspace settings

Inputs, focus, and validation in one place.

A sample field for your theme preview.

Changes stay in this preview.

Navigation & content

Northstar Studio

Sample team workspace

Type & hierarchy

Make room for great work.

Bring your projects, people, and progress into one place. A shared visual language makes every detail feel connected.

--background
#FAFAFA
--foreground
#121116
--primary
#6A30D4

Conversation primitives · Free UI

Your assistant. Your visual language.

The same colors, typography and controls, now in a conversation. Switch the appearance above, copy a response or add sample messages.

  • AIConversation

    Follow new messages while keeping your place when you scroll back.

  • AIMessage

    Compose an author, message content and optional actions.

  • AIMessageActions

    Copy a response with visible success and retry feedback.

Check the guides for package-version availability. Compose these with AIComposer; your app supplies the model connection.

Product assistant

Sample conversation · No model connected

  1. You

    How can I make my first assistant interface easier to use?

  2. Assistant

    Start with one useful flow. Keep messages readable, copying recoverable, and the reader in control of scrolling.

2 sample messages · Stored only in this preview.

Scroll back, then add an exchange. Choose Jump to latest when you are ready to catch up. Copy writes sample text to your clipboard.

Demo content · Built with public PyColors components.

Open UI Explorer

The component library

Small pieces. A consistent product.

Start with the primitives you need. Each component has usage examples, props, and guidance in the documentation.

Browse all components
UI library
3 components

Actions

Make the next step clear.

UI library
2 components

Overlays

Keep focused tasks in context.

UI library
2 components

Data

Organize records and navigation.

UI library
4 components

Feedback

Show progress, results, and next steps.

UI library
3 components

Structure

Give every screen a shared language.

Your colors, across every surface

Make the system feel like your brand.

Choose your brand color, neutrals, and typography in Theme Builder. Explore the palette, try it on components or a dashboard, and export CSS or JSON for both modes.

Brand colorsNeutral surfacesTypography
Open Theme BuilderTheming guide

One palette. Two modes.

Violet preset

Light appearance

12 accent shades
BackgroundTextPrimary

Dark appearance

12 accent shades
BackgroundTextPrimary

Preview your palette and review color contrast in Theme Builder before using it in your app.

From preview to your project

Start with one component.

Add the components and tokens to your React or Next.js app. Follow the installation guide to configure Tailwind v4, then build your first screen.

  1. 01

    Install the packages

    Add the components and shared color tokens.

  2. 02

    Connect your styles

    Load the token CSS and configure Tailwind v4.

  3. 03

    Build your first screen

    Import a component and check both color modes.

Read the installation guide
Terminal
pnpm add @pycolors/ui @pycolors/tokens
save-button.tsx
import { Button } from "@pycolors/ui";export function SaveButton() {  return <Button>Save changes</Button>;}
After the stylesheet setup in the installation guide. Button documentation

Keep building from here.

Use the UI in your existing app, compose a screen, or start with a complete foundation.

See product examples
Free UI

Compose an assistant interface

Explore conversation, message and copy-feedback primitives alongside AIComposer. Check the guide for package-version availability; your application supplies the model connection.

Try conversation primitives
Patterns

Compose a screen

Explore layout patterns for settings, dashboards, and everyday product flows.

Explore patterns
Starter Free

Start with an app

See the components inside a runnable Next.js interface with Starter Free.

Explore Starter Free
Starter Pro

Connect the business layer

Explore Starter Pro for authentication, Stripe billing, and protected product routes.

Explore Starter Pro