Ashley Hunter
859676a41a
spartan/ui is now Tailwind CSS v4 only. The v3 compatibility layer added complexity across the brain preset, the CLI generators and the docs, all of which is removed here. Brain: - Delete the v3 JavaScript preset (hlm-tailwind-preset.js) and its package export; the v4 CSS preset (hlm-tailwind-preset.css) is now the only preset. - Bump the tailwindcss peer dependency to >=4.0.0 and declare tw-animate-css as a peer, since it is imported by the CSS preset. CLI: - Remove Tailwind version detection and the v3 confirmation prompt; the theme generator always emits the v4 stylesheet (preset import plus OKLCH theme). - Drop the legacy HSL theme table, the v3-only CDK overlay import branch, the vestigial addCdkStyles option and the unused registryItemTailwindSchema. Docs and tooling: - Remove the Tailwind v3 installation and theming sections and snippets. - Drop autoprefixer; Tailwind v4 handles vendor prefixing via @tailwindcss/postcss. BREAKING CHANGE: Tailwind CSS v3 is no longer supported. The @spartan-ng/brain/hlm-tailwind-preset (JS) package export has been removed; use the @spartan-ng/brain/hlm-tailwind-preset.css preset with Tailwind CSS v4. The tailwindcss peer dependency now requires >=4.0.0.
4.7 KiB
@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.0clsx>=2.0.0tailwindcss>=4.0.0tw-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
Community
License
MIT © goetzrobin and the spartan contributors