https://github.com/walissoncf/wally-ui
Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.
https://github.com/walissoncf/wally-ui
angular angular-library tailwind wally-ui
Last synced: 3 months ago
JSON representation
Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.
- Host: GitHub
- URL: https://github.com/walissoncf/wally-ui
- Owner: WalissonCF
- License: mit
- Created: 2025-09-17T23:33:48.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-10-09T02:09:40.000Z (4 months ago)
- Last Synced: 2025-10-10T18:52:20.995Z (4 months ago)
- Topics: angular, angular-library, tailwind, wally-ui
- Language: HTML
- Homepage: https://wally-ui.com/
- Size: 288 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Wally UI
A modern Angular component library with individual component installation, Tailwind CSS styling, and enterprise-grade accessibility.
[](https://www.npmjs.com/package/wally-ui)
[](https://opensource.org/licenses/MIT)
**[Live Documentation](https://wally-ui.com/)**
## Installation
### List all available components
```bash
npx wally-ui list
```
### Install a component
```bash
npx wally-ui add button
npx wally-ui add input
npx wally-ui add carousel
npx wally-ui add breadcrumb
```
Components are installed directly into `src/app/components/wally-ui/{component}/`
## Requirements
- Tailwind CSS v3 or v4
- Node.js 18+
- Angular 17+
## Available Components
| Component | Status | Features |
|-----------|--------|----------|
| **Button** | Production | Variants (primary, secondary), loading states, ARIA support |
| **Input** | Production | Form integration, validation, password toggle, loading states |
| **Carousel** | Production | Touch gestures, keyboard navigation, circular buffer algorithm |
| **Breadcrumb** | Production | Semantic HTML, ARIA navigation, responsive design |
## Quick Start
### Basic Usage
```typescript
import { Component } from '@angular/core';
import { Button } from './components/wally-ui/button/button';
@Component({
selector: 'app-example',
imports: [Button],
template: `
Click me
`
})
export class ExampleComponent {}
```
### Reactive Forms Integration
```typescript
import { Component } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { Input } from './components/wally-ui/input/input';
@Component({
selector: 'app-form',
imports: [Input, ReactiveFormsModule],
template: `
`
})
export class FormComponent {
form = this.fb.group({
email: ['', [Validators.required, Validators.email]]
});
constructor(private fb: FormBuilder) {}
}
```
## Component Examples
### Button Component
```html
Primary Button
Secondary Button
Loading...
Disabled
```
### Input Component
```html
```
### Carousel Component
```html
Slide 1
Slide 2
Slide 3
```
### Breadcrumb Component
```html
```
## Project Structure
Components install into:
```
src/app/components/wally-ui/{component}/
├── {component}.ts # Component logic
└── {component}.html # Template
```
## Features
- Zero configuration - install only what you need
- Enterprise-grade accessibility with ARIA support
- Dark mode support out of the box
- Server-Side Rendering compatible
- Angular Signals architecture
- TypeScript interfaces included
- Copy-paste ready examples
## Documentation
Full documentation and live examples: **[wally-ui.com](https://wally-ui.com/)**
## License
MIT