NgStarter UI components and admin templates are free and open source under the MIT License. Use, modify, and distribute them in your projects while retaining the copyright and permission notice.
NgStarter UI is an Angular component kit for admin panels and product dashboards. The
component package is published as @ngstarter-ui/components and is organized around
secondary entry points such as @ngstarter-ui/components/button,
@ngstarter-ui/components/dialog, and @ngstarter-ui/components/table.
For a new Angular 22 project, create the app with SCSS and add NgStarter UI:
npx @angular/cli@22 new project-name --style=scss
cd project-name
npx ng add @ngstarter-ui/componentsFor an existing Angular 22 app, run the same schematic from your project root:
npx ng add @ngstarter-ui/componentsThe ng add schematic also creates NgStarter Codex guidance in AGENTS.md and installs a local
Codex skill at .codex/skills/ngstarter-ui by default. To skip that setup, run:
npx ng add @ngstarter-ui/components --codex-skill=falseIf NgStarter UI is already installed and you only want to add or refresh the Codex skill, run:
npx ng generate @ngstarter-ui/components:codex-skillNgStarter components are standalone Angular components. Import each component from its secondary entry point:
import { Button } from '@ngstarter-ui/components/button';
import { Dialog } from '@ngstarter-ui/components/dialog';
import { Input } from '@ngstarter-ui/components/input';NgStarter ships Default and Chalk themes. Import the stylesheets you make available at runtime:
@use '@ngstarter-ui/components/styles/themes/default';
@use '@ngstarter-ui/components/styles/themes/chalk';Themes use fixed light and dark color tokens. Their main layers are:
- primitive tokens: spacing, radius, font sizes, shadows
- semantic tokens:
--ngs-color-primary,--ngs-color-surface,--ngs-color-danger - component tokens:
--ngs-button-height,--ngs-field-radius,--ngs-table-row-height
Configure the theme and color scheme at runtime:
import { provideNgsTheme } from '@ngstarter-ui/components/core';
export const appConfig = {
providers: [
provideNgsTheme({
theme: 'default',
colorScheme: 'auto',
colorPreset: 'default',
}),
],
};For user display preferences, inject ThemeManagerService:
themeManager.setTheme('chalk');
themeManager.changeColorScheme('dark');The same values can be represented with document attributes:
<html data-ngs-theme="chalk" data-ngs-color-scheme="dark">The documentation site includes live demos and API examples for each component:
- Autocomplete
- Button
- Button Toggle
- Checkbox
- Country Select
- Currency Select
- Date Format Select
- Filter Select
- Inline Text Edit
- Input
- Input Mask
- Input Validator
- Number Input
- Password Strength
- Phone Input
- Pin Input
- Radio
- Segmented
- Select
- Slide Toggle
- Timezone Select
- Content Editor
- Data View
- Form Builder
- Image Designer
- Kanban Board
- Micro Charts
- Bar Chart
- Line Chart
- Pie Chart
- Video Player
- Visual Builder
- 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
- Cookie Popup
- Crop
- Datepicker
- Digit Roller
- Dialog
- Divider
- Drawer
- Emoji Picker
- Empty State
- Expand
- Expansion Panel
- Filter Builder
- Gauge
- Grid
- Guided Tour
- Headless Stepper
- Icon
- Image Placeholder
- Image Resizer
- Image Viewer
- Image Zoom Viewer
- Incidents
- Kbd
- Layout
- List
- Marquee
- Menu
- Notifications
- Paginator
- Panel
- Popover
- Progress Bar
- Progress Spinner
- Resizable Container
- Screen Loader
- Sidenav
- Signature Pad
- Skeleton
- Slider
- Snack Bar
- Split Pane
- Step Tracker
- Stepper
- Suggestions
- Table
- Tabs
- Text Editor
- Thumbnail Maker
- Tiles
- Timeline
- Timepicker
- Toolbar
- Tooltip
- Tree
- Upload
- Video Viewer