xUI is a customizable Angular 20 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
• Packages
• Installation
• Browser Support
• Development
• Issues
• Roadmap

Packages

| Package | Usage | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | | Core | | Core package required by all other packages | | Badge | | Badge component | | Breadcrumb | | Breadcrumb component | | Button | | Button component | | Button Group | | Button Group component | | Checkbox | | Checkbox component | | Form Field | | Form Field component | | Icon | | Icon component | | Input | | Input component | | Label | | Label component | | Skeleton | | Skeleton component | | Sonner | | Sonner component | | Status | | Status component | | Table | | Table component |

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

• [ ] Accordion
• [ ] Alert
• [ ] Alert Dialog
• [ ] Avatar
• [ ] Calendar
• [ ] Card
• [ ] Carousel
• [ ] Collapsible
• [ ] Combobox
• [ ] Command
• [ ] Date Picker
• [ ] Date Range Picker
• [ ] Dialog
• [ ] Hover Card
• [ ] Menu
• [ ] Pagination
• [ ] Popover
• [ ] Progress
• [ ] Radio Group
• [ ] Scroll Area
• [ ] Select
• [ ] Separator
• [ ] Sheet
• [ ] Slider
• [ ] Spinner
• [ ] Switch
• [ ] Tabs
• [ ] Toggle
• [ ] Tooltip
• [ ] Typography
• [ ] Input OTP
• [ ] Toggle Group

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

• adjust generator to generate stories into the apps/storybook