{"id":43720791,"url":"https://github.com/tailng/tailng-ui","last_synced_at":"2026-06-08T16:00:56.620Z","repository":{"id":331590418,"uuid":"1127701015","full_name":"tailng/tailng-ui","owner":"tailng","description":"TailNG UI is a signal-first Angular component library with Material-like components, framework-agnostic styling, and support for Angular 20+.","archived":false,"fork":false,"pushed_at":"2026-06-03T05:29:47.000Z","size":21532,"stargazers_count":16,"open_issues_count":31,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-03T07:25:58.165Z","etag":null,"topics":["angular","charts","components","headless","signal","tailwind","theme"],"latest_commit_sha":null,"homepage":"https://tailng.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tailng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-04T12:31:03.000Z","updated_at":"2026-06-03T05:29:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tailng/tailng-ui","commit_stats":null,"previous_names":["tociva/tailng","tailng/tailng-ui"],"tags_count":81,"template":false,"template_full_name":null,"purl":"pkg:github/tailng/tailng-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailng%2Ftailng-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailng%2Ftailng-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailng%2Ftailng-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailng%2Ftailng-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tailng","download_url":"https://codeload.github.com/tailng/tailng-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailng%2Ftailng-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34067353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","charts","components","headless","signal","tailwind","theme"],"created_at":"2026-02-05T08:08:41.911Z","updated_at":"2026-06-08T16:00:56.585Z","avatar_url":"https://github.com/tailng.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg\n    src=\"https://raw.githubusercontent.com/tailng/tailng-ui/main/apps/tailng-ui/docs/src/assets/logo.svg\"\n    width=\"120\"\n    alt=\"TailNG logo\"\n  /\u003e\n\n  \u003ch1\u003eTailNG\u003c/h1\u003e\n\n  \u003cp\u003e\n    \u003cstrong\u003eAccessible Angular UI, built to be owned.\u003c/strong\u003e\n  \u003c/p\u003e\n\n  \u003cp\u003e\n    Angular 21+ components, headless primitives, theme contracts, and ownable source installs\n    for teams building design systems and application UI.\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n[![Build Status](https://github.com/tailng/tailng-ui/actions/workflows/prod-build-deploy.yml/badge.svg)](https://github.com/tailng/tailng-ui/actions/workflows/prod-build-deploy.yml)\n[![NPM Version](https://img.shields.io/npm/v/@tailng-ui/components.svg)](https://www.npmjs.com/package/@tailng-ui/components)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n---\n\n## What is TailNG?\n\nTailNG is an open-source Angular UI system for applications and design systems that need accessible behavior, strict type safety, and implementation ownership.\n\nThe monorepo provides:\n\n- Ready-to-use styled Angular components.\n- Headless primitives for custom UI systems.\n- Low-level accessibility, collection, overlay, and runtime utilities.\n- Theme contracts, CSS variable tooling, and Tailwind adapters.\n- A copy-source registry and CLI for shadcn-style local component ownership.\n- Documentation and playground apps for package, Tailwind, plain CSS, and registry workflows.\n\nTailNG is built with Angular 21+, standalone APIs, signals, Nx, Vitest, and strict ESLint boundaries.\n\n## Packages\n\n| Package                 | Description                                                                          |\n| ----------------------- | ------------------------------------------------------------------------------------ |\n| `@tailng-ui/components` | Styled Angular components built on TailNG primitives.                                |\n| `@tailng-ui/primitives` | Headless, accessibility-first Angular primitives.                                    |\n| `@tailng-ui/cdk`        | Behavior, accessibility, collection, overlay, and runtime utilities.                 |\n| `@tailng-ui/theme`      | Theme contracts, presets, CSS variables, component contracts, and Tailwind adapters. |\n| `@tailng-ui/icons`      | Angular icon wrappers backed by `@ng-icons`.                                         |\n| `@tailng-ui/charts`     | Apache ECharts wrappers for Angular.                                                 |\n| `@tailng-ui/registry`   | Metadata for ownable component installs.                                             |\n| `tailng`                | CLI for listing and copying ownable components into Angular apps.                    |\n\n## Installation\n\nInstall styled components:\n\n```bash\npnpm add @tailng-ui/components @tailng-ui/primitives @tailng-ui/cdk\n```\n\nInstall headless primitives:\n\n```bash\npnpm add @tailng-ui/primitives @tailng-ui/cdk\n```\n\nInstall the theme package:\n\n```bash\npnpm add @tailng-ui/theme\n```\n\nUse the ownable-source CLI without adding it permanently:\n\n```bash\npnpm dlx tailng list\npnpm dlx tailng add button\n```\n\nPrimary peer dependencies:\n\n- `@angular/core` `^21.1.0`\n- `@angular/common` `^21.1.0`\n- `@angular/forms` `^21.1.0`\n- `@angular/platform-browser` `^21.1.0`\n- `@angular/router` `^21.1.0`\n- `tslib` `^2.3.0`\n\nPackage-specific peer dependencies are listed in each package README.\n\n## Quick Example\n\n```ts\nimport { Component } from '@angular/core';\nimport { TngButton } from '@tailng-ui/components';\n\n@Component({\n  standalone: true,\n  imports: [TngButton],\n  template: `\u003ctng-button tone=\"success\"\u003eContinue\u003c/tng-button\u003e`,\n})\nexport class ExampleComponent {}\n```\n\nFor headless usage:\n\n```ts\nimport { Component } from '@angular/core';\nimport { TngPress } from '@tailng-ui/primitives';\n\n@Component({\n  standalone: true,\n  imports: [TngPress],\n  template: `\u003cbutton tngPress\u003eAction\u003c/button\u003e`,\n})\nexport class ExampleComponent {}\n```\n\n## Architecture\n\nTailNG is organized as an Nx workspace with layered packages:\n\n```text\napps/\n  tailng-ui/\n    docs/                  Documentation site\n    playground-plain-css/  Plain CSS playground\n    playground-registry/   Ownable install playground\n    playground-tailwind/   Tailwind playground\n\nlibs/\n  tailng/\n    cli/                   tailng command-line tool\n  tailng-ui/\n    cdk/                   Headless behavior and runtime utilities\n    primitives/            Headless Angular primitives\n    components/            Styled Angular components\n    theme/                 Theme engine and CSS contracts\n    icons/                 Icon wrappers\n    charts/                Chart wrappers\n    registry/              Ownable install metadata\n```\n\nLayering rules:\n\n- Components depend on primitives and CDK contracts.\n- Primitives depend on CDK behavior utilities.\n- Styling is separated from behavior.\n- Public APIs are exported from package entry points.\n- Deep imports are avoided.\n- Accessibility and keyboard behavior are treated as package contracts.\n\n## Product Direction\n\nTailNG is moving toward a component platform that supports both package installs and source ownership.\n\nCurrent priorities:\n\n- Accessibility-first primitives and components.\n- Wrapper abstractions that keep app usage simple.\n- Component style contracts for slots, states, tokens, and hooks.\n- No hard dependency on Tailwind or any single CSS framework.\n- Copy-source installation through the `tailng` CLI.\n- Stable package boundaries across CDK, primitives, components, theme, registry, and docs.\n\n## Development\n\nRequirements:\n\n- Node.js `\u003e=20.20.0`\n- pnpm `\u003e=10.30.0`\n\nInstall dependencies:\n\n```bash\npnpm install\n```\n\nRun the documentation site:\n\n```bash\npnpm start:docs\n```\n\nRun playgrounds:\n\n```bash\npnpm start:vanilla\npnpm start:tailwind\n```\n\nBuild packages and apps:\n\n```bash\npnpm run build\n```\n\nBuild selected targets:\n\n```bash\npnpm run build:docs\npnpm run build:theme\npnpm run build:cli\npnpm run build:vanilla\npnpm run build:tailwind\n```\n\nBuild and publish docs locally (Cloudflare Pages):\n\n```bash\nCF_DOCS_PROJECT_NAME=taling-dev \\\nCLOUDFLARE_API_TOKEN=90Oh4-tjMr9Fxj8naoK_8odkfw8QdbHpS-CVNTf- \\\nCLOUDFLARE_ACCOUNT_ID=218f66f3a999f3f020117242ec252f18 \\\n./tools/build-deploy-docs.sh\n```\n\nNotes:\n\n- `CF_DOCS_PROJECT_NAME` maps to the Cloudflare Pages project name.\n- `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID` are required by `wrangler`.\n- If needed, you can override branch and output behavior with `CF_PAGES_BRANCH` and `DOCS_DIST`.\n\nGenerate static output:\n\n```bash\npnpm run seo:docs\npnpm run seo:vanilla\npnpm run seo:tailwind\n```\n\nIf prerendering fails because Chrome is missing, install the browser once:\n\n```bash\npnpm exec puppeteer browsers install chrome\n```\n\n## Testing and Quality\n\nRun all package tests:\n\n```bash\npnpm run test:packages\n```\n\nRun the full Vitest suite:\n\n```bash\npnpm run test:all\n```\n\nRun targeted tests:\n\n```bash\npnpm run test:cdk\npnpm run test:primitives\npnpm run test:components\npnpm run test:theme\npnpm run test:icons\npnpm run test:charts\npnpm run test:registry\npnpm run test:cli\npnpm run test:docs\n```\n\nLint and format:\n\n```bash\npnpm run lint\npnpm run format:nx\npnpm run format:prettier\n\npnpm nx lint docs\npnpm nx lint cdk\npnpm nx lint primitives\n\n```\n\nTypecheck key package surfaces:\n\n```bash\npnpm run typecheck:registry\npnpm run typecheck:cli\npnpm run typecheck:docs\n```\n\nRun the ownable install contract checks:\n\n```bash\npnpm run verify:ownable-contracts\n```\n\n## TailNG CLI\n\nBuild and run the local CLI:\n\n```bash\npnpm run build:cli\npnpm run run:tailng -- list\n```\n\nPreview generated files:\n\n```bash\npnpm run run:tailng -- add button --cwd apps/tailng-ui/playground-registry --dry-run\n```\n\nGenerate files:\n\n```bash\npnpm run run:tailng -- add button --cwd apps/tailng-ui/playground-registry\n```\n\nOverwrite existing generated files:\n\n```bash\npnpm run run:tailng -- add button --cwd apps/tailng-ui/playground-registry --force\n```\n\n`tailng add \u003ccomponent-name\u003e` writes source under:\n\n```text\n\u003ccwd\u003e/src/app/tailng-ui/\u003ccomponent\u003e/\n```\n\nImport generated components from the local app path:\n\n```ts\nimport { TngButton } from './tailng-ui/button';\n```\n\nCommon aliases supported by `tailng add`:\n\n| Alias                                     | Canonical item     |\n| ----------------------------------------- | ------------------ |\n| `slide-toggle`                            | `switch`           |\n| `sidenav`, `sidebar`, `side-nav`, `sheet` | `drawer`           |\n| `expansion-panel`                         | `accordion`        |\n| `spinner`                                 | `progress-spinner` |\n| `snackbar`, `sonner`                      | `toast`            |\n\n## Component Guidelines\n\n- Use standalone Angular APIs.\n- Prefer signals and `input()` for component inputs.\n- Keep behavior and styling separate.\n- Avoid default exports.\n- Use explicit return types.\n- Keep public APIs intentional and documented.\n- Preserve accessibility semantics, roles, states, and keyboard behavior.\n- Add or update tests when changing behavior.\n\n## Documentation\n\n- Website: [https://tailng.dev](https://tailng.dev)\n- GitHub: [https://github.com/tailng/tailng-ui](https://github.com/tailng/tailng-ui)\n- npm components: [@tailng-ui/components](https://www.npmjs.com/package/@tailng-ui/components)\n- npm CLI: [tailng](https://www.npmjs.com/package/tailng)\n\n## Contributing\n\nContributions are welcome.\n\nBefore submitting a PR:\n\n- Run relevant tests and lint checks.\n- Respect Nx boundaries and package layering.\n- Avoid deep imports.\n- Keep typing strict.\n- Include docs or playground coverage for user-facing changes.\n\n## License\n\nMIT © 2026 TailNG\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailng%2Ftailng-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftailng%2Ftailng-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailng%2Ftailng-ui/lists"}