@sinequa/ui

✨ Elegant, customizable Angular UI components for building modern web applications. This library provides a comprehensive set of components such as buttons, dropdowns, cards, sidebar, tabs, and more, designed for flexibility and ease of use.

🗂️ Table of Contents

• Overview
• Installation
• Features
• Components
  • Button
  • Card
  • Sidebar
  • Tabs
  • Dropdown
  • Avatar
  • Badge
  • Divider
  • Popover
  • Input
  • List Item
  • Menu
  • Page Header
  • Search

📖 Overview

This library facilitates template management by providing a rich set of UI components such as buttons, dropdowns, cards, sidebar, and more. Each component is designed to be easily integrated and customized within your Angular application.

📦 Installation

Install via npm:

npm i @sinequa/ui

⭐ Features

• ✨ Modern, accessible Angular UI components
• 🎨 Highly customizable with variants and sizes
• ⚡ Easy integration and usage
• 🧱 Consistent design system

🧩 Components

🔘 Button

Stylized Angular button with multiple variants and sizes.

<button variant="outline" (click)="onClick()">Label</button>

🃏 Card

Container with header, content, and footer sections.

<Card>
  <CardHeader>Header</CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

📚 Sidebar

Sidebar menu with items and separators.

<sidebar>
  <sidebar-item>Item 1</sidebar-item>
  <sidebar-separator />
  <sidebar-item>Item 2</sidebar-item>
</sidebar>

📑 Tabs

Tab navigation with customizable tabs.

<tabs>
  <tab variant="selected2" [active]="true">Tab 1</tab>
  <tab>Tab 2</tab>
</tabs>

⬇️ Dropdown

Reusable dropdown menu component.

<Dropdown>
  <button>Toggle Dropdown</button>
  <div dropdown-content>Dropdown Content</div>
</Dropdown>

👤 Avatar

Display avatar images with fallback support.

<Avatar>
  <AvatarImage src="somesource" width="44" height="44" alt="avatar" />
  <AvatarFallback>
    <UserRound class="size-7 p-1" />
  </AvatarFallback>
</Avatar>

🏷️ Badge

Stylized badge for text or status.

<Badge variant="secondary">Badge Text</Badge>

➖ Divider

Horizontal and vertical dividers for content separation.

<HorizontalDivider />
<VerticalDivider />

💬 Popover

Display rich content in a portal, triggered by a button.

<Popover>
  <button>Popover trigger</button>
  <PopoverContent>Popover Content</PopoverContent>
</Popover>

⌨️ Input

Custom styled input and search input components.

<input type="text" />
<InputSearch placeholder="Search..." />

📋 List Item

Styled list items for lists and options.

<ul>
  <li role="listitem">Element 1</li>
  <li role="listitem" variant="destructive">Destructive element</li>
</ul>

📜 Menu

Dropdown menu with support for nested menus.

<Menu>
  <MenuContent>
    <MenuItem>Menu Item 1</MenuItem>
    <MenuSeparator />
    <MenuItem>Menu Item 2</MenuItem>
  </MenuContent>
</Menu>

📰 Page Header

Stylized header for pages.

<PageHeader class="fixed top-0 z-1 ml-8 w-full bg-white">
  <!-- Header content -->
</PageHeader>

🔍 Search

Container with search icon, input, and clear button.

<Search>
  <button>Additional button</button>
</Search>

📝 License

MIT