@spartan-ng/brain

Website • Documentation • Components • GitHub

Accessible, unstyled UI primitives for Angular. The behavior half of spartan/ui.

@spartan-ng/brain is a fully tree-shakable collection of headless Angular primitives - keyboard navigation, focus management, ARIA wiring, and state - with zero opinions about styling. Pair it with helm styles (copied into your codebase by the spartan CLI) for the full shadcn-style experience, or bring your own design system.

Inspired by Radix UI and shadcn/ui, adapted for the Angular ecosystem.

Installation

npm install @spartan-ng/brain
# or
pnpm add @spartan-ng/brain
# or
yarn add @spartan-ng/brain

For the easiest setup, use the spartan CLI - it installs the right secondary entry points and copies matching helm styles in one command:

npm install -D @spartan-ng/cli
ng g @spartan-ng/cli:init
ng g @spartan-ng/cli:ui

Usage

Every primitive lives behind a secondary entry point so you only ship what you import:

import { Component } from '@angular/core';
import { BrnAccordionImports } from '@spartan-ng/brain/accordion';

@Component({
	selector: 'app-faq',
	imports: [BrnAccordionImports],
	template: `
		<brn-accordion>
			<brn-accordion-item>
				<brn-accordion-trigger>Is it accessible?</brn-accordion-trigger>
				<brn-accordion-content>
					Yes. brain ships with keyboard navigation and full ARIA out of the box.
				</brn-accordion-content>
			</brn-accordion-item>
		</brn-accordion>
	`,
})
export class Faq {}

Each primitive exports an Imports array (e.g. BrnAccordionImports, BrnDialogImports) for one-line wiring, or you can cherry-pick individual directives and components.

Secondary Entry Points

Import from a specific entry point to keep your bundle lean:

import { BrnDialogImports } from '@spartan-ng/brain/dialog';
import { BrnSelectImports } from '@spartan-ng/brain/select';

Available entry points:

accordion, alert-dialog, autocomplete, avatar, button, calendar, checkbox, collapsible, combobox, command, core, date-time, date-time-luxon, dialog, field, forms, hover-card, input, input-otp, label, navigation-menu, popover, progress, radio-group, resizable, select, separator, sheet, slider, sonner, switch, tabs, textarea, toggle, toggle-group, tooltip.

Browse the components gallery for live demos, API docs, and styled helm examples for each primitive.

Tailwind Preset

@spartan-ng/brain ships with the shared Tailwind preset that powers the helm styles. Most users have the CLI wire this up for them, but you can also do it by hand by adding the preset to your CSS:

@import '@spartan-ng/brain/hlm-tailwind-preset.css';

spartan/ui requires Tailwind CSS v4.

Peer Dependencies

@spartan-ng/brain works with:

• Angular >=21.0.0 <23.0.0 (core, common, forms, cdk)
• rxjs >=6.6.0
• clsx >=2.0.0
• tailwindcss >=4.0.0
• tw-animate-css >=1.0.0 (imported by the Tailwind preset)
• luxon >=3.0.0 (optional - only required for @spartan-ng/brain/date-time-luxon)

Documentation

• Installation guide
• CLI documentation
• Theming
• Components

Community

• Discord
• GitHub
• Twitter / X
• Sponsor the project

License

MIT © goetzrobin and the spartan contributors