- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Empty
- Field
- Form Field
- Hover Card
- Icon
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Introduction
Accessible UI primitives for Angular. Install the behavior. Copy the styles.
spartan/ui gives you accessible, customizable components for Angular applications. Built with signals, SSR compatible, and zoneless ready - no full-stack setup required, just add to any Angular project.
How it works
spartan uses a two-layer architecture that gives you both maintained accessibility and complete style ownership:
spartan/ui/brainUnstyled, accessible primitives installed via npm. Handles ARIA attributes, keyboard navigation, and focus management.
You install it: Regular dependency with updates and maintenance included.
spartan/ui/helmStyled components with a shadcn-inspired design system. Built with Tailwind CSS classes you can edit directly.
You copy it: Lives in your codebase. Customize without fighting a theming API.
This hybrid approach means you get the best of both worlds: we maintain the complex accessibility logic, while you own and control every aspect of the styling.
Full-stack development (optional)
Need more than UI components? The spartan/stack provides an opinionated full-stack setup with AnalogJs for end-to-end type-safe development.
Built on: Supabase , Angular , tRPC , Tailwind , AnalogJs , Nx , and Drizzle
FAQ
A collection of accessible UI primitives for Angular. You install behavior via npm and copy styles into your codebase for complete customization.
No. spartan/ui works with any Angular application. The spartan/stack is optional for full-stack development.
Brain (brn) is the unstyled, accessible primitive you install from npm - we maintain it with updates. Helm (hlm) is the styled layer you copy into your project - you own and customize it.
Copying styles gives you complete control. No theming API to learn, no version conflicts, no waiting for maintainers to add features. Edit Tailwind classes directly and ship.
We run comprehensive end-to-end tests in real browsers instead of JSDOM. UI components need to test behavior (focus management, keyboard navigation, ARIA announcements) that only works properly in actual browser environments. We found ourselves duplicating tests just to satisfy coverage metrics when the e2e tests already proved the components work.
Yes. We adapted the copy-paste philosophy and design patterns from shadcn/ui (React) and Radix UI for Angular, using signals, standalone components, and Angular-native APIs.
An optional collection of full-stack technologies for end-to-end type-safe Angular development with AnalogJs. Not required for using spartan/ui.
On This Page