Bloc UI

Lightweight, accessible Angular component library. Barebone structure and behavior with zero design opinions.

If this saves you time, consider supporting ⭐ Star on GitHub
Documentation & Demos · Getting Started · Star on GitHub

---

Components

Built on Angular 21. All components are standalone by default with NgModule wrappers available.

Component	Package	Description
Button	@bloc-ui/core	Primary / secondary / outline variants with loading state
Input	@bloc-ui/core	Directive with error detection, groups, prefix/suffix
Checkbox	@bloc-ui/core	Forms integration and label positioning
Radio	@bloc-ui/core	Radio group with roving keyboard navigation
Toggle	@bloc-ui/core	Switch toggle with forms integration
Spinner	@bloc-ui/core	Inline loading spinner with preset sizes
Badge	@bloc-ui/core	Labelling pill with variant and size presets
Progress	@bloc-ui/core	Horizontal progress bar with label display
Skeleton	@bloc-ui/core	Loading placeholder with line, rect, and circle shapes
Textarea	@bloc-ui/core	Directive with error state and forms integration
Modal	@bloc-ui/modal	Programmatic modals with typed data injection
Table	@bloc-ui/table	Declarative data table with striped, bordered, hover options
Toast	@bloc-ui/toast	Notifications with info, success, warning, error types
Tab	@bloc-ui/tab	Tab group with animated active indicator
Date Picker	@bloc-ui/date-picker	Calendar dropdown with min/max date support
Tooltip	@bloc-ui/tooltip	Hover/focus tooltip with repositioning and delay control
Alert	@bloc-ui/alert	Inline banner with severity variants and optional dismiss
Accordion	@bloc-ui/accordion	Collapsible panels with single/multi mode
Autocomplete	@bloc-ui/autocomplete	Searchable single-select with async-friendly options
Pagination	@bloc-ui/pagination	Page navigation with sibling/boundary config
Select	@bloc-ui/select	Dropdown with overlay, keyboard nav, and search
Slider	@bloc-ui/slider	Range slider with Angular forms integration
Text Highlight	@bloc-ui/text-highlight	Highlights matching substrings in text
Virtual Scroll	@bloc-ui/virtual-scroll	Lightweight virtual scrolling for large lists
Layout	@bloc-ui/layout	Sidebar layout with collapsible panel [EXP⚠️]
Video Player	@bloc-ui/video-player	HTML5 video player with native controls [EXP⚠️]

---

Quick Start

# all-in-one
npm install @bloc-ui/kit

# or pick what you need
npm install @bloc-ui/core @bloc-ui/modal

import { BlocButtonComponent } from '@bloc-ui/core/button';

<button blocButton variant="primary" [loading]="saving">Save</button>

Optional theming - adds light/dark mode, colour tokens, and consistent typography:

npm install @bloc-ui/theme

@use '@bloc-ui/theme/styles/bloc-theme';

---

Development

Prerequisites: Node 24, npm

npm install          # install dependencies
ng serve             # start demo app → http://localhost:4200
npm run build        # build all libraries
ng test              # run tests

---

Design Principles

• Barebone - minimal structural styles, neutral grey fallbacks
• No hard-coded colours - everything through var() CSS custom properties
• Cascade-friendly - :where() zero specificity + @layer so your styles always win
• Accessible - ARIA roles, keyboard navigation, focus management
• Tree-shakeable - secondary entry points (@bloc-ui/core/button) and standalone packages
• Forms-ready - ControlValueAccessor on checkbox, toggle, radio, date picker

---

☕ Ko-fi · ⭐ Star on GitHub · License: MIT