UI Baza

A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.

📦 Installation

npm install @grandbazar/ui-baza

yarn add @grandbazar/ui-baza

pnpm add @grandbazar/ui-baza

🔧 Usage

import { Button } from '@grandbazar/ui-baza';

function App() {
  return (
    <Button onClick={() => alert('Hello!')}>
      Click me
    </Button>
  );
}

CSS Import

Important: UI Baza uses CSS cascade layers for proper style isolation. Import the styles with the lowest priority to allow your local variables to override library defaults:

@layer ui_baza_reset, ui_baza_tokens, base, theme, ui_baza_components, components, utilities;

@import '@grandbazar/ui-baza/css';

Customizing Design Tokens

You can override the default design tokens by defining your own CSS variables after importing the library:

:root {
  /* Override color tokens */
  --color-neutral: #1a1a1a;
  --color-accent: #0066ff;
  
  /* Override radius tokens */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-tooltip: 10px;
  --radius-content-xl: 24px;
  --radius-content-lg: 18px;
  --radius-content-md: 16px;
  --radius-content-sm: 14px;
  --radius-content-xs: 12px;
  --radius-image-xl: 18px;
  --radius-image-lg: 16px;
  --radius-image-md: 14px;
  --radius-image-sm: 12px;
  --radius-image-xs: 10px;
  --radius-image-2xs: 8px;
  --radius-image-3xs: 6px;
}

🛠️ Development

Prerequisites

• Node.js 22+
• npm/yarn/pnpm

Getting Started

# Clone the repository
git clone https://gitlab.itglobal.com/itgold/gb/ui-baza.git

# Install dependencies
npm install

# Start Storybook for development
npm run dev

Available Scripts

• npm run dev - Starts the local Storybook server, use this to develop and preview your components.
• npm run start - Start Storybook server from built static files.
• npm run test - Runs all your tests with vitest.
• npm run test:watch - Runs tests in watch mode.
• npm run build:lib - Builds your component library with Vite.
• npm run build:storybook - Builds your Storybook as a static web application.
• npm run lint - Run ESLint.
• npm run format - Format code with Prettier.
• npm run prepare - Setup Husky git hooks.
• npm run version:patch - Bump patch version.
• npm run version:minor - Bump minor version.
• npm run version:major - Bump major version.
• npm run prepare:publish - Build the library for publishing.
• npm run publish:public - Publish to npm with public access.
• npm run release - Complete release workflow: build, commit, push, and publish.

Building

npm run build:lib

📚 Components

Currently available components:

• Badge - Compact label component for statuses, counts, and tags with various visual styles.
• Breadcrumbs - Navigation component showing the user's location within the site hierarchy with support for custom separators. Implemented using Compound Components pattern.
• Button - Flexible button component with various styles and states.
• Checkbox - Custom checkbox with state support, custom labels, and full styling.
• Chip - Compact element for displaying tags, filters, or selections.
• Counter - Compact visual indicator for displaying short numeric values like notification counts, unread messages, or status badges.
• DatePicker - Flexible date picker component with calendar interface, date ranges, and internationalization support. Implemented using Compound Components pattern.
• DropdownMenu - Flexible dropdown menu with support for submenus, custom triggers, and rich content. Implemented using Compound Components pattern.
• RadioButton - Radio button component for single selection from multiple options.
• Search - Search input field with icon and clear button. Supports two modes: default (inline icon) and custom (separate search button).
• SegmentControl - Segmented control component for single selection from multiple options with visual button group interface. Implemented using Compound Components pattern.
• Switch - Toggle switch component for binary on/off states with smooth animations.
• Tag - Elements for visual marking using keywords. Help with quick recognition, differentiation, and sorting or navigation through content.
• TextField - Input field component with validation, labels, and various input types support. Implemented using Compound Components pattern.
• Pagination - Navigation component for multi-page content with customizable appearance and behavior.
• ProgressBar - Progress indicator component with linear and step-based variants. Supports multiple sizes and full ARIA accessibility. Implemented using Compound Components pattern.

More components coming soon! 🎉

🎨 Icons

Basic set of SVG icons for common UI needs:

• IconArrow - Arrow icon for navigation and directional indicators
• IconArrowCircle - Arrow inside circle for navigation buttons
• IconArrowDiagonal - Diagonal arrow for external links and redirects
• IconArrowUTurn - U-turn arrow for undo/return actions
• IconCalendar - Calendar icon for date pickers and scheduling
• IconCharacteristic - Pattern icon for characteristics and properties
• IconCheck - Checkmark icon for confirmations and completed states
• IconChevron - Arrow/chevron icon for navigation and dropdowns
• IconChevronDouble - Double chevron for fast navigation (first/last page)
• IconCollapse - Collapse icon for expanding/collapsing content
• IconFilters - Filter icon for filtering and sorting options
• IconGear - Settings/gear icon for configuration and preferences
• IconLogOut - Logout icon for sign out actions
• IconMinus - Minus icon for decrements and removal actions
• IconPerson - Person/user icon for profiles and accounts
• IconPlus - Plus icon for increments and add actions
• IconPrize - Prize/gift icon for rewards and bonuses
• IconProject - Project/layers icon for project management
• IconQRCode - QR code icon for scanning and sharing
• IconRequest - Request/branch icon for requests and workflows
• IconShopping - Shopping bag/cart icon for e-commerce and shopping features
• IconSort - Sort icon for sorting options
• IconXMark - Close/remove icon for dismissing and deleting

Icon Variants

Some icons provide multiple variants using Compound Components pattern:

• IconArrowCircle.Filled - Filled version of the arrow circle icon
• IconArrowDiagonal.Up - Upward diagonal arrow variant
• IconArrowUTurn.Up - Upward U-turn arrow variant
• IconPerson.Filled - Filled version of the person icon for active states
• IconPrize.Filled - Filled version of the prize icon for active states
• IconShopping.Filled - Filled version of the shopping icon for active/selected states
• IconXMark.Small - Smaller version of the close icon for compact UI elements

import { IconCheck, IconShopping, IconPerson, IconArrowCircle } from '@grandbazar/ui-baza';

function Example() {
  return (
    <div>
      <IconCheck style={{ color: 'green', width: 16, height: 16 }} />
      <IconShopping style={{ color: 'blue', width: 20, height: 20 }} />
      <IconShopping.Filled style={{ color: 'red', width: 24, height: 24 }} />
    </div>
  );
}

All icons use currentColor for easy theming and styling.

🔗 Links

• Homepage
• Repository
• Grandbazar

📄 License

MIT © Grandbazar