Open Source·Multi-Package

Build Angular UIs
without the bloat.

Bloc UI is a lightweight, accessible, and fully themeable Angular component library. Ship polished interfaces with zero-specificity base styles, CSS custom-property theming, and first-class dark mode support.

Explore Components → GitHub ↗

$ npm install @bloc-ui/kit

New to Bloc UI?

Follow the step-by-step guide to install, configure, and use your first component in minutes.

Getting Started →

Why Bloc UI?

Designed around the principles that matter.

Lightweight

Minimal footprint with lean Angular code and focused package boundaries.

Themeable

CSS custom properties give you full colour and typography control.

Accessible

ARIA attributes, keyboard navigation, and screen reader support are built in.

Standalone

Every component works with standalone imports or NgModule wrappers.

Dark Mode Ready

Optional `@bloc-ui/theme` ships light and dark tokens out of the box.

Tailwind Friendly

Zero-specificity base styles keep utility classes in control.

Multi-Package Architecture

Install only what you need — each package is independently versioned and published.

@bloc-ui/kit

All-in-one umbrella package installs core, theme, and every component package in one dependency.

npm i @bloc-ui/kit

@bloc-ui/core

Structure, behaviour, and accessibility with minimal styling and CSS custom-property driven theming.

npm i @bloc-ui/core

@bloc-ui/theme

Optional design layer for colours, typography, border radii, and light or dark tokens.

npm i @bloc-ui/theme

@bloc-ui/modal

Declarative modal dialogs with backdrop dismiss, focus trapping, stacking, and service-based opening.

npm i @bloc-ui/modal

@bloc-ui/table

Data table with declarative column definitions, sortable headers, and custom cell templates.

npm i @bloc-ui/table

@bloc-ui/toast

Stackable notification toasts with auto-dismiss timers, action buttons, and configurable positioning.

npm i @bloc-ui/toast

@bloc-ui/date-picker

Calendar-based date picker with keyboard navigation, min/max constraints, and locale-aware formatting.

npm i @bloc-ui/date-picker

@bloc-ui/tab

Accessible tab group component with keyboard navigation, ARIA roles, and lazy content projection.

npm i @bloc-ui/tab

Cascade-Friendly by Design

All base styles use :where() for zero specificity. Your classes and Tailwind utilities always win — no !important needed.

Highest Priority

Your Classes

Consumer styles always win.

Mid Priority

Theme Tokens

CSS custom properties from @bloc-ui/theme.

Lowest Priority

Barebone Styles

Zero-specificity structural defaults.

Components

Everything you need to get started.

Accordion

Collapsible disclosure sections with single-open and multi-expand modes.

Alert

Inline feedback banners with semantic variants and optional dismissal.

Autocomplete

Searchable option picker with keyboard navigation and Angular forms support.

Badge

Compact status labels and counters with size and variant presets.

Button

Versatile action buttons with variants, loading states, and icon support.

Input

Styled text inputs with validation, error messages, and floating labels.

Progress

Accessible progress bars with labels, value display, and intent colours.

Select

Overlay-backed single select with keyboard navigation, filtering, and Angular forms support.

Skeleton

Shimmering placeholders for loading text, cards, avatars, and layouts.

Textarea

Auto-themed multi-line text areas with validation and Angular forms support.

Checkbox

Accessible checkboxes with indeterminate state and custom styling.

Radio

Radio groups with keyboard navigation and reactive form support.

Toggle

On/off toggle switches with smooth animations and ARIA labels.

Modal

Declarative modals with backdrop dismiss, focus trapping, and stacking.

Layout Sidebar

Sidebar and content shell primitives for dashboards and app workspaces.

Pagination

Page navigation with boundary pages, sibling ranges, and ellipsis handling.

Slider

Range control with CVA support, labels, and a styled progress track.

Spinner

Loading indicators with configurable size, speed, and colour tokens.

Table

Declarative data tables with sortable columns and custom cell templates.

Tab

Accessible tab groups with keyboard navigation and lazy content rendering.

Toast

Stackable notification toasts with auto-dismiss, actions, and positioning.

Date Picker

Calendar-based date selection with keyboard navigation and format control.

Quick Start

Up and running in three steps.

Open full Getting Started guide

Install