{"id":35797915,"url":"https://github.com/tociva/tailng","last_synced_at":"2026-01-31T10:03:18.570Z","repository":{"id":331590418,"uuid":"1127701015","full_name":"tociva/tailng","owner":"tociva","description":"Material like angular components built with tailwind. Using signal pattern from angular-20 onwards","archived":false,"fork":false,"pushed_at":"2026-01-26T17:33:17.000Z","size":2592,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-26T19:48:38.822Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tociva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-01-26T17:31:31.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tociva/tailng","commit_stats":null,"previous_names":["tociva/tailng"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/tociva/tailng","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tociva%2Ftailng","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tociva%2Ftailng/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tociva%2Ftailng/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tociva%2Ftailng/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tociva","download_url":"https://codeload.github.com/tociva/tailng/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tociva%2Ftailng/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28937819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T08:53:31.997Z","status":"ssl_error","status_checked_at":"2026-01-31T08:51:38.521Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2026-01-07T10:19:21.608Z","updated_at":"2026-01-31T10:03:18.525Z","avatar_url":"https://github.com/tociva.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries built on Tailwind CSS"],"readme":"# TailNG – Angular 21\n\nNx + Angular 21 + Tailwind starter for TailNG.\n\n## Included\n- `apps/docs` – demo \u0026 docs site\n- `apps/playground` – sandbox for testing components\n- `libs/ui` – UI component library (Button, Input, Card, etc.)\n- `libs/icons` – Bootstrap Icons wrapper\n- `libs/theme` – Tailwind preset + plugin\n- `libs/cdk` – utilities\n\n## Getting Started\n\n### Installation\n\n```bash\nyarn install\n```\n\n### Running the Playground\n\nThe playground is a development sandbox where you can test and preview components:\n\n```bash\nyarn playground\n```\n\nThis will start the playground application at `http://localhost:4200` (or the next available port).\n\n### Running the Docs Site\n\n```bash\nyarn docs\n```\n\n## Component Development Guide\n\n### Project Structure\n\nComponents are organized in the `libs/ui` directory:\n\n```\nlibs/ui/\n  ├── button/\n  │   └── src/\n  │       ├── button.component.ts\n  │       ├── button.component.html\n  │       ├── button.types.ts\n  │       ├── button.variants.ts\n  │       └── public-api.ts\n  ├── input/\n  │   └── src/\n  │       ├── input.component.ts\n  │       ├── input.component.html\n  │       └── public-api.ts\n  └── src/\n      └── public-api.ts  (main export file)\n```\n\n### Creating a New Component\n\n#### Step 1: Create Component Files\n\n1. **Create the component directory** in `libs/ui/`:\n   ```bash\n   mkdir -p libs/ui/my-component/src\n   ```\n\n2. **Create the component TypeScript file** (`libs/ui/my-component/src/my-component.component.ts`):\n   ```typescript\n   import { Component, input } from '@angular/core';\n\n   @Component({\n     selector: 'tng-my-component',\n     standalone: true,\n     templateUrl: './my-component.component.html',\n   })\n   export class TailngMyComponentComponent {\n     // Define your inputs using Angular signals\n     label = input\u003cstring\u003e('');\n     disabled = input(false);\n   }\n   ```\n\n3. **Create the component template** (`libs/ui/my-component/src/my-component.component.html`):\n   ```html\n   \u003cdiv class=\"my-component\"\u003e\n     \u003cspan\u003e{{ label() }}\u003c/span\u003e\n   \u003c/div\u003e\n   ```\n\n4. **Create the public API file** (`libs/ui/my-component/src/public-api.ts`):\n   ```typescript\n   export * from './my-component.component';\n   ```\n\n5. **Export from main UI library** (`libs/ui/src/public-api.ts`):\n   ```typescript\n   export * from '../my-component/src/public-api';\n   ```\n\n#### Step 2: Create a Demo Component in Playground\n\n1. **Determine the category** for your component:\n   - Form Controls: `apps/playground/src/app/demos/form-controls/`\n   - Buttons \u0026 Indicators: `apps/playground/src/app/demos/buttons-indicators/`\n   - Layout: `apps/playground/src/app/demos/layout/`\n   - Navigation: `apps/playground/src/app/demos/navigation/`\n   - Popups \u0026 Overlays: `apps/playground/src/app/demos/popups-overlays/`\n   - Data Table \u0026 Structure: `apps/playground/src/app/demos/data-table-structure/`\n\n2. **Create the demo component directory**:\n   ```bash\n   mkdir -p apps/playground/src/app/demos/[category]/my-component\n   ```\n\n3. **Create the demo component** (`my-component-demo.component.ts`):\n   ```typescript\n   import { Component } from '@angular/core';\n   import { TailngMyComponentComponent } from '@tociva/tailng-ui';\n\n   @Component({\n     selector: 'playground-my-component-demo',\n     standalone: true,\n     imports: [TailngMyComponentComponent],\n     templateUrl: './my-component-demo.component.html',\n   })\n   export class MyComponentDemoComponent {}\n   ```\n\n4. **Create the demo template** (`my-component-demo.component.html`):\n   ```html\n   \u003cdiv\u003e\n     \u003ch1 class=\"text-2xl font-bold mb-6\"\u003eMy Component\u003c/h1\u003e\n     \n     \u003cdiv class=\"space-y-6\"\u003e\n       \u003csection\u003e\n         \u003ch2 class=\"text-lg font-semibold mb-3\"\u003eBasic Usage\u003c/h2\u003e\n         \u003ctng-my-component label=\"Hello World\"\u003e\u003c/tng-my-component\u003e\n       \u003c/section\u003e\n\n       \u003csection\u003e\n         \u003ch2 class=\"text-lg font-semibold mb-3\"\u003eWith Props\u003c/h2\u003e\n         \u003ctng-my-component label=\"Disabled\" [disabled]=\"true\"\u003e\u003c/tng-my-component\u003e\n       \u003c/section\u003e\n     \u003c/div\u003e\n   \u003c/div\u003e\n   ```\n\n#### Step 3: Add Route to Playground\n\n1. **Add the route** in `apps/playground/src/app/app.routes.ts`:\n   ```typescript\n   {\n     path: '[category]/my-component',\n     loadComponent: () =\u003e\n       import('./demos/[category]/my-component/my-component-demo.component').then(\n         (m) =\u003e m.MyComponentDemoComponent\n       ),\n   },\n   ```\n\n   Replace `[category]` with the appropriate category path (e.g., `form-controls`, `buttons-indicators`, etc.).\n\n#### Step 4: Add to Navigation\n\n1. **Add to sidebar navigation** in `apps/playground/src/app/app.component.html`:\n   ```html\n   \u003ca\n     routerLink=\"/[category]/my-component\"\n     class=\"flex items-center gap-2 px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-50 transition\"\n     routerLinkActive=\"bg-primary/10 text-primary font-medium\"\n     [routerLinkActiveOptions]=\"{ exact: false }\"\n   \u003e\n     \u003cspan class=\"h-2 w-2 rounded-full bg-gray-300\"\u003e\u003c/span\u003e\n     My Component\n   \u003c/a\u003e\n   ```\n\n2. **Add to home page** in `apps/playground/src/app/home/home.component.ts`:\n   ```typescript\n   {\n     name: 'My Component',\n     route: '/[category]/my-component',\n   },\n   ```\n\n### Updating an Existing Component\n\n1. **Modify the component** in `libs/ui/[component-name]/src/`\n2. **Update the demo** in `apps/playground/src/app/demos/[category]/[component-name]/`\n3. **Test in playground** - The changes will be hot-reloaded automatically\n\n### Testing Components in Playground\n\n1. **Start the playground**:\n   ```bash\n   yarn playground\n   ```\n\n2. **Navigate to the component**:\n   - Visit the home page to see all components in a tiled layout\n   - Click on any component tile to view its demo\n   - Or use the sidebar navigation to browse by category\n\n3. **Test different scenarios**:\n   - Update the demo component to test various props and states\n   - Check responsive behavior\n   - Test edge cases and error states\n\n### Component Categories\n\nComponents are organized into the following categories:\n\n#### Form Controls\n- Autocomplete, Checkbox, Chips, Datepicker, Form Field, Input, Radio Button, Select, Slider, Slide Toggle, Timepicker\n\n#### Buttons \u0026 Indicators\n- Button, Button Toggle, Badge, Icon, Ripples, Progress Bar, Progress Spinner\n\n#### Layout\n- Card, Divider, Expansion Panel, Grid List, List, Tabs, Toolbar\n\n#### Navigation\n- Menu, Sidenav, Stepper, Paginator\n\n#### Popups \u0026 Overlays\n- Dialog, Bottom Sheet, Snackbar, Tooltip\n\n#### Data Table \u0026 Structure\n- Table, Sort Header, Tree\n\n### Best Practices\n\n1. **Use Angular Signals**: Prefer `input()` for component inputs instead of `@Input()`\n2. **Standalone Components**: All components should be standalone\n3. **Tailwind CSS**: Use Tailwind utility classes for styling\n4. **Type Safety**: Define types in separate `.types.ts` files when needed\n5. **Variants**: Use a `.variants.ts` file for variant classes (see `button.variants.ts` as an example)\n6. **Demo Components**: Create comprehensive demos showing different use cases\n7. **Naming Convention**: \n   - Component selector: `tng-[component-name]`\n   - Component class: `Tailng[ComponentName]Component`\n   - Demo component: `[ComponentName]DemoComponent`\n\n### Building\n\nBuild all projects:\n\n```bash\nyarn build\n```\n\n## Development Workflow\n\n1. **Create or update a component** in `libs/ui/`\n2. **Create/update the demo** in `apps/playground/src/app/demos/`\n3. **Add/update routes** in `app.routes.ts`\n4. **Update navigation** in `app.component.html` and `home.component.ts`\n5. **Test in playground** by running `yarn playground`\n6. **Iterate** until the component works as expected\n\n## Project Structure Overview\n\n```\ntailng/\n├── apps/\n│   ├── docs/              # Documentation site\n│   └── playground/        # Component testing playground\n│       └── src/\n│           └── app/\n│               ├── demos/         # Demo components organized by category\n│               ├── home/          # Home page component\n│               ├── app.component.* # Main app component with navigation\n│               └── app.routes.ts  # Route configuration\n├── libs/\n│   ├── ui/                # UI component library\n│   ├── icons/             # Icon components\n│   ├── theme/             # Tailwind configuration\n│   └── cdk/               # Utilities\n└── package.json\n```\n\n## Additional Resources\n\n- [Angular Documentation](https://angular.dev)\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs)\n- [Nx Documentation](https://nx.dev)\n\n## Publish to npm\n\n```\ncd dist/libs/cdk \u0026\u0026 npm publish --access public --dry-run\n# make sure you're logged in\nnpm whoami || npm login\n\n# publish in order\ncd dist/libs/cdk   \u0026\u0026 npm publish --access public\ncd ../theme        \u0026\u0026 npm publish --access public\ncd ../icons        \u0026\u0026 npm publish --access public\ncd ../ui           \u0026\u0026 npm publish --access public\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftociva%2Ftailng","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftociva%2Ftailng","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftociva%2Ftailng/lists"}