@xui/button

xUI

---

xUI is a customizable Angular 19 UI Library with full support of TailwindCSS styling based on popular React library ShardCN and its Angular alternative SpartanUI.

Features

• 35+ High-Quality Angular Components: Ready to use out of the box.
• Powerful Theme Customization: Detailed customization options with default themes.
• High Performance: Supports Zoneless, OnPush mode, and Signals for optimized performance.
• Accessibility: Supports WCAG 2.0 standards.
• Powerful Theme Customization: Install each visual component and customize it according your needs
• TypeScript: Written with predictable static types.

Table of Contents

• Storybook
• StackBlitz Demo
• Documentation
• Live Demo
• Installation

Installation

Install package with PNPM

pnpm i @xui/core ....

Browser Support

xUI Supports most recent browsers according to Angular support.

Development

The project uses NX and Angular to build the package.

To start docs page use

pnpm start

To start storybook use

pnpm storybook

Issues

If you find any issues in the library or have and idea for an improvement feel free to open an issue.

Roadmap (12/42)

• [ ] Accordion
• [ ] Alert
• [ ] Alert Dialog
• [ ] Avatar
• [x] Badge
• [x] Breadcrumb
• [x] Button
• [x] Button Group
• [ ] Calendar
• [ ] Card
• [ ] Carousel
• [x] Checkbox
• [ ] Collapsible
• [ ] Combobox
• [ ] Command
• [ ] Date Picker
• [ ] Date Range Picker
• [ ] Dialog
• [x] Form Field
• [ ] Hover Card
• [x] Icon
• [x] Input
• [x] Label
• [ ] Menu
• [ ] Pagination
• [ ] Popover
• [ ] Progress
• [ ] Radio Group
• [ ] Scroll Area
• [ ] Select
• [ ] Separator
• [ ] Sheet
• [x] Skeleton
• [ ] Slider
• [x] Sonner
• [ ] Spinner
• [x] Status
• [ ] Switch
• [ ] Table
• [ ] Tabs
• [ ] Toggle
• [ ] Tooltip
• [ ] Typography

Additional

• [ ] Decagram
• [ ] Settings
• [ ] Drawer
• [ ] Panel Bar
• [ ] Textarea
• [ ] Time Picker
• [ ] Image Upload
• [ ] Banner
• [ ] Snack bar

Opinionated "components"

• [ ] Graph View (Nodes)
• [ ] Analysis
• [ ] Charts (NG Charts?)

CLI

Make cli to install the components

TODO

• Button

  • Icon
  • Shine

• Breadcrumb

  • fix styling issues
  • on hover stuff
  • data driven component

• Sonner

  • Colors