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

Developer tools

A code editor with a file tree and terminal, a diff viewer for reviews, and a log stream with a deploy dashboard.

PreviousAI appsNextAuthentication

On this page

Code EditorSnippet EditorCode BlockDiff ViewerSingle FileSplitLog ViewerBuild TerminalDeploy Dashboard

Diff Viewer

A code diff in split or unified view: syntax colours, word-level marks, unchanged lines folded behind an expand row, and comment threads on any line. The demo is a pull request review with files marked viewed.

motion · lucide-react

Single File

One file, unified, with comments on the gutter.

Split

package.json side by side between two branches.

Code Editor

A light code editor and highlighter: a textarea over coloured code for TS, JSX, JSON, CSS and shell, with Tab indent, smart Enter, comment toggle and line tinting. The demo is a small IDE with files, tabs and a terminal.

motion · lucide-react

Log Viewer

A log stream with level filters and counts, highlighted search, wrap, expandable lines with data and follow mode that pauses when you scroll up. A terminal variant and a deploy dashboard example.

motion · lucide-react

Snippet Editor

Three files in tabs with the cursor position below.

Code Block

Read-only code with a title, copy, tinted lines and wrap.

Build Terminal

A build streaming in a dark console; run it again when it finishes.

Deploy Dashboard

Deploys, build steps with timing, and each deploy's logs.