Getting Started
Overview
Installation
Theme
Colors
Customize Theme
Typography
Forms
Basic Inputs
Button Toggle
Buttons
Checkbox
Input
Radio
Segmented
Slide Toggle
Select
Autocomplete
Country Select
Currency Select
Date Format Select
Select
Timezone
Custom Inputs
Form Renderer
Inline Text Edit
Input Mask
Number Input
Password Strength
Phone Input
Pin Input
Components
Navigation
Breadcrumbs
Navigation
Rail Navigation
Side Panel
Sidebar
Tab Panel
Components
68
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Card
Card Overlay
Carousel
Chips
Code Highlighter
Color Picker
Color Switcher
Command Bar
Comment Editor
Comparison Slider
Confirm
Content Fade
Cookie Popup
Crop
Datepicker
Dialog
Divider
Drawer
Emoji Picker
Empty State
Expand
Expansion Panel
Filter Builder
Gauge
Grid
Guided Tour
Icon
Image Placeholder
Image Resizer
Image Viewer
Image Zoom Viewer
Incidents
Keyboard
Layout
List
Marquee
Menu
Notifications
Paginator
Panel
Popover
Progress Bar
Progress Spinner
Resizable Container
Screen Loader
Sidenav
Signature Pad
Skeleton
Slider
Snackbar
Split Pane
Stepper
Suggestions
Table
Tabs
Text Editor
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Upload
Video Viewer
Micro Charts
Bar Chart
Line Chart
Pie Chart
Libraries
Kanban Board
Basic Example
Overview
Image Designer
Basic Example
Overview
Video Player
Basic Example
Carousel Example
Minimal Example
Overview
Visual Builder
Basic Example
Overview
Content Editor
Content Builder
Overview
Data View
Basic
Column pinning
Column settings
Custom cell renderers
Custom empty state
Embedded
Filter data
Loading state
Overview
Pinning and pagination
Refresh
Resizable columns
Server side
Server side (empty state)
Sticky columns
With action bar
With pagination
With selection
With sorting
 GET NGSTARTER

Colors

Primary Colors

Primary
primary
on-primary
primary-container
on-primary-container
primary-fixed
primary-fixed-dim
on-primary-fixed
on-primary-fixed-variant
Primary Tones
50
100
200
300
400
450
500
600
650
700
800
900
950
1000

Secondary Colors

Secondary
secondary
on-secondary
secondary-container
on-secondary-container
secondary-fixed
secondary-fixed-dim
on-secondary-fixed
on-secondary-fixed-variant

Tertiary Colors

Tertiary
tertiary
on-tertiary
tertiary-container
on-tertiary-container
tertiary-fixed
tertiary-fixed-dim
on-tertiary-fixed
on-tertiary-fixed-variant
Tertiary
50
100
200
300
400
450
500
600
650
700
800
900
950
1000

Error Colors

Error
error
on-error
error-container
on-error-container
Error
50
100
200
300
400
450
500
600
650
700
800
900
950
1000

Surface Colors

Surface
surface
surface-dim
surface-tint
surface-variant
surface-bright
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest
on-surface
on-surface-variant

Other Colors

Other
scrim
shadow
background
on-background

Outline Colors

Outline
outline
outline-variant

Inverse Colors

Inverse
inverse-surface
inverse-on-surface
inverse-primary

Neutral Colors

Neutral
50
100
200
300
400
500
600
700
800
900
950

Green Variant Colors

Green
green
on-green
green-container
on-green-container
green-container-high
green-container-highest

Blue Variant Colors

Blue
blue
on-blue
blue-container
on-blue-container
blue-container-high
blue-container-highest

Orange Variant Colors

Orange
orange
on-orange
orange-container
on-orange-container
orange-container-high
orange-container-highest

Ref Variant Colors

Red
red
on-red
red-container
on-red-container
red-container-high
red-container-highest