# ng-blatui > Accessible Angular UI library (Angular 21 & 22, standalone, signals, zoneless, SSR-ready) ported from BlatUI. Components, blocks, charts and ready-made page templates, themed with Tailwind CSS v4 + oklch design tokens. ng-blatui is an Angular port of BlatUI. Install with `npm i ng-blatui`, import any component from the `ng-blatui` barrel (selectors are prefixed `bui`), and theme it with Tailwind v4 + oklch tokens. Every component is standalone, signal-based, zoneless and SSR-safe. Each page below is server-prerendered, so its full markup, props and code are fetchable as plain HTML. - Docs & live demo: https://ngblatui.remix-it.com - npm: https://www.npmjs.com/package/ng-blatui - Machine-readable registry: https://ngblatui.remix-it.com/registry.json - MCP server: `npx ng-blatui-mcp` (see https://ngblatui.remix-it.com/docs/installation) ## Getting started - [Introduction](https://ngblatui.remix-it.com/) - [Installation](https://ngblatui.remix-it.com/docs/installation) - [Theming](https://ngblatui.remix-it.com/docs/theming) ## Components (155) ### Forms & Input - [Button](https://ngblatui.remix-it.com/components/button) - [Input](https://ngblatui.remix-it.com/components/input) - [Textarea](https://ngblatui.remix-it.com/components/textarea) - [Label](https://ngblatui.remix-it.com/components/label) - [Checkbox](https://ngblatui.remix-it.com/components/checkbox) - [Switch](https://ngblatui.remix-it.com/components/switch) - [Radio Group](https://ngblatui.remix-it.com/components/radio-group) - [Button Group](https://ngblatui.remix-it.com/components/button-group) - [Field](https://ngblatui.remix-it.com/components/field) - [Toggle](https://ngblatui.remix-it.com/components/toggle) - [Copy Button](https://ngblatui.remix-it.com/components/copy-button) - [Input Group](https://ngblatui.remix-it.com/components/input-group) - [Slider](https://ngblatui.remix-it.com/components/slider) - [Rating](https://ngblatui.remix-it.com/components/rating) - [Autosize Textarea](https://ngblatui.remix-it.com/components/autosize-textarea) - [Segmented Control](https://ngblatui.remix-it.com/components/segmented-control) - [Select](https://ngblatui.remix-it.com/components/select) - [Combobox](https://ngblatui.remix-it.com/components/combobox) - [Number Input](https://ngblatui.remix-it.com/components/number-input) - [Password Strength](https://ngblatui.remix-it.com/components/password-strength) - [Time Field](https://ngblatui.remix-it.com/components/time-field) - [Toggle Group](https://ngblatui.remix-it.com/components/toggle-group) - [Tags Input](https://ngblatui.remix-it.com/components/tags-input) - [Editable](https://ngblatui.remix-it.com/components/editable) - [Knob](https://ngblatui.remix-it.com/components/knob) - [Input OTP](https://ngblatui.remix-it.com/components/input-otp) - [Phone Input](https://ngblatui.remix-it.com/components/phone-input) - [Color Picker](https://ngblatui.remix-it.com/components/color-picker) - [Signature Pad](https://ngblatui.remix-it.com/components/signature-pad) - [Repeater](https://ngblatui.remix-it.com/components/repeater) - [Markdown Editor](https://ngblatui.remix-it.com/components/markdown-editor) - [Calendar](https://ngblatui.remix-it.com/components/calendar) - [Date Picker](https://ngblatui.remix-it.com/components/date-picker) - [Datetime Picker](https://ngblatui.remix-it.com/components/datetime-picker) - [Autocomplete](https://ngblatui.remix-it.com/components/autocomplete) - [File Upload](https://ngblatui.remix-it.com/components/file-upload) - [Input Mask](https://ngblatui.remix-it.com/components/input-mask) - [Mention Input](https://ngblatui.remix-it.com/components/mention-input) - [Rich Text Editor](https://ngblatui.remix-it.com/components/rich-text-editor) ### Data Display - [Badge](https://ngblatui.remix-it.com/components/badge) - [Skeleton](https://ngblatui.remix-it.com/components/skeleton) - [Avatar](https://ngblatui.remix-it.com/components/avatar) - [Progress](https://ngblatui.remix-it.com/components/progress) - [Kbd](https://ngblatui.remix-it.com/components/kbd) - [Table](https://ngblatui.remix-it.com/components/table) - [Avatar Group](https://ngblatui.remix-it.com/components/avatar-group) - [Item](https://ngblatui.remix-it.com/components/item) - [Meter](https://ngblatui.remix-it.com/components/meter) - [Stat](https://ngblatui.remix-it.com/components/stat) - [Code Block](https://ngblatui.remix-it.com/components/code-block) - [Typography](https://ngblatui.remix-it.com/components/typography) - [Comparison Table](https://ngblatui.remix-it.com/components/comparison-table) - [Countdown](https://ngblatui.remix-it.com/components/countdown) - [Quote](https://ngblatui.remix-it.com/components/quote) - [Presence](https://ngblatui.remix-it.com/components/presence) - [Timeline](https://ngblatui.remix-it.com/components/timeline) - [Description List](https://ngblatui.remix-it.com/components/description-list) - [Masonry](https://ngblatui.remix-it.com/components/masonry) - [Sparkline](https://ngblatui.remix-it.com/components/sparkline) - [Typewriter](https://ngblatui.remix-it.com/components/typewriter) - [Marquee](https://ngblatui.remix-it.com/components/marquee) - [Text Reveal](https://ngblatui.remix-it.com/components/text-reveal) - [Heatmap](https://ngblatui.remix-it.com/components/heatmap) - [Tree](https://ngblatui.remix-it.com/components/tree) - [JSON Viewer](https://ngblatui.remix-it.com/components/json-viewer) - [Org Chart](https://ngblatui.remix-it.com/components/org-chart) - [Diff Viewer](https://ngblatui.remix-it.com/components/diff-viewer) - [Tree Table](https://ngblatui.remix-it.com/components/tree-table) - [Carousel](https://ngblatui.remix-it.com/components/carousel) - [Data Table](https://ngblatui.remix-it.com/components/data-table) - [Chart](https://ngblatui.remix-it.com/components/chart) - [Comparison Slider](https://ngblatui.remix-it.com/components/comparison-slider) - [Gantt](https://ngblatui.remix-it.com/components/gantt) - [Scheduler](https://ngblatui.remix-it.com/components/scheduler) - [Kanban](https://ngblatui.remix-it.com/components/kanban) ### Layout - [Card](https://ngblatui.remix-it.com/components/card) - [Separator](https://ngblatui.remix-it.com/components/separator) - [Aspect Ratio](https://ngblatui.remix-it.com/components/aspect-ratio) - [Container](https://ngblatui.remix-it.com/components/container) - [Scroll Area](https://ngblatui.remix-it.com/components/scroll-area) - [Visually Hidden](https://ngblatui.remix-it.com/components/visually-hidden) - [Page Header](https://ngblatui.remix-it.com/components/page-header) - [Stack](https://ngblatui.remix-it.com/components/stack) - [Accent](https://ngblatui.remix-it.com/components/accent) - [Bento Grid](https://ngblatui.remix-it.com/components/bento-grid) - [Resizable](https://ngblatui.remix-it.com/components/resizable) - [Sidebar](https://ngblatui.remix-it.com/components/sidebar) ### Feedback - [Alert](https://ngblatui.remix-it.com/components/alert) - [Tooltip](https://ngblatui.remix-it.com/components/tooltip) - [Empty](https://ngblatui.remix-it.com/components/empty) - [Spinner](https://ngblatui.remix-it.com/components/spinner) - [Banner](https://ngblatui.remix-it.com/components/banner) - [Hover Card](https://ngblatui.remix-it.com/components/hover-card) - [Loading Overlay](https://ngblatui.remix-it.com/components/loading-overlay) - [Cookie Consent](https://ngblatui.remix-it.com/components/cookie-consent) - [Top Progress](https://ngblatui.remix-it.com/components/top-progress) - [Sonner](https://ngblatui.remix-it.com/components/sonner) ### Disclosure - [Accordion](https://ngblatui.remix-it.com/components/accordion) - [Collapsible](https://ngblatui.remix-it.com/components/collapsible) ### Navigation - [Tabs](https://ngblatui.remix-it.com/components/tabs) - [Breadcrumb](https://ngblatui.remix-it.com/components/breadcrumb) - [Pagination](https://ngblatui.remix-it.com/components/pagination) - [Back To Top](https://ngblatui.remix-it.com/components/back-to-top) - [Link](https://ngblatui.remix-it.com/components/link) - [Bottom Navigation](https://ngblatui.remix-it.com/components/bottom-navigation) - [Scrollspy](https://ngblatui.remix-it.com/components/scrollspy) - [Speed Dial](https://ngblatui.remix-it.com/components/speed-dial) - [Stepper](https://ngblatui.remix-it.com/components/stepper) - [Infinite Scroll](https://ngblatui.remix-it.com/components/infinite-scroll) - [Dock](https://ngblatui.remix-it.com/components/dock) - [Navigation Menu](https://ngblatui.remix-it.com/components/navigation-menu) ### Overlays - [Dialog](https://ngblatui.remix-it.com/components/dialog) - [Popover](https://ngblatui.remix-it.com/components/popover) - [Alert Dialog](https://ngblatui.remix-it.com/components/alert-dialog) - [Dropdown Menu](https://ngblatui.remix-it.com/components/dropdown-menu) - [Menubar](https://ngblatui.remix-it.com/components/menubar) - [Notification Center](https://ngblatui.remix-it.com/components/notification-center) - [Command](https://ngblatui.remix-it.com/components/command) - [Context Menu](https://ngblatui.remix-it.com/components/context-menu) - [Drawer](https://ngblatui.remix-it.com/components/drawer) - [Sheet](https://ngblatui.remix-it.com/components/sheet) - [Onboarding Tour](https://ngblatui.remix-it.com/components/onboarding-tour) ### E-commerce - [Quantity Selector](https://ngblatui.remix-it.com/components/quantity-selector) - [Price](https://ngblatui.remix-it.com/components/price) - [Variant Selector](https://ngblatui.remix-it.com/components/variant-selector) - [Add To Cart](https://ngblatui.remix-it.com/components/add-to-cart) - [Product Card](https://ngblatui.remix-it.com/components/product-card) - [Mini Cart](https://ngblatui.remix-it.com/components/mini-cart) ### Effects - [Dot Pattern](https://ngblatui.remix-it.com/components/dot-pattern) - [Grid Pattern](https://ngblatui.remix-it.com/components/grid-pattern) - [Flip Card](https://ngblatui.remix-it.com/components/flip-card) - [Spotlight Card](https://ngblatui.remix-it.com/components/spotlight-card) - [Tilt Card](https://ngblatui.remix-it.com/components/tilt-card) - [Number Ticker](https://ngblatui.remix-it.com/components/number-ticker) - [Gradient Text](https://ngblatui.remix-it.com/components/gradient-text) - [Border Beam](https://ngblatui.remix-it.com/components/border-beam) - [Meteors](https://ngblatui.remix-it.com/components/meteors) - [Aurora](https://ngblatui.remix-it.com/components/aurora) - [Parallax](https://ngblatui.remix-it.com/components/parallax) - [Confetti](https://ngblatui.remix-it.com/components/confetti) - [Animated Beam](https://ngblatui.remix-it.com/components/animated-beam) ### AI - [Terminal](https://ngblatui.remix-it.com/components/terminal) - [Streaming Text](https://ngblatui.remix-it.com/components/streaming-text) - [Reasoning](https://ngblatui.remix-it.com/components/reasoning) - [Tool Call](https://ngblatui.remix-it.com/components/tool-call) - [Chat](https://ngblatui.remix-it.com/components/chat) - [Prompt Input](https://ngblatui.remix-it.com/components/prompt-input) - [Citation](https://ngblatui.remix-it.com/components/citation) ### Components - [Kbd Group](https://ngblatui.remix-it.com/components/kbd-group) ### Media - [Gallery](https://ngblatui.remix-it.com/components/gallery) - [Image](https://ngblatui.remix-it.com/components/image) - [Video](https://ngblatui.remix-it.com/components/video) - [Audio Player](https://ngblatui.remix-it.com/components/audio-player) - [Map](https://ngblatui.remix-it.com/components/map) - [QR Code](https://ngblatui.remix-it.com/components/qr-code) ## Blocks (16) - [Login 01](https://ngblatui.remix-it.com/blocks/login-01) - [Login 02](https://ngblatui.remix-it.com/blocks/login-02) - [Login 03](https://ngblatui.remix-it.com/blocks/login-03) - [Login 04](https://ngblatui.remix-it.com/blocks/login-04) - [Login 05](https://ngblatui.remix-it.com/blocks/login-05) - [Signup 01](https://ngblatui.remix-it.com/blocks/signup-01) - [Signup 02](https://ngblatui.remix-it.com/blocks/signup-02) - [Signup 03](https://ngblatui.remix-it.com/blocks/signup-03) - [Marketing 01](https://ngblatui.remix-it.com/blocks/marketing-01) - [Pricing 01](https://ngblatui.remix-it.com/blocks/pricing-01) - [Dashboard 01](https://ngblatui.remix-it.com/blocks/dashboard-01) - [Dashboard 02](https://ngblatui.remix-it.com/blocks/dashboard-02) - [Sidebar 01](https://ngblatui.remix-it.com/blocks/sidebar-01) - [Sidebar 07](https://ngblatui.remix-it.com/blocks/sidebar-07) - [Calendar 01](https://ngblatui.remix-it.com/blocks/calendar-01) - [Calendar 02](https://ngblatui.remix-it.com/blocks/calendar-02) ## Charts (70) - [Area Chart](https://ngblatui.remix-it.com/charts/chart-area-default) - [Area Chart — Linear](https://ngblatui.remix-it.com/charts/chart-area-linear) - [Area Chart — Step](https://ngblatui.remix-it.com/charts/chart-area-step) - [Area Chart — Legend](https://ngblatui.remix-it.com/charts/chart-area-legend) - [Area Chart — Stacked](https://ngblatui.remix-it.com/charts/chart-area-stacked) - [Area Chart — Stacked Expanded](https://ngblatui.remix-it.com/charts/chart-area-stacked-expand) - [Area Chart — Gradient](https://ngblatui.remix-it.com/charts/chart-area-gradient) - [Area Chart — Axes](https://ngblatui.remix-it.com/charts/chart-area-axes) - [Area Chart — Icons](https://ngblatui.remix-it.com/charts/chart-area-icons) - [Area Chart — Interactive](https://ngblatui.remix-it.com/charts/chart-area-interactive) - [Bar Chart](https://ngblatui.remix-it.com/charts/chart-bar-default) - [Bar Chart — Horizontal](https://ngblatui.remix-it.com/charts/chart-bar-horizontal) - [Bar Chart — Multiple](https://ngblatui.remix-it.com/charts/chart-bar-multiple) - [Bar Chart — Stacked](https://ngblatui.remix-it.com/charts/chart-bar-stacked) - [Bar Chart — Label](https://ngblatui.remix-it.com/charts/chart-bar-label) - [Bar Chart — Custom Label](https://ngblatui.remix-it.com/charts/chart-bar-label-custom) - [Bar Chart — Mixed](https://ngblatui.remix-it.com/charts/chart-bar-mixed) - [Bar Chart — Active](https://ngblatui.remix-it.com/charts/chart-bar-active) - [Bar Chart — Negative](https://ngblatui.remix-it.com/charts/chart-bar-negative) - [Bar Chart — Interactive](https://ngblatui.remix-it.com/charts/chart-bar-interactive) - [Line Chart](https://ngblatui.remix-it.com/charts/chart-line-default) - [Line Chart — Linear](https://ngblatui.remix-it.com/charts/chart-line-linear) - [Line Chart — Step](https://ngblatui.remix-it.com/charts/chart-line-step) - [Line Chart — Multiple](https://ngblatui.remix-it.com/charts/chart-line-multiple) - [Line Chart — Dots](https://ngblatui.remix-it.com/charts/chart-line-dots) - [Line Chart — Coloured Dots](https://ngblatui.remix-it.com/charts/chart-line-dots-colors) - [Line Chart — Custom Dots](https://ngblatui.remix-it.com/charts/chart-line-dots-custom) - [Line Chart — Label](https://ngblatui.remix-it.com/charts/chart-line-label) - [Line Chart — Custom Label](https://ngblatui.remix-it.com/charts/chart-line-label-custom) - [Line Chart — Interactive](https://ngblatui.remix-it.com/charts/chart-line-interactive) - [Tooltip — Default](https://ngblatui.remix-it.com/charts/chart-tooltip-default) - [Tooltip — Line Indicator](https://ngblatui.remix-it.com/charts/chart-tooltip-indicator-line) - [Tooltip — No Indicator](https://ngblatui.remix-it.com/charts/chart-tooltip-indicator-none) - [Tooltip — No Label](https://ngblatui.remix-it.com/charts/chart-tooltip-label-none) - [Tooltip — Custom Label](https://ngblatui.remix-it.com/charts/chart-tooltip-label-custom) - [Tooltip — Label Formatter](https://ngblatui.remix-it.com/charts/chart-tooltip-label-formatter) - [Tooltip — Formatter](https://ngblatui.remix-it.com/charts/chart-tooltip-formatter) - [Tooltip — Icons](https://ngblatui.remix-it.com/charts/chart-tooltip-icons) - [Tooltip — Advanced](https://ngblatui.remix-it.com/charts/chart-tooltip-advanced) - [Pie Chart](https://ngblatui.remix-it.com/charts/chart-pie-simple) - [Pie Chart — No Separator](https://ngblatui.remix-it.com/charts/chart-pie-separator-none) - [Pie Chart — Label](https://ngblatui.remix-it.com/charts/chart-pie-label) - [Pie Chart — Custom Label](https://ngblatui.remix-it.com/charts/chart-pie-label-custom) - [Pie Chart — Label List](https://ngblatui.remix-it.com/charts/chart-pie-label-list) - [Pie Chart — Legend](https://ngblatui.remix-it.com/charts/chart-pie-legend) - [Donut Chart](https://ngblatui.remix-it.com/charts/chart-pie-donut) - [Donut Chart — Active](https://ngblatui.remix-it.com/charts/chart-pie-donut-active) - [Donut Chart — Text](https://ngblatui.remix-it.com/charts/chart-pie-donut-text) - [Pie Chart — Stacked](https://ngblatui.remix-it.com/charts/chart-pie-stacked) - [Pie Chart — Interactive](https://ngblatui.remix-it.com/charts/chart-pie-interactive) - [Radial Chart](https://ngblatui.remix-it.com/charts/chart-radial-simple) - [Radial Chart — Label](https://ngblatui.remix-it.com/charts/chart-radial-label) - [Radial Chart — Grid](https://ngblatui.remix-it.com/charts/chart-radial-grid) - [Radial Chart — Text](https://ngblatui.remix-it.com/charts/chart-radial-text) - [Radial Chart — Shape](https://ngblatui.remix-it.com/charts/chart-radial-shape) - [Radial Chart — Stacked](https://ngblatui.remix-it.com/charts/chart-radial-stacked) - [Radar Chart](https://ngblatui.remix-it.com/charts/chart-radar-default) - [Radar Chart — Dots](https://ngblatui.remix-it.com/charts/chart-radar-dots) - [Radar Chart — Lines Only](https://ngblatui.remix-it.com/charts/chart-radar-lines-only) - [Radar Chart — Multiple](https://ngblatui.remix-it.com/charts/chart-radar-multiple) - [Radar Chart — Legend](https://ngblatui.remix-it.com/charts/chart-radar-legend) - [Radar Chart — Circle Grid](https://ngblatui.remix-it.com/charts/chart-radar-grid-circle) - [Radar Chart — Circle Filled](https://ngblatui.remix-it.com/charts/chart-radar-grid-circle-fill) - [Radar Chart — Circle No Lines](https://ngblatui.remix-it.com/charts/chart-radar-grid-circle-no-lines) - [Radar Chart — Custom Grid](https://ngblatui.remix-it.com/charts/chart-radar-grid-custom) - [Radar Chart — Grid Fill](https://ngblatui.remix-it.com/charts/chart-radar-grid-fill) - [Radar Chart — No Grid](https://ngblatui.remix-it.com/charts/chart-radar-grid-none) - [Radar Chart — Icons](https://ngblatui.remix-it.com/charts/chart-radar-icons) - [Radar Chart — Custom Label](https://ngblatui.remix-it.com/charts/chart-radar-label-custom) - [Radar Chart — Radius Axis](https://ngblatui.remix-it.com/charts/chart-radar-radius) ## Templates (34) - [Auth](https://ngblatui.remix-it.com/templates/auth) - [Pricing](https://ngblatui.remix-it.com/templates/pricing) - [Dashboard](https://ngblatui.remix-it.com/templates/dashboard) - [Blog](https://ngblatui.remix-it.com/templates/blog) - [Store](https://ngblatui.remix-it.com/templates/store) - [SaaS](https://ngblatui.remix-it.com/templates/saas) - [Docs Site](https://ngblatui.remix-it.com/templates/docs-site) - [Help Center](https://ngblatui.remix-it.com/templates/help-center) - [Product](https://ngblatui.remix-it.com/templates/product) - [CRM](https://ngblatui.remix-it.com/templates/crm) - [Account](https://ngblatui.remix-it.com/templates/account) - [Agency](https://ngblatui.remix-it.com/templates/agency) - [Startup](https://ngblatui.remix-it.com/templates/startup) - [Event](https://ngblatui.remix-it.com/templates/event) - [Aurora](https://ngblatui.remix-it.com/templates/aurora) - [Cosmos](https://ngblatui.remix-it.com/templates/cosmos) - [Prism](https://ngblatui.remix-it.com/templates/prism) - [Lumen](https://ngblatui.remix-it.com/templates/lumen) - [Atlas](https://ngblatui.remix-it.com/templates/atlas) - [Bloom](https://ngblatui.remix-it.com/templates/bloom) - [Brew](https://ngblatui.remix-it.com/templates/brew) - [Brut](https://ngblatui.remix-it.com/templates/brut) - [Forge](https://ngblatui.remix-it.com/templates/forge) - [Helix](https://ngblatui.remix-it.com/templates/helix) - [Mono](https://ngblatui.remix-it.com/templates/mono) - [Pulse](https://ngblatui.remix-it.com/templates/pulse) - [Quantum](https://ngblatui.remix-it.com/templates/quantum) - [Sprout](https://ngblatui.remix-it.com/templates/sprout) - [Terroir](https://ngblatui.remix-it.com/templates/terroir) - [Verdure](https://ngblatui.remix-it.com/templates/verdure) - [Vinyl](https://ngblatui.remix-it.com/templates/vinyl) - [Arcade](https://ngblatui.remix-it.com/templates/arcade) - [Atelier](https://ngblatui.remix-it.com/templates/atelier) - [Estate](https://ngblatui.remix-it.com/templates/estate)