{"id":38841778,"url":"https://github.com/cute-widgets/base","last_synced_at":"2026-01-25T13:00:27.983Z","repository":{"id":330927291,"uuid":"1122856204","full_name":"cute-widgets/base","owner":"cute-widgets","description":"Open-source UI components for Angular applications","archived":false,"fork":false,"pushed_at":"2025-12-30T05:31:25.000Z","size":1002,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-08T15:30:28.413Z","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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cute-widgets.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2025-12-25T17:04:21.000Z","updated_at":"2026-01-05T23:40:12.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/cute-widgets/base","commit_stats":null,"previous_names":["cute-widgets/base"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cute-widgets/base","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cute-widgets%2Fbase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cute-widgets%2Fbase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cute-widgets%2Fbase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cute-widgets%2Fbase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cute-widgets","download_url":"https://codeload.github.com/cute-widgets/base/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cute-widgets%2Fbase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28753411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T10:25:12.305Z","status":"ssl_error","status_checked_at":"2026-01-25T10:25:11.933Z","response_time":113,"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-17T14:00:29.595Z","updated_at":"2026-01-25T13:00:27.946Z","avatar_url":"https://github.com/cute-widgets.png","language":"TypeScript","readme":"# CuteWidgets\n\n**[@cute-widgets/base](https://github.com/cute-widgets/base)** is an open-source UI component library for Angular applications.\nAll components are implemented as native directives and styled using the design and utility\nclasses of the [Bootstrap 5+](https://getbootstrap.com/) framework. At the same time, the internal implementation and external API of \ncore **Cute Widgets** are based on the source code of the popular MIT-licensed [Angular Material](https://material.angular.dev/) \nlibrary. In a sense, **[@cute-widgets/base](https://github.com/cute-widgets/base)** is a complete reincarnation of the latter.\n\n### Architecture and Design Principles\n\nComponents adopt structural and behavioral patterns from **Angular Material**, including:\n\n- Consistent input/output naming (`[disabled]`, `(change)`)\n- Form control integration via `ControlValueAccessor`\n- Content projection using well-defined slots\n- Focus management and keyboard navigation\n- Accessibility attributes (ARIA roles, labels, states)\n- Responsive behavior out of the box\n- Seamless integration with **Bootstrap** classes and layout\n\n\n### Highlights\n\n- **35+ free components**\n\nThe full set of [Angular Material](https://material.angular.dev/) 20+ components is \navailable in the open-source `@cute-widgets/base` package.\n\n- **Looks like Bootstrap** \n\nVisual styling adheres to [Bootstrap 5+](https://getbootstrap.com/) CSS classes.\nComponents apply standard class names such as `.btn`, `.form-control`, `.table`, and `.card`,\nensuring compatibility with existing Bootstrap projects.\n\n- **Themes out of the box**\n\nSupports Bootstrap CSS variables, dark mode, embedded and custom color themes. The Bootstrap icon font is set by default.\n\n- **Powered by Angular Material**\n\nFully redesigned code of the popular library with almost full \nprogram interface compatibility, full `a11y`, keyboard navigation, internationalization, and enterprise-grade \nstability.\n\n- **Ready for teams**\n\nStandalone components, signals, SSR, and lazy loading — all Angular’s latest features.\nNo more custom CSS hacks and design compromises. Just a seamless, production-ready UI library for Angular 20+ applications.\n\n- **PRO components**\n\nAdvanced featured components (Carousel, ChartJs, EditMask, Dropdown, etc.) \nare available in `@cute-widgets/pro` library and need the Commercial license.\n \n### Get Started\n\n1. Install the open-source library\n```bash\nnpm install @cute-widgets/base\n```\nor with yarn\n```bash\nyarn add @cute-widgets/base\n```\n\n2. Copy and paste the following excerpt in your _src/styles.scss_ file to include the minimum required compiled and minified CSS bundles:\n\n```scss\n@use \"bootstrap/dist/css/bootstrap.min.css\";\n//@use \"bootstrap/dist/css/bootstrap.rtl.min.css\";\n@use \"bootstrap-icons/font/bootstrap-icons\";\n@use '@angular/cdk/overlay-prebuilt.css';\n```\n\n\u003e **Note**   \nYou don't need to include **Bootstrap**'s compiled and minified JavaScript plugins and use `data-bs-*` attributes in your components. All the necessary behavior is implemented within the Cute Widgets themselves.\n\n3. Import components\n\nJust import the desired component module and start using it.\n\n```typescript\n// app.component.ts\nimport {CuteButtonModule} from '@cute-widgets/base/button';\nimport {CuteCardModule} from '@cute-widgets/base/card';\n\n@Component({\n    selector: 'app-root',\n    template: `\n        \u003ccute-card\u003e\n            \u003ccute-card-header\u003e My header \u003c/cite-card-header\u003e\n            \u003ccute-card-body\u003e My body \u003c/cute-card-body\u003e\n            \u003ccute-card-footer\u003e    \n                \u003cbutton cute-button color=\"primary\"\u003eClick me\u003c/button\u003e\n            \u003c/cute-card-footer\u003e    \n        \u003c/cute-card\u003e\n    `,\n    imports: [CuteButtonModule, CuteCardModule],\n})\nexport class AppComponent {}\n```\n\n\n### Why @cute-widgets/base?\n\n###### ✅ Simpler than Angular Material\n\nAngular Material is powerful but often too heavy for simple projects.\n`@cute-widgets/base` offers:\n\n- Smaller bundle size\n- Fewer dependencies\n- More intuitive APIs\n- No mandatory theming engine\n\n###### ✅ Better than raw Bootstrap\n\nBootstrap is great, but lacks true Angular integration.\nOur components:\n\n- Are native Angular directives\n- Support reactive forms\n- Have proper change detection\n- Emit events, not just DOM events\n\n###### ✅ Designed for Real Projects\n\nWe focus on what developers actually need:\n\n- Clean, readable code\n- Predictable behavior\n- Easy customization\n- Supporting i18n and RTL\n- Great developer experience\n\n###### ✅ All components:\n\n- Use standard Bootstrap classes (e.g., `.btn`, `.form-control`)\n- Are fully accessible (ARIA, keyboard support)\n- Work with Bootstrap’s grid and utilities\n- Support dark mode via Bootstrap’s `.bg-dark`, `.text-white`, etc.\n\n### What's the next\n\nNow you have a full set of open-source components available in the **Angular Material** library since **20.x** version, but with the `cute` prefix and styled with **Bootstrap 5+**. In fact, you have much more.\n\n\u003e **Note**  \n\u003e The developers of **CuteWidgets** have tried to ensure maximum compatibility in terms of \n\u003e selector names and input/output program interfaces with the parent library, changing only its \n\u003e visual representation. However, 100% compatibility of the internal API of components and \n\u003e services is not guaranteed and may change in the future.\n\nTo simplify the process of getting started with **@cute-widgets/base** components the small `projects/showcase` application was created.\nAll you need to do is run the `ng serve` command in the terminal window and navigate to http://localhost:4200 in the browser, or press \n`o+Enter` in the development server's console window. For a detailed description of using a specific component, see the according **.md** file in the component's folder.\n\nHere is another example of using base components similar to **Bootstrap**, but with **Angular Material** power. As you can see we just replace the **mat*** prefixes with **cute*** in a component's template:\n\n```html\n\u003c!-- @angular/material --\u003e\n\u003cbutton matButton=\"outlined\" color=\"primary\" \n        (click)=\"onSaveButtonClick()\"\u003e\n    \u003cmat-icon\u003e save \u003c/mat-icon\u003e\n    Save changes\n\u003c/button\u003e \n```\n\n```html\n\u003c!-- @cute-widgets/base --\u003e\n\u003cbutton cuteButton=\"outlined\" color=\"primary\" \n        (click)=\"onSaveButtonClick()\"\u003e\n  \u003ccute-icon\u003e bi-floppy \u003c/cute-icon\u003e\n  Save changes\n\u003c/button\u003e \n```\n\n\n### Contributing\n\nFor bug reports or feature requests, please use [GitHub Issues](https://github.com/cute-widgets/base/issues).\nTo contribute to the project, `fork` the **CuteWidgets** project and create a `Pull Request` in a separate branch.\n\n### License\nApache-2.0\n\n---\n© 2025 CuteWidgets Team. All rights reserved. 🌐\n\n\n\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries built on Bootstrap"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcute-widgets%2Fbase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcute-widgets%2Fbase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcute-widgets%2Fbase/lists"}