https://github.com/snatuva/angular-primitives
https://github.com/snatuva/angular-primitives
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/snatuva/angular-primitives
- Owner: snatuva
- Created: 2025-12-25T04:47:01.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-05-27T21:29:47.000Z (15 days ago)
- Last Synced: 2026-05-27T22:07:31.345Z (15 days ago)
- Language: TypeScript
- Size: 379 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - angular-primitives - Signal-first Angular primitives for building scalable, accessible UI systems. (Third Party Components / UI Primitives)
- awesome-angular - angular-primitives - Signal-first Angular primitives for building scalable, accessible UI systems. (Third Party Components / UI Primitives)
README
# @snatuva/primitives
> Signals-first Angular primitives for building scalable, accessible UI systems.
[](https://www.npmjs.com/package/@snatuva/primitives)
[](https://angular.dev)
[](./LICENSE)
---
## Overview
Most Angular component libraries hand you finished UI. `@snatuva/primitives` hands you the foundations — unstyled, composable, and accessible building blocks you wire together your way.
No `NgModule`. No fighting the design system. Just clean primitives built on Angular Signals.
---
## Installation
```bash
npm install @snatuva/primitives
```
Requires **Angular 17+**.
---
## Why primitives?
| Traditional component libraries | `@snatuva/primitives` |
|---|---|
| Opinionated styles, hard to override | Zero styles — you own the look |
| Bulky bundles with unused components | Tree-shakable, import only what you use |
| RxJS-heavy internal state | Angular Signals throughout |
| NgModule-based | Standalone-first |
---
## Primitives
### Tabs
A fully accessible tabs implementation following the [ARIA tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
**Directives**
| Directive | Description | Inputs |
|---|---|---|
| `apTabs` | Root scope and state provider | — |
| `apTabList` | Container for tab triggers | `orientation?: 'horizontal' \| 'vertical'` (default: `'horizontal'`) |
| `apTabTrigger` | Interactive tab button | `tabId: string`, `disabled?: boolean` |
| `apTabPanel` | Panel region | `id: string`, `disabled?: boolean` |
| `apTabContent` | Structural directive — conditionally renders active panel | `tabId: string` |
**Import**
```ts
import {
TabsDirective,
TabListDirective,
TabTriggerDirective,
TabPanelDirective,
} from '@snatuva/primitives';
```
**Usage**
```html
Overview
Details
Settings
Overview content
Details content
Settings content
```
ARIA attributes (`role="tab"`, `aria-selected`, `aria-controls`, `role="tabpanel"`, `aria-labelledby`, `aria-hidden`) are applied automatically.
**Vertical tabs**
```html
Profile
Billing
...
...
```
**Conditional rendering with `apTabContent`**
Use `apTabContent` to defer rendering panel content until the tab is active:
```html
```
---
## Accessibility
Every primitive is built to satisfy ARIA authoring practices out of the box:
- Semantic roles applied automatically
- Keyboard navigation (Arrow keys, Home, End, Tab)
- `aria-selected`, `aria-controls`, `aria-labelledby`, `aria-hidden` wired up
- Focus management handled internally
- Disabled states respected by both keyboard and assistive technology
---
## Core design principles
**Signals-first.** State is managed with Angular Signals. RxJS is used only where it is the right tool, not the default.
**Standalone.** No `NgModule` required. Drop a directive into any standalone component.
**Headless.** Primitives ship with zero styles. You apply your design system on top — CSS, Tailwind, or anything else.
**Composable.** Primitives are scoped and self-contained. Nest them, extend them, or combine them without fighting internal abstractions.
**Tree-shakable.** Only the primitives you import end up in your bundle.
---
## Roadmap
- [x] Tabs
- [x] Accordion
- [x] Dialog / Modal
- [ ] Popover
- [ ] Select
- [ ] Checkbox & Radio group
- [ ] Toggle / Switch
- [x] Tooltip
- [ ] Accessibility utilities
- [ ] CDK integrations
- [ ] Documentation site
---
## Contributing
Contributions are welcome. If you have ideas for new primitives, accessibility improvements, or API refinements, open an issue or pull request.
---
## Author
Built by **Siva Sridhar Natuva**.
---
## License
MIT