Getting Started
Forms
Components
78
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Calendar
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
Digit Roller
Divider
Drawer
Emoji Picker
Empty State
Events
Expand
Expansion Panel
File Type
Filter Builder
Gauge
Grid
Guided Tour
Headless Stepper
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
Sort
Split Pane
Step Tracker
Stepper
Suggestions
Table
Tabs
Text Editor
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Upload
Video Viewer
Libraries
Colors
NgStarter themes are driven by CSS custom properties. Use the --ngs-* tokens for component overrides and the --color-* aliases through Tailwind utility classes such as bg-primary, text-on-surface, or border-border.
Primary
--ngs-color-primary--color-primary--ngs-color-on-primary--color-on-primary--ngs-color-primary-container--color-primary-container--ngs-color-on-primary-container--color-on-primary-container--ngs-color-primary-100Component token only--ngs-color-primary-200Component token only--ngs-color-primary-300Component token only--ngs-color-primary-400Component token only--ngs-color-primary-500Component token only--ngs-color-primary-600Component token onlySecondary
--ngs-color-secondary--color-secondary--ngs-color-on-secondary--color-on-secondary--ngs-color-secondary-container--color-secondary-container--ngs-color-on-secondary-container--color-on-secondary-container--ngs-color-secondary-100Component token only--ngs-color-secondary-200Component token only--ngs-color-secondary-300Component token only--ngs-color-secondary-400Component token only--ngs-color-secondary-fixedComponent token only--ngs-color-on-secondary-fixedComponent token onlyTertiary
--ngs-color-tertiary--color-tertiary--ngs-color-on-tertiary--color-on-tertiary--ngs-color-tertiary-container--color-tertiary-container--ngs-color-on-tertiary-container--color-on-tertiary-container--ngs-color-tertiary-100Component token only--ngs-color-tertiary-200Component token only--ngs-color-tertiary-300Component token onlyStatus
Danger
--ngs-color-danger--color-error, --color-negative--ngs-color-on-danger--color-on-error, --color-on-negative--ngs-color-danger-container--color-error-container, --color-negative-container--ngs-color-on-danger-container--color-on-error-container, --color-on-negative-containerInfo
--ngs-color-info--color-informative--ngs-color-on-info--color-on-informative--ngs-color-info-container--color-informative-container--ngs-color-on-info-container--color-on-informative-containerSuccess
--ngs-color-success--color-positive--ngs-color-on-success--color-on-positive--ngs-color-success-container--color-positive-container--ngs-color-on-success-container--color-on-positive-container--ngs-color-green-500Component token onlyWarning
--ngs-color-warning--color-notice--ngs-color-on-warning--color-on-notice--ngs-color-warning-container--color-notice-container--ngs-color-on-warning-container--color-on-notice-containerDanger Containers
--ngs-color-danger-container-lowest--color-error-container-lowest--ngs-color-danger-container-low--color-error-container-low--ngs-color-danger-container-high--color-error-container-high--ngs-color-danger-container-highest--color-error-container-highestSurface
--ngs-color-background--color-background--ngs-color-on-background--color-on-background--ngs-color-surface--color-surface--ngs-color-on-surface--color-on-surface--ngs-color-on-surface-variant--color-on-surface-variant--ngs-color-surface-container-lowest--color-surface-container-lowest--ngs-color-surface-container-low--color-surface-container-low--ngs-color-surface-container--color-surface-container--ngs-color-surface-container-high--color-surface-container-high--ngs-color-surface-container-highest--color-surface-container-highest--ngs-color-outline--color-outline--ngs-color-outline-variant--color-outline-variant--ngs-color-border--color-border--ngs-color-faint--color-faint--ngs-color-subtle--color-subtle--ngs-color-muted--color-muted--ngs-color-emphasis--color-emphasis--ngs-color-strong--color-strongNeutral
--ngs-color-neutral-50--color-neutral-50--ngs-color-neutral-100--color-neutral-100--ngs-color-neutral-200--color-neutral-200--ngs-color-neutral-300--color-neutral-300--ngs-color-neutral-400--color-neutral-400--ngs-color-neutral-500--color-neutral-500--ngs-color-neutral-600--color-neutral-600--ngs-color-neutral-650Component token only--ngs-color-neutral-700--color-neutral-700--ngs-color-neutral-800--color-neutral-800--ngs-color-neutral-900--color-neutral-900--ngs-color-neutral-950--color-neutral-950--ngs-color-neutralComponent token only--ngs-color-blackComponent token only--ngs-color-whiteComponent token onlyState
--ngs-state-hover-bg--color-state-hover--ngs-state-active-bg--color-state-active--ngs-state-selected-bg--color-state-selected--ngs-state-selected-colorComponent token only--ngs-state-focus-ringComponent token only--ngs-state-disabled-bg--color-state-disabled--ngs-state-disabled-colorComponent token only--ngs-state-disabled-borderComponent token onlyRelated components