COHERENCE · DESIGN LIBRARY

Find the right pieces for real screens.

A working collection of screen and component examples for Content, Mission Control, PM, Hub Chat, the shared foundation and selected effects.

How to read this: “Candidate” means the linked example and its stated stack are promising. It has not passed a render, keyboard, phone, light/dark or license check inside Coherence. “Owned” means the Admin Kit source is already available on the build server. The first build pass starts with Content.
Content

Content

6 screen and component references

CandidateNot owned

Shadcn UI Kit · calendar

Interactive month grid; slot rules and Topic picker handoff remain Coherence work.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
Content calendar, posting times
CandidateNot owned

Shadcn UI Kit · kanban

Board/list/table presentation and cards; map our own stages and review rules.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
Content production board
ReferenceNot owned

Shadcn UI Kit · social media

Feed and engagement layout, not post creation or publishing logic.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
Content feed and post preview
CandidateNot owned

Shadcn UI Kit · examples

Live component examples; choose individual patterns before integration.

Stack
React · Tailwind · shadcn
Coherence screens
Content post cards, task cards, review cards
CandidateNot owned

Shadcn UI Kit · mail

Inbox shell, list/detail split and triage; approval remains custom.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
Content review inbox
CandidateNot owned

Untitled UI React · components

Component catalogue. Check each chosen component’s license and React 19/Tailwind 4 behaviour.

Stack
React · Tailwind · Radix-compatible
Coherence screens
Content forms, media picker, filters
Mission Control

Mission Control

7 screen and component references

Parts onlyNot owned

Shadcn UI Kit · AI chat

Use message and composer ideas inside Mission Control’s own layout.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
Mission Control assistant parts
Parts onlyNot owned

Shadcn UI Kit · AI chat v2

Alternative composer and conversation controls; not a full-page chat design.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
Mission Control model and prompt controls
CandidateNot owned

Shadcn UI Kit · workflow automation

Node canvas and keyboard hints; the actual agent workflow is Coherence-specific.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
Mission Control workflow view
CandidateOwned · licensed kit on build server

Shadcnblocks Admin Kit · agent activity

Owned visual reference for an agent activity timeline. Verify route and local export before using.

Stack
Next.js · React · Tailwind · shadcn
Coherence screens
Mission Control activity and tool steps
Parts onlyNot owned

Vercel Chatbot · source

Reusable interaction patterns only. Do not copy the full chat page.

Stack
Next.js · React · Tailwind · AI SDK
Coherence screens
Mission Control streaming, tool steps, attachments, model picker
CandidateNot owned

ElevenLabs UI · orb

Audio-reactive orb with idle, listening, thinking and talking states. Test performance and accessibility.

Stack
React · Three.js · React Three Fiber · shadcn CLI
Coherence screens
Screen Buddy voice state
CandidateNot owned

ElevenLabs UI · voice parts

Voice button, waveform, transcript and picker examples.

Stack
React · Tailwind · shadcn-compatible
Coherence screens
Screen Buddy voice input and playback
PM

PM

4 screen and component references

CandidateNot owned

Shadcn UI Kit · tasks

Sortable task table, status and priority patterns; replace demo records and rules.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
PM task list and filters
CandidateNot owned

Shadcn UI Kit · calendar

Calendar views for due work; distinct from Content posting times.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
PM schedule
CandidateNot owned

Shadcn UI Kit · kanban

Board/list/table patterns; project state and permissions remain custom.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
PM board
CandidateNot owned · MIT source

Studio Admin · productivity

Open-source multi-screen reference with matching stack; inspect individual routes in demo.

Stack
Next.js 16 · React 19 · Tailwind 4 · shadcn/Radix
Coherence screens
PM overview, tasks, calendar and board
Hub Chat

Hub Chat

2 screen and component references

CandidateNot owned

Shadcn UI Kit · chat

Conversation UI reference for Hub Chat. This is separate from Mission Control.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
Hub Chat conversation list and messages
CandidateNot owned

Shadcn UI Kit · mail

List/detail and triage layout.

Stack
Next.js 16 · React · Tailwind 4 · shadcn
Coherence screens
Hub Chat inbox and message detail
Foundation

Foundation

4 screen and component references

CandidateNot owned

Shadcn UI Kit · examples

Real rendered examples to compare against packages/ui tokens.

Stack
React · Tailwind · shadcn
Coherence screens
Shared cards, menus, forms and charts
OwnedOwned · licensed kit on build server

Shadcnblocks Admin Kit · live demo

Use the owned code as the first source for common patterns; confirm component export.

Stack
Next.js · React · Tailwind · shadcn
Coherence screens
Shared shell, cards, tables and navigation
CandidateNot owned · MIT source

Studio Admin · default dashboard

Compatible open-source reference; adapt to Coherence tokens.

Stack
Next.js 16 · React 19 · Tailwind 4 · shadcn/Radix
Coherence screens
Shared shell, tables and settings
CandidateNot owned · open source

Kokonut UI · inputs

Live input examples; install each component into the shared system only after interaction checks.

Stack
React · Next.js · Tailwind 4 · shadcn-compatible
Coherence screens
Shared inputs, upload and picker controls
Effects

Effects

5 screen and component references

CandidateNot owned

Magic UI · components

Keep effects rare and purposeful.

Stack
React · Tailwind · shadcn-compatible
Coherence screens
Screen Buddy emphasis and selected moments
CandidateNot owned

Motion Primitives · text loop

Example with live preview and install path.

Stack
React · Motion · shadcn-compatible
Coherence screens
Screen Buddy short changing status
CandidateNot owned

Animate UI · components

Animated component examples; check focus and reduced motion.

Stack
React · Tailwind · Motion
Coherence screens
Shared dialogs and disclosure motion
ExperimentalNot owned

React Three Fiber + drei

3D primitives, not an out-of-box app component; benchmark before choosing.

Stack
React · Three.js
Coherence screens
Screen Buddy glass/metal orb experiments
Archived from the previous library · 78 entries

The previous page is preserved in full. These entries are outside the active product-screen inventory; their names and reasons remain here for recovery.