# Equality

> A theme-driven component library for EQTY Lab projects

## Pages

- [Alert](https://equality.eqtylab.io/components/alert.md): Message for communicating status, warnings, or errors
- [Alert Dialog](https://equality.eqtylab.io/components/alert-dialog.md): A modal dialog for confirmations and destructive actions
- [Avatar](https://equality.eqtylab.io/components/avatar.md): Visual representation of a user or entity
- [Background Gradient](https://equality.eqtylab.io/components/bg-gradient.md): Animated canvas background gradient with theme variants
- [Badge](https://equality.eqtylab.io/components/badge.md): Compact label for communicating status or context
- [Bar Graph](https://equality.eqtylab.io/components/bar-graph.md): Single line segmented bar graph with segment tooltips
- [Button](https://equality.eqtylab.io/components/button.md): Interactive element for triggering actions
- [Card](https://equality.eqtylab.io/components/card.md): Compound card container with elevations and hover states
- [Card Content Header](https://equality.eqtylab.io/components/card-content-header.md): Header row for card content with icon, heading, and action
- [Checkbox](https://equality.eqtylab.io/components/checkbox.md): Toggle control for boolean or multi-select choices
- [Code Block](https://equality.eqtylab.io/components/code-block.md): Syntax-highlighted code display with status variants
- [Color Tokens](https://equality.eqtylab.io/getting-started/color-tokens.md)
- [Command](https://equality.eqtylab.io/components/command.md): Searchable command palette for running commands
- [Component Architecture](https://equality.eqtylab.io/getting-started/component-architecture.md): This section explains how the Equality UI library is structured under the hood — how components use Tailwind, CSS Modules, and the theme system to stay fully scoped, reusable, and conflict-free.
- [Control Status Badge](https://equality.eqtylab.io/components/control-status-badge.md): Displays a badge with consistent icons, colors, and labels for control status values.
- [Copy Button](https://equality.eqtylab.io/components/copy-button.md): Button that copies a value to the clipboard
- [Customizing](https://equality.eqtylab.io/getting-started/customizing.md)
- [Date Range Picker](https://equality.eqtylab.io/components/date-range-picker.md): Input for selecting a start and end date
- [Dialog](https://equality.eqtylab.io/components/dialog.md): A modal dialog component with customizable sizes
- [Display Field](https://equality.eqtylab.io/components/display-field.md): Read-only field showing a value with copy action
- [Dropdown Menu](https://equality.eqtylab.io/components/dropdown-menu.md): A menu of actions or options triggered by a button
- [Elevation](https://equality.eqtylab.io/getting-started/elevation.md)
- [Empty Table State](https://equality.eqtylab.io/components/empty-table-state.md): A placeholder shown when a table or list has no rows to display.
- [Equality UI](https://equality.eqtylab.io.md): A theme-driven component library for EQTY Lab projects
- [Filter Dropdown](https://equality.eqtylab.io/components/filter-dropdown.md): A dropdown menu for selecting multiple filter options
- [Form](https://equality.eqtylab.io/components/form.md): Accessible form primitives built on react-hook-form
- [Format Date](https://equality.eqtylab.io/components/format-date.md): Render a date as absolute, relative, or an exact countdown using a semantic <time> element
- [Heading](https://equality.eqtylab.io/components/heading.md): Semantic heading with configurable visual level
- [Icon](https://equality.eqtylab.io/components/icon.md): Renders a named icon at various sizes
- [Icon Button](https://equality.eqtylab.io/components/icon-button.md): Icon-only button with an accessible label
- [Info Card](https://equality.eqtylab.io/components/info-card.md): Card displaying a labeled piece of information
- [Input](https://equality.eqtylab.io/components/input.md): Single-line text input field
- [Label](https://equality.eqtylab.io/components/label.md): Text label for a form control
- [List or Grid View Toggle](https://equality.eqtylab.io/components/list-or-grid-view-toggle.md): List or Grid View Toggle with sizes and variants
- [Loading Overlay](https://equality.eqtylab.io/components/loading-overlay.md): Overlay indicating content is loading
- [Metric Card](https://equality.eqtylab.io/components/metric-card.md): Card surfacing a numeric metric with label and icon
- [Motion Collapsible Content](https://equality.eqtylab.io/components/motion-collapsible-content.md): Animated container that expands and collapses its content
- [Page Not Found](https://equality.eqtylab.io/components/page-not-found.md): Full-page 404 state with a return-home action
- [Pagination](https://equality.eqtylab.io/components/pagination.md): Page navigation with items-per-page and result info
- [Panel Label](https://equality.eqtylab.io/components/panel-label.md): Small heading label for a panel section
- [Popover](https://equality.eqtylab.io/components/popover.md): Floating content anchored to a trigger element
- [Progress](https://equality.eqtylab.io/components/progress.md): Horizontal progress bar with color variants
- [Progress Indicator](https://equality.eqtylab.io/components/progress-indicator.md): Communicates a user's progress through a sequence of steps
- [Radial Graph](https://equality.eqtylab.io/components/radial-graph.md): Circular graph for progress or percentages
- [Radio Dropdown](https://equality.eqtylab.io/components/radio-dropdown.md): Dropdown for single-choice filtering with counts
- [Radio Group](https://equality.eqtylab.io/components/radio-group.md): Group of radio buttons for single selection
- [Resource Badge](https://equality.eqtylab.io/components/resource-badge.md): Displays a badge with consistent icons, colors, and labels for resource types.
- [Scroll Area](https://equality.eqtylab.io/components/scroll-area.md): Scrollable container with custom scrollbars
- [Search Bar](https://equality.eqtylab.io/components/search-bar.md): Text input for searching or filtering
- [Section Heading](https://equality.eqtylab.io/components/section-heading.md): Section title with optional description and actions
- [Segmented Controls](https://equality.eqtylab.io/components/segmented-controls.md): A linear set of two or more segments used to switch between mutually exclusive options or views.
- [Select](https://equality.eqtylab.io/components/select.md): Dropdown for choosing one option from a list
- [Separator](https://equality.eqtylab.io/components/separator.md): Visual divider line, horizontal or vertical
- [Sheet](https://equality.eqtylab.io/components/sheet.md): A slide-out panel that overlays content from the edge of the screen
- [Skeleton](https://equality.eqtylab.io/components/skeleton.md): Animated placeholder shown while content loads
- [Sort Button](https://equality.eqtylab.io/components/sort-button.md): A button for toggling column sort direction in tables and lists.
- [Sort Selector](https://equality.eqtylab.io/components/sort-selector.md): Dropdown for choosing a list's sort field and order
- [Spinner](https://equality.eqtylab.io/components/spinner.md): Indeterminate loading indicator
- [Switch](https://equality.eqtylab.io/components/switch.md): Toggle switch for on/off states
- [Table](https://equality.eqtylab.io/components/table.md): A data table for displaying structured information in rows and columns.
- [Tabs](https://equality.eqtylab.io/components/tabs.md): A flexible, accessible component for organizing content into tabbed panels. Supports icons, customization, and multiple visual variants.
- [Textarea](https://equality.eqtylab.io/components/textarea.md): Multi-line text input field
- [Themes](https://equality.eqtylab.io/getting-started/themes.md)
- [Toast](https://equality.eqtylab.io/components/toast.md): Auto-dismissing notification message with variants
- [Tooltip](https://equality.eqtylab.io/components/tooltip.md): Hover hint showing contextual text
- [Truncated Description](https://equality.eqtylab.io/components/truncated-description.md): Long description that collapses behind a show more toggle
- [Usage](https://equality.eqtylab.io/getting-started/usage.md)