mirror of
https://github.com/spartan-ng/spartan.git
synced 2026-09-22 16:41:38 +08:00
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.
114 lines
4.7 KiB
Markdown
114 lines
4.7 KiB
Markdown
# @spartan-ng/brain
|
|
|
|
[](https://www.npmjs.com/package/@spartan-ng/brain)
|
|
[](https://www.npmjs.com/package/@spartan-ng/brain)
|
|
[](https://opensource.org/licenses/MIT)
|
|
[](https://discord.gg/EqHnxQ4uQr)
|
|
|
|
[Website](https://spartan.ng) • [Documentation](https://www.spartan.ng/documentation/installation) • [Components](https://www.spartan.ng/components) • [GitHub](https://github.com/spartan-ng/spartan)
|
|
|
|
> Accessible, unstyled UI primitives for Angular. The behavior half of [spartan/ui](https://spartan.ng).
|
|
|
|
`@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`](https://www.spartan.ng/documentation/installation) styles (copied into your codebase by the [spartan CLI](https://www.npmjs.com/package/@spartan-ng/cli)) for the full shadcn-style experience, or bring your own design system.
|
|
|
|
Inspired by [Radix UI](https://radix-ui.com) and [shadcn/ui](https://ui.shadcn.com), adapted for the Angular ecosystem.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
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](https://www.npmjs.com/package/@spartan-ng/cli) - it installs the right secondary entry points and copies matching helm styles in one command:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```ts
|
|
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:
|
|
|
|
```ts
|
|
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](https://www.spartan.ng/components) 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](https://www.npmjs.com/package/@spartan-ng/cli) wire this up for them, but you can also do it by hand by adding the preset to your CSS:
|
|
|
|
```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](https://www.spartan.ng/documentation/installation)
|
|
- [CLI documentation](https://www.spartan.ng/documentation/cli)
|
|
- [Theming](https://www.spartan.ng/documentation/theming)
|
|
- [Components](https://www.spartan.ng/components)
|
|
|
|
## Community
|
|
|
|
- [Discord](https://discord.gg/EqHnxQ4uQr)
|
|
- [GitHub](https://github.com/spartan-ng/spartan)
|
|
- [Twitter / X](https://twitter.com/goetzrobin)
|
|
- [Sponsor the project](https://github.com/sponsors/goetzrobin)
|
|
|
|
## License
|
|
|
|
MIT © [goetzrobin](https://github.com/goetzrobin) and the [spartan contributors](https://github.com/spartan-ng/spartan/graphs/contributors)
|