Databricks UI — Component Reference

DuBois design tokens applied to shadcn/ui. Browse components and copy patterns.

Colors

DuBois primitive palette. Always use semantic CSS variables in components, not raw hex.

Blue
100#F0F8FF
200#D7EDFE
300#BAE1FC
400#8ACAFF
500#4299E0
600#2272B4--primary
700#0E538B
800#04355D
Neutral (warm grey)
050#F7F7F7--secondary/--muted
100#EBEBEB--border
200#D8D8D8
300#CBCBCB--input
350#A2A2A2
400#939393
500#6F6F6F--muted-fg
600#525252
650#424242
700#262626
800#161616--foreground
Grey (blue-tinted)
050#F6F7F9
100#E8ECF0
200#D1D9E1
300#C0CDD8
350#92A4B3
400#8396A5
500#5F7281
600#445461
650#37444Fdark --input
700#1F272Ddark --secondary
800#11171Cdark --background
Red
100#FFF5F7
200#FDE2E8
300#FBD0D8
400#F792A6
500#E65B77dark --destructive
600#C82D4C--destructive
700#9E102C
800#630316
Green
100#F3FCF6
200#D4F7DF
300#B1ECC5
400#8DDDA8
500#3BA65Edark --success
600#277C43--success
700#115026
800#093919
Yellow
100#FFF9EB
200#FCEACA
300#F8D4A5
400#F2BE88
500#DE7921dark --warning
600#BE501E--warning
700#93320B
800#5F1B02
Brand & Misc
brand-red#FF3621--color-brand-red
star#FACB66--color-star
Secondary — Tags & Categorical
coral
100#FDECE9
500#E86247
700#C0411E
brown
100#F3ECE6
500#A0694A
700#7A4930
indigo
100#EBF0FD
500#5B7BE8
700#3557C7
lemon
100#FDF9E6
500#D4A800
700#9C7C00
lime
100#EEF9E6
500#6CBF3C
700#4A8C22
pink
100#FDE8F8
500#D966C5
700#B03EA0
purple
100#F0EAFD
500#9B6AE8
700#7040C8
teal
100#E5F7F5
500#2DB0A0
700#1A8578
turquoise
100#E5F8FB
500#22B8CF
700#138B9E

Typography

Base: 13px / 20px line-height. Bold = 600 (never 700). System font (SF Pro on macOS).

h1 / 32px

Databricks Platform

h2 / 22px

Workspace Overview

h3 / 18px

Catalog Explorer

h4 / 15px

Table Properties

body / 13px

The quick brown fox jumps over the lazy dog. Base font size is 13px with 20px line-height.

hint / 12px

Secondary metadata, timestamps, helper text

code / 13pxSELECT * FROM catalog.schema.table

Spacing

Base unit: 8px. xs=4px · sm=8px · md=16px · lg=24px · xl=32px

xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px

Icons

457 Databricks-specific DuBois icons. All 16×16, currentColor.

AlignCenter
AlignJustify
AlignLeft
AlignRight
AlignVerticalBottom
AlignVerticalCenter
AlignVerticalTop
App
ArrowDownDot
ArrowDownFill
ArrowDown
ArrowIn
ArrowLeft
ArrowOver
ArrowRight
ArrowUpDot
ArrowUpFill
ArrowUp
ArrowsConnect
ArrowsUpDown
Assistant
At
AzHorizontal
AzVertical
Backup
BadgeCode
BadgeCodeOff
BarChart
BarGrouped
BarStacked
BarStackedPercentage
BarsAscendingHorizontal
BarsAscendingVertical
BarsDescendingHorizontal
BarsDescendingVertical
Beaker
Binary
BlockQuote
Bold
Book
BookmarkFill
Bookmark
Books
BracketsCheck
BracketsCurly
BracketsError
BracketsSquare
BracketsX
BranchCheck
Branch
BranchReset
BriefcaseFill
Briefcase
Brush
Bug
CalendarClock
CalendarEvent
Calendar
CalendarRange
CalendarSync
Camera
CaretDownSquare
CaretUpSquare
CatalogCloud
CatalogGear
CatalogH
CatalogHome
Catalog
CatalogOff
CatalogShared
CatalogUserHome
CellsSquare
CertifiedFill
CertifiedFillSmall
Certified
Chain
ChartLine
CheckCircleBadge
CheckCircleFill
CheckCircle
CheckCircleSmall
Check
CheckLine
CheckSmall
Checkbox
Checklist
ChevronDoubleDown
ChevronDoubleLeft
ChevronDoubleLeftOff
ChevronDoubleRight
ChevronDoubleRightOff
ChevronDoubleUp
ChevronDown
ChevronLeft
ChevronRight
ChevronUp
Chip
Circle
CircleOff
CircleOffLarge
CircleOutline
CircleOutlineLarge
Clipboard
Clock
ClockKey
ClockOff
Close
CloseSmall
CloudDatabase
CloudDownload
Cloud
CloudKey
CloudModel
CloudOff
CloudUpload
Code
ColorFill
Column
ColumnSplit
Columns
Command
CommandPalette
Compass
Connect
Copy
CreditCard
CursorClick
Cursor
CursorType
CustomApp
DagHorizontal
Dag
DagVertical
DangerFill
Danger
DangerSmall
Dash
DashboardCode
Dashboard
Data
DatabaseClock
Database
DatabaseImport
Decimal
Deprecated
DeprecatedSmall
Dollar
DomainCirclesThree
Domains
DotsCircle
Download
Drag
Erd
ExpandLess
ExpandMore
FaceFrown
FaceNeutral
FaceSmile
FileCode
FileCube
FileDocument
File
FileImage
FileLock
FileModel
FileNew
FilePipeline
Filter
FlagPointer
Float
Flow
FolderBranchFill
FolderBranch
FolderCloudFilled
FolderCloud
FolderCube
FolderCubeOutline
FolderFill
FolderHome
Folder
FolderNew
FolderNode
FolderOpenBranch
FolderOpenCloud
FolderOpenCube
FolderOpen
FolderOpenPipeline
FolderOutlinePipeline
FolderSolidPipeline
Font
ForkHorizontal
Fork
FullscreenExit
Fullscreen
Function
Gavel
GearFill
Gear
GenieCode
GenieDeepResearch
Gift
GitCommit
Globe
GridDash
Grid
Group
H1
H2
H3
H4
H5
H6
Hash
History
Home
Image
IndentDecrease
IndentIncrease
Infinity
InfoBook
InfoFill
Info
InfoSmall
Ingestion
Italic
JoinOperator
Key
Keyboard
LakeflowDesigner
LayerGraph
Layer
Leaf
LetterFormat
Letters
LettersNumbers
Libraries
Lifesaver
Lightbulb
LightningCircleFill
Lightning
LinearLine
Link
LinkOff
ListBorder
ListClear
List
ListNumber
Loading
LockFill
Lock
LockShare
LockUnlocked
Loop
Mail
Map
Markdown
Mcp
Measure
Megaphone
Menu
MinusCircleFill
MinusCircle
MinusCircleSmall
MinusSquare
Models
MonotoneLine
Moon
NeonProject
NewChat
NewWindow
No
Notebook
NotebookPipeline
Notification
NotificationOff
NumberFormat
Numbers
Office
Overflow
PageBottom
PageFirst
PageLast
PageTop
PanelDocked
PanelFloating
Paperclip
Pause
PencilFill
Pencil
PencilSparkle
PieChart
PinCancel
PinFill
Pin
PipelineCode
PipelineCube
Pipeline
PivotOperator
PlayCircleFill
PlayCircle
PlayDouble
Play
PlayMultiple
Plug
PlusCircleFill
PlusCircle
PlusCircleSmall
Plus
PlusMinusSquare
PlusSquare
PositionBottom
PositionLeft
PositionRight
PositionTop
PullRequest
Puzzle
QueryEditor
Query
QuestionMarkFill
QuestionMark
Radio
ReaderMode
Redo
Refresh
RefreshPlay
RefreshX
Reply
Resize
RichText
Robot
Rocket
Rows
Run
Running
SaveClock
Save
Schema
School
SearchData
Search
Send
Share
ShieldCheck
Shield
ShieldOff
Shortcut
SidebarAuto
SidebarClosed
SidebarCollapse
SidebarExpand
Sidebar
SidebarOpen
SidebarSync
SlashSquare
Sliders
SortAscending
SortCustomHorizontal
SortCustomVertical
SortDescending
SortHorizontalAscending
SortHorizontalDescending
SortLetterHorizontalAscending
SortLetterHorizontalDescending
SortLetterUnsorted
SortLetterVerticalAscending
SortLetterVerticalDescending
SortUnsorted
SortVerticalAscending
SortVerticalDescending
SparkleDoubleFill
SparkleDouble
SparkleFill
Sparkle
SparkleRectangle
SpeechBubble
SpeechBubblePlus
SpeechBubbleQuestionMarkFill
SpeechBubbleQuestionMark
SpeechBubbleStar
Speedometer
Sql
StarFill
Star
StepAfterLine
StepBeforeLine
StopCircleFill
StopCircle
Stop
StoredProcedure
Storefront
Stream
StrikeThrough
Sun
Sync
SyncSmall
SyncToFile
TableAsterisk
TableClock
TableCombine
TableGlasses
TableGlobe
Table
TableLightning
TableMeasure
TableModel
TableStream
TableVector
TableView
Tag
Target
Terminal
TextBox
Text
TextJustify
TextUnderline
ThreeDots
ThumbsDown
ThumbsUp
Token
Trash
Tree
TrendingFill
Trending
Triangle
Underline
Undo
Upload
Usb
UserBadge
UserCircle
UserGroupFill
UserGroup
UserHomeVolume
User
UserKeyIcon
UserShield
UserSparkle
UserTeam
VisibleFill
Visible
VisibleOff
WarningFill
Warning
WorkflowCode
WorkflowCube
Workflows
Workspaces
Wrench
WrenchSparkle
XCircleFill
XCircle
ZaHorizontal
ZaVertical
ZoomIn
ZoomMarqueeSelection
ZoomOut
ZoomToFit

Buttons

DuBois heights: 32px (sm, default) · 24px (xs). All use 4px radius, weight 600.

Primary
Default
Ghost
Destructive
Link
Leading icon
Trailing icon (menu)
Both icons
States

Split Button

Primary action with attached dropdown arrow. Used in list-page toolbars (e.g. Jobs & Pipelines). Import from @/components/ui/split-button.

Variants
Disabled

Form Controls

32px input height (h-8), 4px radius, 2px solid focus ring, hover border turns blue.

Text Input
This field is required
Select
Textarea
Checkbox
Radio
Switch

Hint

Helper text below form fields — 12px/16px, muted-foreground. Import from @/components/ui/hint.

Above input (DuBois: Hint precedes the control)
Must be lowercase and contain no spaces.
Above select
LTS versions receive security patches for 2 years.

Slider

Range input — Radix-based, 3px track, 20px thumb, primary fill. Import from @/components/ui/slider.

Default

Value: 40

Disabled

Radio Tile

Card-style radio button with optional icon and description. Import from @/components/ui/radio-tile.

Basic
Disabled

Segmented Control

Toggle button group for exclusive selection. Active item: blue tint bg + border.

Default
Time range

Alerts

Full border with tinted background. Three severity levels plus a neutral default.

Spinner

Loading indicator. Three sizes: small (16px) · default (24px) · large (32px). Defaults to muted-foreground; use inheritColor for parent color.

Sizes
small
default
large
Color inherit
Loading…Retrying…
In a button

Progress

Linear progress bar. Primary fill, 8px (h-2) track height. Import from @/components/ui/progress.

Values
With label
Uploading…65%

Stepper

Step progress indicator with 5 statuses: upcoming · completed · loading · error · warning. Import from @/components/ui/stepper.

Horizontal — step 2 active
  1. Configure
  2. 2
    Libraries
  3. 3
    Review
Horizontal — with descriptions
  1. Cluster

    Choose compute type

  2. 2
    Libraries

    Add dependencies

  3. 3
    Review

    Confirm and launch

Horizontal — error & warning
  1. Configure
  2. Libraries
  3. 3
    Review
Vertical
  1. Configure cluster

    Choose compute type and size.

  2. 2
    Add libraries

    Install packages and dependencies.

  3. 3
    Review & launch

    Confirm settings before starting.

Empty State

Centered empty placeholder. 64px icon slot (defaults to InboxIcon), optional title, description, and action.

With title + action

No pipelines yet

Create a pipeline to start ingesting and transforming data.

Description only

No results match your search criteria. Try adjusting your filters.

Badges & Tags

Rectangular (4px radius). Background and text use exact RGBA CSS tokens from DuBois semantics.

Semantic
DefaultSecondaryErrorDefault tag
DuBois Tag Palette (RGBA tokens)
DefaultCharcoalCoralBrownIndigoLemonLimePinkPurpleTealTurquoise
In context
RunningStreamingIdleFailedScheduledPendingDeprecatedBetaArchived

Tables

DuBois row hover (rgba 4%) and selected (rgba 8%) states. Semibold column headers.

NameTypeStatusLast updatedActions
mainNotebookRunning2 min ago
etl-pipelinePipelineSuccess1 hr ago
analyticsNotebookIdle3 hrs ago
model-trainJobFailed5 hrs ago
data-ingestPipelineRunning12 min ago

Cards

8px radius, db-sm shadow. Tighter padding than shadcn defaults.

Active clusters
14

↑ 3 from yesterday

etl-prod-v2
Running
Last run 2 min ago

124 tasks · 0 errors

List Item

Selectable panel row (32px). Active: blue-tinted bg. Actions appear on hover/selected.

States

Tabs

Line variant (DuBois style)

Table overview and metadata.

Pill variant

Your notebooks.

Pagination

Page navigation with Previous / Next / numbered links. Import from @/components/ui/pagination.

Default
Simple (jobs-style ghost buttons)

Tree

File-tree navigation with expand/collapse and selection. Import from @/components/ui/tree.

With icons

Dialogs & Sheets

40px padding, no header/footer dividers. 8px radius.

Tooltips:

AI Components

Databricks AI gradient: #4299E0 → #CA42E0 → #FF5F46 at 135°

AI Gradient Background
AI Gradient Text

Databricks AI / BI

AI Sparkle Button
Inline AI indicator
AI-generated content

Shell

App-level layout components: PageHeader, TopBar, Sidebar.

PageHeader — full

prod-etl-v2

Running
Delta Live Tables pipeline · Last run 2 min ago · 124 tasks
PageHeader — minimal

SQL Warehouses

Serverless compute for running SQL queries.
TopBar
N
N

Top: sidebar open · Bottom: sidebar collapsed

Sidebar — expanded
Full shell
Visit /shell to see the full AppShell with TopBar + Sidebar + demo content.

Notebook Cell

Editor cell with gutter, run button, language badge, and action toolbar. Import from @/components/ui/notebook-cell.

Python cell
123
Python
# Example cell content
SQL cell
12
SQL
 
 

Misc Components

Avatars
JDASMKRWTN
Separator
or
Skeleton

Databricks Designer Starter Kit · DuBois tokens on shadcn/ui · Tailwind v4