Welcome to Theme Builder

Theme Builder is a mashup of components that makes it easier to see the effects of theming changes. More information about theming is available in the doc, demos, and dev guide.

Components

Controls

Train

Progress Bar and Circle

Determinate
Indeterminate

FilePicker

Drag and Drop
Select or drop files here.

ConveyorBelt

FilmStrip

Hydrogen
Displaying page 1 of 12
Page 1 content loadedpagingControlPagination
Page1
Page2Page3Page4Page5Page6Page7Page8Page9Page10Page11Page12

Horizontal rule

Headers

h1 header

h2 header

h3 header

h4 header

h5 header

Typography

class: oj-typography-heading-2xl Heading 2xl
class: oj-typography-heading-xl Heading xl
class: oj-typography-heading-lg Heading lg
class: oj-typography-heading-md Heading md
class: oj-typography-heading-sm Heading sm
class: oj-typography-heading-xs Heading xs
class: oj-typography-subheading-2xl SubHeading 2xl
class: oj-typography-subheading-xl SubHeading xl
class: oj-typography-subheading-lg SubHeading lg
class: oj-typography-subheading-md SubHeading md
class: oj-typography-subheading-sm SubHeading sm
class: oj-typography-subheading-xs SubHeading xs
class: oj-typography-body-xl Body xl
class: oj-typography-body-lg Body lg
class: oj-typography-body-md Body md
class: oj-typography-body-sm Body sm
class: oj-typography-body-xs Body xs
class: oj-typography-body-2xs Body 2xs

Colors

Text
text default
text oj-text-color-primary
text oj-text-color-secondary
text oj-text-color-disabled
text oj-text-color-danger
text oj-text-color-warning
text oj-text-color-success
Icons
default
oj-icon-color-primary
oj-icon-color-secondary
oj-icon-color-disabled
oj-icon-color-danger
oj-icon-color-warning
oj-icon-color-success
oj-icon-color-info
Swipe to reveal
Default
More
Flag
Delete
Train
Form control messages
Input Label
Error message
Input Label
Warning message
Input Label
Information message
Input Label
Confirmation message
Page Level Messages

Standalone Links

Embedded Links

This is a link with class="oj-link-embedded" in a sentence.

This is a link with class="oj-link-embedded oj-link-subtle-primary" in a sentence.

This is a link with class="oj-link-embedded oj-link-subtle-secondary" in a sentence.

This is a link with class="oj-link-embedded oj-disabled" in a sentence.

Button

Menu

Avatar

Circular Icon

Badge

Default Danger Warning Success Info

Default Danger Warning Success Info

Layout & Nav

Tab Bar

edge: 'top'

edge: 'start'

Navigation List - Flat

edge: 'top'

edge: 'start'

Settings for navigationLists and navigationTabs above

Navigation List - Collapsible

Panel

default no shadow
oj-panel-shadow-sm
oj-panel-shadow-md
oj-panel-shadow-lg

Dialog

Popup

Collapsible

Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra, risus ac interdum sollicitudin, sem erat ultrices ipsum, eget vehicula nibh augue sollicitudin ligula. Sed ullamcorper cursus feugiat. Mauris tristique aliquam dictum. Nulla facilisi. Nulla ut sapien sapien. Phasellus tristique arcu id ipsum mattis id aliquam risus sollicitudin.

Accordion

Header 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Disabled Header

Header 3

Forms

Options To Control the Form Controls Below

Form Controls
Color spectrum four way slider.

Inline Date Picker

March2025
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Collections

Table with PagingControl

Department Id
Department Name
Location Id
1001ADFPM 1001 neverending200
556BB200
10Administration200
20Marketing200
30Purchasing200
40Human Resources1200
50Administration2200
60Marketing3200
70Purchasing4200
80Human Resources5200
Select Row
Page 1 content loadedpagingPagination
of 1
First PagePrevious Page
Next PageLast Page

List View, Indexer, Pull to Refresh, Swipe to Reveal

  • A
  • G
    • Douglas Grant
      Individual Contributor
      Finance
    • Nancy Greenberg
      Individual Contributor
      Finance
  • P
    • Luis Popp
      Individual Contributor
      Finance
  • A
  • Z
  • #
Press enter to select value.

Data Grid

This is a data grid with 0 rows and 1 columns.
DepartmentName
No items to display.

Tree View

  • Links

Visualizations

Pie/Donut

Loading
Loading

Chart

y Axis Title0204060x Axis TitleGroup AGroup B

Treemap

BostonSpringfieldWorcesterMassachusettsHartfordNew HavenConnecticutPortlandAugustaMaineBurlingtonVermontProvidenceNewportRhode Island

Sunburst

Loading
Loading

Legend

Thematic Map

Gauge

Diagram

Timeline

Gantt

NBox

PerformancePotential

PictoChart