Angular UI System
TailNG is a layered Angular UI system with CDK utilities, headless primitives, reusable components, icons, theming, and a selective install model built for accessibility, flexibility, and real product teams.
Packages
TailNG is organized so teams can adopt the right level of abstraction, from low-level interaction building blocks to polished UI components.
Low-level utilities for interaction, behavior, structure, focus management, overlays, and shared UI mechanics.
ExploreHeadless accessible foundations for menus, popovers, dialogs, tabs, switches, drawers, and more.
ExploreReusable UI components with sensible structure and minimal styling, ready for real product development.
ExploreA consistent icon set designed to fit naturally into TailNG apps and docs.
ExploreTokens, visual foundations, presets, and mode-aware styling for product interfaces.
ExploreSelective adoption inspired by shadcn-like workflows, so teams can own exactly what they ship.
Strong foundations. Flexible UI.
TailNG is built for teams that care about accessibility, ownership, and practical architecture.
Principles
Strong interaction patterns, semantics, keyboard support, and ARIA behavior are the baseline.
UI code stays understandable, adaptable, and maintainable for product teams over time.
Adopt CDK, headless patterns, components, icons, and themes at the level that fits your project.
Built for modern Angular patterns with a signal-first mindset and predictable APIs.
TailNG supports branding and custom design systems without forcing one rigid visual identity.
Designed for real dashboards, forms, overlays, tables, and product workflows.
Why TailNG
Start with components, go lower with headless patterns, and build deeper with CDK only when needed.
The architecture encourages clarity so teams can understand and evolve the UI they ship.
Focus behavior, keyboard interactions, and semantics are treated as core product quality.
TailNG fits branded ecosystems instead of forcing a fixed visual identity on every product.
Choose package installation or selective ownership patterns based on how your team works.
Install
Choose the level that fits your team. Start with components, go lower with primitives, or build from CDK foundations.
pnpm add @tailng-ui/components @tailng-ui/primitives @tailng-ui/cdk @tailng-ui/theme Use components
Start with ready-to-use building blocks for forms, overlays, navigation, and data UI.
Use headless
Build your own presentation layer on top of accessible behavior contracts.
Use CDK
Compose advanced product patterns with lower-level behavior foundations.
Use selective install
Adopt only the modules your team wants to own and evolve.
Theme
Define reusable values for color, spacing, typography, borders, and surfaces across the product.
Start from a preset, then adapt TailNG to match your internal system language.
Support modern UI expectations with clean mode-aware visual behavior.
Works with vanilla CSS, utility workflows, and design-system conventions.
Explore
Browse ready-made UI building blocks for common product needs.
Explore accessible headless interaction patterns for custom UI development.
See the low-level behavioral foundations that power the system.
Understand tokens, presets, and mode-aware styling foundations.
Browse icon usage patterns for interface consistency.