Skip to content
pycolors
PyColors BlocksPreview + source

Build the next screen. Own the code.

React patterns for authentication, billing, settings, and data. Try each Block, explore its source, and make it part of your application.

Explore BlocksIntegration guide

17 documented Blocks

Complete compositions built with PyColors UI.

6 product categories

Find the interface your product needs next.

Preview, then copy

Try the interactions and bring the source into your app.

Choose the interface you need next

Choose a category, try the preview at different screen sizes, then copy the complete source. Each Block links to its integration guide.

Application shells

2 Blocks
Back to categories

AI chat

A controlled conversation with streaming, stop, retry and honest copy feedback. Bring your own messages and transport; copy the complete source.

Documentation
Local demo — no AI request

Conversation

Your context. Your next step.

A clear place to start

What are you working on?

Start with a question, an idea, or a problem to work through.

Ready when you are.

Reference file

UTF-8 .txt or .md · 1 file maximum · 512 KiB per file

Read in this browser only. No upload or storage. Choose a non-sensitive file; its visible name may appear in confirmed JSON, never its contents.

Responses, agent drafts and Work states are fixed examples. Only the exact agent sample requests open a definition. A file is read only when you choose Read locally; it is not analyzed by a model. Nothing is sent to a provider or stored remotely. Confirmed definitions can be copied or downloaded locally.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Responsive sidebar

An application shell with desktop navigation, a mobile Sheet and a consumer-owned router adapter. Keep your brand, navigation and page content in your application.

Documentation
Skip to content

Overview

Your workspace, at a glance.

Keep track of projects and the work that matters next.

Active projects
3
Team members
3

Project activity

3 projects

  • Website redesign

    Design

    72% complete

  • Platform release

    Engineering

    48% complete

  • Brand guidelines

    Marketing

    100% complete

Fictional workspace · Changes stay in this preview.

Explore Blocks

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Authentication

3 Blocks
Back to categories

Sign in

Present credentials, provider actions, errors and recovery links without moving authentication state or session behavior into the Block.

Documentation

Sign in

Use your workspace account to continue.

Interactive preview only. No network request is performed.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Sign up

Compose account creation, provider actions and consent copy while keeping validation, account persistence and authentication consumer-owned.

Documentation

Create your account

Create a workspace account with application-owned behavior.
By continuing, you accept your application's terms and privacy policy.

Interactive preview only. No network request is performed.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Password recovery

Present a recovery form, status, errors and help content while your application owns reset tokens, email delivery and password updates.

Documentation

Recover your account

Enter the email associated with your workspace account.
Use the address your application recognizes.

Interactive preview only. No network request is performed.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Commerce

4 Blocks
Back to categories

Pricing plans

Compare offers with clear prices, billing terms, features and consumer-owned actions. Request a billing-period change without handing over pricing or payment logic.

Documentation

Explore the pricing pattern

Fictional offers only, not PyColors product prices. No purchase or network request occurs.

  • Launch

    A fictional offer for a small project.

    $12 / month

    Fictional monthly charge. No purchase is available.

    • One sample project
    • Sample export tools

  • Studio

    Featured example

    A fictional offer for a growing team.

    $29 / month

    Fictional monthly charge. No purchase is available.

    • Ten sample projects
    • Sample collaboration tools
    • Sample export tools

  • Custom

    An example of a non-numeric, consumer-owned price.

    Let's talk

    Scope and terms would be agreed separately.

    • A tailored sample scope

    This disabled action does not contact a team.

Choose an example to preview a consumer-owned action.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Billing overview

Summarize plan, billing cadence, status, renewal and payment details while your application remains the source of truth for billing state and actions.

Documentation

Billing

Your plan, renewal date and payment details. Fictional demo data.
Plan
Growth example
Billing
Monthly
Status
Active
Renews
October 15
Payment method
Visa ending in 4242

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Payment method

Present a payment method, expiry, billing contact and status with consumer-owned actions and no hidden provider or payment mutation behavior.

Documentation

Payment method

The payment method used for your workspace. Fictional demo data.
Default
Method
Visa ending in 4242
Expires
10 / 28
Billing contact
billing@example.com

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Invoice history

Show invoice dates, amounts, statuses and row actions in a readable table while retrieval, documents and authorization stay application-owned.

Documentation

Invoice history

A clear record of your workspace billing. Fictional demo invoices.
Invoice history
DateAmountStatusAction
September 1, 2026$49.00Paid
August 1, 2026$49.00Paid

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Account & workspace

5 Blocks
Back to categories

Onboarding checklist

Guide new users through workspace setup with clear steps, progress and meaningful next actions. Your application owns completion, navigation and persistence.

Documentation
A great workspace starts here

Track the first steps that help your team get started.

1 / 3

  1. Create your workspace

    Completed

    Give your team a shared place to work.

  2. Set up your first project

    To do

    Add a project to organize your next release.

  3. Bring your team together

    To do

    Choose the people who will collaborate with you.

Demo only · 1 of 3 steps completed locally. No workspace, project or invitation is created.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Settings panel

A controlled settings form with labelled fields, validation messages and submission feedback. Your application owns values, validation and persistence.

Documentation

Account settings

Update the profile and workspace details your product displays.

Profile

Choose the details collaborators see in shared work.

Use the name people recognize when working with you.

A short, public-facing description of your role.

Workspace

Keep the shared workspace identity clear and current.

Shown in navigation and shared workspace surfaces.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Workspace members

Present workspace members with readable role and status labels and native actions. Keep identities, permissions, member changes and focus under your application's control.

Documentation

Fictional local example. No invitations, permission changes, requests or emails are sent. Nothing is saved. Actions only select a sample member.

Example workspace members

Names, roles, statuses and actions are supplied by this demo, not inferred by the Block.

Read UI setup

  • Alex Morgan

    alex@example.com

    Role
    Workspace owner
    Status
    Active example

  • Jordan Lee

    Role
    Project observer
    Status
    Awaiting review example

  • Casey Park — a deliberately long fictional member name for a narrow workspace

    casey.long.example.address@example.com

    Role
    External collaborator with a deliberately long role label
    Status
    Unavailable example action

No example member selected.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Workspace invitations

Present invitation recipients, roles, status, sent and expiry dates with consumer-owned actions while delivery, tokens and membership mutations remain application-owned.

Documentation

Pending invitations

Fictional invitations supplied by the preview consumer.

  • sam@example.com

    Example recipient

    Role
    Editor
    Status
    Pending
    Sent
    Expires

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Audit log

Present ordered workspace activity, timestamps, details, filters and actions while event collection, retention, permissions and audit integrity remain application-owned.

Documentation

Recent activity

Fictional workspace events supplied by the preview consumer.

  1. Alex Morgan updated workspace settings

    Changed the workspace display name.

  2. Sam Lee reviewed billing access

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Data & records

2 Blocks
Back to categories

Stats overview

Give your dashboard a clear summary with key metrics, comparison labels and reporting periods. Your application owns the values, formatting and calculations.

Documentation
Workspace overview

A snapshot of your team's progress. Fictional demo data.

September 1–30, 2026

Active projects
24
Up 4 from August

Across all workspace teams

Team members
12
Up 2 from August

Members with workspace access

Tasks completed
186
Up 18% from August

Completed during September

Overdue tasks
7
Up 3 from August

Past their planned due date

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Data table

Search, filter, sort and paginate records with a clear path out of empty results. Reuse controlled query and page-size controls while keeping your data layer and row actions.

Documentation

Showing 1–2 of 6 matching records.

Searchable sample records
UpdatedRecord actions
NorthwindAvailableToday
ContosoPausedYesterday

Local example only. No request is sent or data saved.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Feedback & states

1 Block
Back to categories

Empty state panel

Give an empty section a clear next step, from first use to no matching results. Keep content, native actions, state and focus under your application's control.

Documentation

Fictional local example. No project is created, request sent or data saved. The controls only change the preview below.

Example projects

Start a project

Give your workspace its first project. This preview only reveals a fictional sample; it does not create a record.

Read UI setup
No-action and disabled-action examples

Example activity

Nothing to show yet

There is no useful action to offer here. Omit both actions rather than showing a disabled placeholder.

Example reports with a longer workspace heading

Your report workspace is waiting for its first entry

This intentionally longer description demonstrates content wrapping. A disabled control is presentation only, never proof of a permission or a substitute for server-side authorization.

Demo uses fictional local state only. Copy the source, then connect your app’s data and actions.

Need the complete application foundation?

Use Blocks when you want one pattern in an existing application. Choose Starter Free or Starter Pro when you need a broader SaaS foundation instead of assembling screens one at a time.

Compare StartersContinue with Blocks