{"id":19704657,"url":"https://github.com/standardkit/ui","last_synced_at":"2026-04-09T23:11:53.564Z","repository":{"id":192020447,"uuid":"685886756","full_name":"standardkit/ui","owner":"standardkit","description":"StandardKit UI - Angular Component Library","archived":false,"fork":false,"pushed_at":"2024-12-30T18:52:40.000Z","size":1177,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-10T12:02:32.471Z","etag":null,"topics":["angular","component-library","html","scss","typescript","ui"],"latest_commit_sha":null,"homepage":"https://standardkit.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/standardkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-01T08:32:48.000Z","updated_at":"2024-12-30T18:52:39.000Z","dependencies_parsed_at":"2024-12-28T15:33:27.044Z","dependency_job_id":null,"html_url":"https://github.com/standardkit/ui","commit_stats":null,"previous_names":["standardkit/ui"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/standardkit%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/standardkit%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/standardkit%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/standardkit%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/standardkit","download_url":"https://codeload.github.com/standardkit/ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241020186,"owners_count":19895382,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","component-library","html","scss","typescript","ui"],"created_at":"2024-11-11T21:23:53.018Z","updated_at":"2026-04-09T23:11:53.532Z","avatar_url":"https://github.com/standardkit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StandardKit UI\n\n## What is it?\n\nAngular Component Library for rapidly building dashboards \u0026 portals.\n\n- Admin Portal\n- Platform Configuration\n- System Monitoring / Jobs\n- Reporting Dashboard\n- SaaS Back-office\n\nBasically any sidebar-based dashboard with cards, tables, modals \u0026 forms.\n\n## Paradigms \u0026 Principles\n\n- Content Projection (named slots)\n- Defaults \u0026 Standards (works with minimal setup in a standard way)\n- Configure \u0026 Compose (specify what you need, build what you want)\n- Customize \u0026 Override (color outside the lines and enjoy freedom)\n\n[//]: # \"TODO : Fix www. subdomain working\"\n\nFor more information on underlying paradigms, visit [standardkit.dev](https://standardkit.dev).\n\n## Component Categories\n\n- Core \u0026 Common (button, icon, alert, card etc.)\n- Layout (sidebar, top-bar, navigation, card-page, sidebar-page etc.)\n- Tables (data-table, table, search, filter, pagination etc.)\n- Forms (text-input, select-input, multi-select-input, etc.)\n\n[//]: # \"TODO : Implement this website\"\n\nFor more information about components, check the documentation [docs.standardkit.dev](https://docs.standardkit.dev) or\nrun the `example` project in this repository.\n\n\u003e The docs are currently not yet live. Please run the `example` project locally instead for now with `ng serve`\n\n## Installation\n\n### NPM\n\nTo install StandardKit UI Components through npm, use:\n\n```bash\nnpm i @standardkit/ui\n```\n\n### Setup Styles\n\nGo to `angular.json` and add the scss folder to your include paths like this:\n\n\u003e Don't forget to add it for your tests as well!\n\n```json\n{\n  \"architect\": {\n    \"build\": {\n      \"options\": {\n        \"stylePreprocessorOptions\": {\n          \"includePaths\": [\"node_modules/@standardkit/ui/src/styles\"]\n        }\n      }\n    }\n  }\n}\n```\n\nThen, add the base styling and the theme variables.\n\n```scss\n@use \"@standardkit/ui/base\";\n@use \"@standardkit/ui/theme\";\n\n// Include StandardKit Fonts\n@include theme.include-default-fonts;\n@include theme.use-default-font;\n```\n\n### Icons\n\nInstall font awesome icons:\n\n```bash\nnpm install --save @fortawesome/fontawesome-free\n```\n\n[//]: # \"TODO : Add example of font awesome angular.json\"\n\nAdd the icon path to your angular.json as well.\n\n## Basic Examples\n\n### Layout\n\n```html\n\u003c!--sidebar.layout.html--\u003e\n\u003cui-sidebar-page\u003e\n  \u003cui-header brand=\"Admin Portal\"\u003e\n    \u003cui-user-menu [items]=\"menuItems\"\u003e\u003c/ui-user-menu\u003e\n  \u003c/ui-header\u003e\n\n  \u003cui-sidebar [navigationItems]=\"navigationItems\"\u003e\u003c/ui-sidebar\u003e\n\n  \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\u003c/ui-sidebar-page\u003e\n```\n\n### Page with Data Table\n\n```html\n\u003c!--data-table.page.html--\u003e\n\u003cui-top-bar [isFullWidth]=\"true\" name=\"Data Table\"\u003e\n  \u003cui-breadcrumbs [breadcrumbs]=\"breadcrumbs\"\u003e\u003c/ui-breadcrumbs\u003e\n  \u003cui-button (buttonClick)=\"onAddItem()\" icon=\"plus\"\u003eAdd Item\u003c/ui-button\u003e\n\u003c/ui-top-bar\u003e\n\n\u003cui-data-table (request)=\"onRequest($event)\" [columns]=\"columns\" [response]=\"response\"\u003e\u003c/ui-data-table\u003e\n```\n\n### Simple Form\n\n```html\n\u003c!--name.form.html--\u003e\n\u003cui-form [formGroup]=\"form\"\u003e\n  \u003cui-field name=\"name\"\u003e\n    \u003cui-label\u003eName\u003c/ui-label\u003e\n    \u003cui-text-input formControlName=\"name\"\u003e\n      \u003cng-container slot=\"error\"\u003eName is required\u003c/ng-container\u003e\n    \u003c/ui-text-input\u003e\n  \u003c/ui-field\u003e\n\n  \u003cui-button [isSubmit]=\"true\" (click)=\"onSubmit()\" icon=\"save\"\u003eSubmit\u003c/ui-button\u003e\n\u003c/ui-form\u003e\n```\n\n## Version Compatibility\n\n| Angular                   | StandardKit         |\n| ------------------------- | ------------------- |\n| Angular `16`              | Standardkit `0.1.0` |\n| Angular `17`              | `not supported`     |\n| Angular `18`              | StandardKit `0.2.0` |\n| Angular `19 - legacy`     | StandardKit `0.3.0` |\n| Angular `19 - standalone` | StandardKit `0.4.x` |\n\n## Migration Guide\n\n### 19 - `legacy` (`0.3.0`) to 19 - `standalone` (`0.4.x`)\n\n\u003e Warning: 19 - standalone is currently a work in progress. Migrate at your own risk.\n\n- Change imports from SkButtonModule to UiButton\n- change template usages from `\u003csk-button\u003e` to `\u003cui-button\u003e`\n\n#### Component updates\n\n- `ui-select-input` error slot now becomes `slot=\"error\"` (new) instead of `slot=\"footer\"` (old)\n- `ui-button` now has a `buttonClick` event that handles `keydown`/`tabindex` and takes into account `disabled` status\n\n### 16 to 19 - legacy\n\n- Rich text input has been removed along with the quill dependency. If you want to continue using it, copy the component\n  from old source code.\n\nJust upgrade angular itself, nothing is changed only version bumps. Create an issue if you need help migrating through\nv17.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstandardkit%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstandardkit%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstandardkit%2Fui/lists"}