https://github.com/cute-widgets/base
Open-source UI components for Angular applications
https://github.com/cute-widgets/base
Last synced: 2 days ago
JSON representation
Open-source UI components for Angular applications
- Host: GitHub
- URL: https://github.com/cute-widgets/base
- Owner: cute-widgets
- License: apache-2.0
- Created: 2025-12-25T17:04:21.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-12-30T05:31:25.000Z (28 days ago)
- Last Synced: 2026-01-08T15:30:28.413Z (19 days ago)
- Language: TypeScript
- Size: 979 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- fucking-awesome-angular - cute-widgets - An open‑source Angular UI library that provides native directive‑based components styled with Bootstrap 5+ utilities and design classes. (Third Party Components / UI Libraries built on Bootstrap)
- awesome-angular - cute-widgets - An open‑source Angular UI library that provides native directive‑based components styled with Bootstrap 5+ utilities and design classes. (Third Party Components / UI Libraries built on Bootstrap)
README
# CuteWidgets
**[@cute-widgets/base](https://github.com/cute-widgets/base)** is an open-source UI component library for Angular applications.
All components are implemented as native directives and styled using the design and utility
classes of the [Bootstrap 5+](https://getbootstrap.com/) framework. At the same time, the internal implementation and external API of
core **Cute Widgets** are based on the source code of the popular MIT-licensed [Angular Material](https://material.angular.dev/)
library. In a sense, **[@cute-widgets/base](https://github.com/cute-widgets/base)** is a complete reincarnation of the latter.
### Architecture and Design Principles
Components adopt structural and behavioral patterns from **Angular Material**, including:
- Consistent input/output naming (`[disabled]`, `(change)`)
- Form control integration via `ControlValueAccessor`
- Content projection using well-defined slots
- Focus management and keyboard navigation
- Accessibility attributes (ARIA roles, labels, states)
- Responsive behavior out of the box
- Seamless integration with **Bootstrap** classes and layout
### Highlights
- **35+ free components**
The full set of [Angular Material](https://material.angular.dev/) 20+ components is
available in the open-source `@cute-widgets/base` package.
- **Looks like Bootstrap**
Visual styling adheres to [Bootstrap 5+](https://getbootstrap.com/) CSS classes.
Components apply standard class names such as `.btn`, `.form-control`, `.table`, and `.card`,
ensuring compatibility with existing Bootstrap projects.
- **Themes out of the box**
Supports Bootstrap CSS variables, dark mode, embedded and custom color themes. The Bootstrap icon font is set by default.
- **Powered by Angular Material**
Fully redesigned code of the popular library with almost full
program interface compatibility, full `a11y`, keyboard navigation, internationalization, and enterprise-grade
stability.
- **Ready for teams**
Standalone components, signals, SSR, and lazy loading — all Angular’s latest features.
No more custom CSS hacks and design compromises. Just a seamless, production-ready UI library for Angular 20+ applications.
- **PRO components**
Advanced featured components (Carousel, ChartJs, EditMask, Dropdown, etc.)
are available in `@cute-widgets/pro` library and need the Commercial license.
### Get Started
1. Install the open-source library
```bash
npm install @cute-widgets/base
```
or with yarn
```bash
yarn add @cute-widgets/base
```
2. Copy and paste the following excerpt in your _src/styles.scss_ file to include the minimum required compiled and minified CSS bundles:
```scss
@use "bootstrap/dist/css/bootstrap.min.css";
//@use "bootstrap/dist/css/bootstrap.rtl.min.css";
@use "bootstrap-icons/font/bootstrap-icons";
@use '@angular/cdk/overlay-prebuilt.css';
```
> **Note**
You 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.
3. Import components
Just import the desired component module and start using it.
```typescript
// app.component.ts
import {CuteButtonModule} from '@cute-widgets/base/button';
import {CuteCardModule} from '@cute-widgets/base/card';
@Component({
selector: 'app-root',
template: `
My header
My body
Click me
`,
imports: [CuteButtonModule, CuteCardModule],
})
export class AppComponent {}
```
### Why @cute-widgets/base?
###### ✅ Simpler than Angular Material
Angular Material is powerful but often too heavy for simple projects.
`@cute-widgets/base` offers:
- Smaller bundle size
- Fewer dependencies
- More intuitive APIs
- No mandatory theming engine
###### ✅ Better than raw Bootstrap
Bootstrap is great, but lacks true Angular integration.
Our components:
- Are native Angular directives
- Support reactive forms
- Have proper change detection
- Emit events, not just DOM events
###### ✅ Designed for Real Projects
We focus on what developers actually need:
- Clean, readable code
- Predictable behavior
- Easy customization
- Supporting i18n and RTL
- Great developer experience
###### ✅ All components:
- Use standard Bootstrap classes (e.g., `.btn`, `.form-control`)
- Are fully accessible (ARIA, keyboard support)
- Work with Bootstrap’s grid and utilities
- Support dark mode via Bootstrap’s `.bg-dark`, `.text-white`, etc.
### What's the next
Now 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.
> **Note**
> The developers of **CuteWidgets** have tried to ensure maximum compatibility in terms of
> selector names and input/output program interfaces with the parent library, changing only its
> visual representation. However, 100% compatibility of the internal API of components and
> services is not guaranteed and may change in the future.
To simplify the process of getting started with **@cute-widgets/base** components the small `projects/showcase` application was created.
All 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
`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.
Here 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:
```html
save
Save changes
```
```html
bi-floppy
Save changes
```
### Contributing
For bug reports or feature requests, please use [GitHub Issues](https://github.com/cute-widgets/base/issues).
To contribute to the project, `fork` the **CuteWidgets** project and create a `Pull Request` in a separate branch.
### License
Apache-2.0
---
© 2025 CuteWidgets Team. All rights reserved. 🌐