🥖 Bakery UI

A delicious Angular UI component library with bakery-inspired theming and Storybook integration.

✨ Features

• 🎨 Bakery-inspired theming with warm, golden colors
• 🧩 Modular components built with Angular 20
• 📱 Responsive design that works on all devices
• 🔧 TypeScript support with full type definitions
• 📖 Storybook integration for component development
• 🎯 Tree-shakable for optimal bundle size
• ♿ Accessible components following WCAG guidelines

📦 Installation

npm install bakery-ui

🚀 Quick Start

1. Import the component in your Angular module or standalone component:

import { Component } from '@angular/core';
import { Button } from 'bakery-ui';

@Component({
  selector: 'app-example',
  imports: [Button],
  template: `
    <lib-button 
      label="Order Now" 
      variant="primary" 
      size="medium">
    </lib-button>
  `
})
export class ExampleComponent {}

2. Use in your template:

<!-- Primary button -->
<lib-button label="Order Now" variant="primary" size="medium"></lib-button>

<!-- Secondary button -->
<lib-button label="Learn More" variant="secondary" size="large"></lib-button>

<!-- Danger button -->
<lib-button label="Delete" variant="danger" size="small" [disabled]="false"></lib-button>

🧩 Available Components

Button Component

A versatile button component with bakery-inspired styling.

Properties:

• label: string - Button text (default: 'Button')
• variant: 'primary' | 'secondary' | 'danger' - Button style (default: 'primary')
• size: 'small' | 'medium' | 'large' - Button size (default: 'medium')
• disabled: boolean - Disabled state (default: false)

Example:

<lib-button 
  label="Add to Cart" 
  variant="primary" 
  size="large"
  [disabled]="isLoading">
</lib-button>

🎨 Theming

Bakery UI comes with a built-in bakery-inspired theme featuring:

• Primary: Golden colors reminiscent of fresh bread
• Secondary: Rich brown tones like chocolate
• Danger: Warm red for important actions
• Hover effects: Subtle animations and depth
• Typography: Clean, readable fonts

📖 Storybook

View all components in our interactive Storybook:

# Clone the repository
git clone https://github.com/vivekraj-kr/bakery-ui.git
cd bakery-ui

# Install dependencies
npm install

# Run Storybook
ng run bakery-ui:storybook

🔧 Development

Building the Library

ng build bakery-ui

Running Tests

ng test

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📋 Requirements

• Angular 20.0.0 or higher
• Node.js 18.0.0 or higher
• npm 8.0.0 or higher

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Support

• 🐛 Report bugs
• 💡 Request features
• 📧 Contact us

🏆 Acknowledgments

• Built with Angular CLI
• Powered by Storybook
• Inspired by the warmth and comfort of bakeries everywhere

Made with ❤️ and a lot of ☕ by Vivek Raj