Scalar UI
Marketing UIApp UIAIChartsBackgrounds
Sign inGet started
Scalar UI
Scalar UI© 2026 Scalar Limited

React · Tailwind CSS · Motion

Browse

HomeAll components 213

Collections

Marketing UI 107App UI 94AI 16Charts 45Backgrounds 2Text 43

More

Text 43

Getting started

Installation

Primitives

AccordionsAlert DialogsAlerts2Aspect RatiosAvatars2BadgesBreadcrumbsButton GroupsButtons2CalendarsCheckboxesCollapsiblesComboboxesCommand MenusContext MenusDate PickersDialogsDropdown MenusEmpty StatesFields2FormsHover CardsInput OTPInputs3KbdMenubarsNavigation MenusPaginationPassword InputsPopoversProgress2Radio GroupsResizableScroll AreasSelectsSeparatorsSheetsSkeletonsSlidersSpinnersSwitchesTablesTabsToastsToggles2ToolbarsTooltipsSortablesStatus DotsTree ViewsFile UploadsSteppers

Layouts

SidebarsNavbarsApp Shells

Blocks

SchedulersBoards3CanvasesWorkflowsAI apps4Developer tools3AuthenticationOnboardingSettingsPricing & upgrades2Help & feedback4System pages7Admin console

Other

Cards

Resources

Docs & installScalar Design
App UIBlocks

AI apps

Whole AI products: a chat app with history and artifacts, an image studio, a code generator with live preview, and an agent trace viewer.

PreviousWorkflowsNextDeveloper tools

On this page

Agent TraceAgent ConsoleMulti-agent BoardChat AppArtifact PanelHomeCode GenerationDevice PreviewFile StepsImage StudioGalleryQuick Generate

Agent Trace

An agent run viewer: runs with duration, tokens and cost, a span tree with a timing waterfall (model calls, tools, retrieval, sub-agents), step input and output, and a tool call waiting for approval.

motion · lucide-react

Agent Console

A live run: the plan as a checklist, streaming logs, pause and stop.

Multi-agent Board

Four agents handing work to each other with progress and messages.

Image Studio

An image generation studio: model, aspect ratio, count, style, guidance and seed in a sidebar, a prompt bar, results that sharpen as they generate, likes, variations and a page for each image with its prompt and settings.

radix-ui · motion · lucide-react

Code Generation

A prompt-to-app builder: chat on the left with the files each version writes, a live preview that springs between desktop, tablet and phone, the code by file, and a version history you can restore.

radix-ui · motion · lucide-react

Chat App

The parts of an AI chat app: thread history grouped by day with rename, pin and delete, a model picker, messages with copy and feedback, prompt starters, streamed markdown and a scroller that sticks to the newest reply.

radix-ui · motion · lucide-react

Gallery

A masonry grid with All and Liked; each image opens on its own page.

Quick Generate

A prompt, an aspect ratio and four results in one card.

Device Preview

A page in a frame that resizes to desktop, tablet and phone.

File Steps

Files ticking from queued to writing to done.

Artifact Panel

An answer beside a resizable panel with Preview and Code tabs and versions.

Home

A greeting, the composer, prompt starters and recent chats.