Ankem Central Component Repository for React Application

A modern, accessible, and theme-aware React component library for building beautiful, consistent UIs. All components are designed for both light and dark backgrounds, support accessibility (508 compliance), and are easily customizable.

General Description

This library provides a comprehensive set of UI components for rapid application development. Each component is built with Tailwind CSS, supports light/dark mode, and is designed for accessibility and flexibility. Use these components to create forms, navigation, utilities, and functional UI elements with minimal effort and maximum consistency.

Components & Use Cases

Buttons

• Button: For primary, secondary, danger, and text actions. Supports loading state, disabled state, and adapts to background theme.
  • Use for form submissions, dialogs, navigation, etc.

Inputs

• ATextInput: Single-line text input supporting types like text, email, date, number, etc. Includes label, error, and size options.
  • Use for forms, search bars, and data entry.
• ATextArea: Multi-line text input with label, error, and accessibility support.
  • Use for comments, descriptions, and long-form input.
• ACheckBox: Accessible checkbox with label and theme support.
  • Use for boolean options, agreements, and multi-select lists.
• ARadioButton: Accessible radio button for exclusive selection in a group.
  • Use for selecting one option from a set.
• AToggle: Switch for on/off states, styled for clarity and accessibility.
  • Use for settings, preferences, and toggling features.
• ADropdown: Select menu for choosing one option from a list.
  • Use for country pickers, settings, and filters.

Navigation

• Breadcrumbs: Shows the user's location within a site hierarchy.
  • Use for navigation trails at the top of pages.
• Pagination: Controls for navigating between pages of content.
  • Use for tables, lists, and search results.

Utility

• Divider: Horizontal rule for separating content sections.
  • Use between form sections, cards, or content blocks.
• Avatar: User profile image or initials, with size and theme support.
  • Use for user lists, comments, and profile displays.

Functional

• SearchBar: Accessible search input with submit button.
  • Use for searching lists, tables, or site-wide content.
• ShoppingCart: Cart icon with item count and dropdown for cart details.
  • Use for e-commerce apps to display and manage cart contents.

Icons

• Cart, Magnify, Spinner: SVG icons for use in buttons, search bars, and loading states.
  • Use for visual cues and feedback.

Getting Started

1. Install the library and peer dependencies (React, Tailwind CSS).
2. Install the ankem-ccr library using command:

   npm install ankem-ccr

3. Import the components you need:

   import { Button, ATextInput, ACheckBox } from "ankem-ccr";

4. Import the CSS if not bundled:

   import "ankem-ccr/dist/styles/tailwind.css";

5. Use components in your app, passing props as needed.

Accessibility & Theming

• All components are keyboard and screen reader accessible.
• Supports both light and dark backgrounds via the isLightMode prop.
• Follows WCAG color contrast guidelines.

License

MIT