Components
Browse Giddaa component docs grouped by type.
Giddaa UI docs are grouped by component type so package consumers can find the right primitive or recipe quickly.
@giddaa-housing/ui — product-agnostic primitives, design-system components, and hardened composed exports.- recipes — copy-and-own product patterns built from
@giddaa-housing/ui; their implementation source is the important artifact.
Each page below documents the public import path, live previews, usage code,
props, and accessibility notes. Pages with a non-stable status show a
warning before usage — check it before adopting the component for new work.
These entries are visible for review and controlled adoption, but should not be promoted as default stable choices.
| Component | Status | Notes |
|---|
| PropertyListingCard | hardening | Keep listing data loading, routing, analytics, and product-specific actions in the app. |
| PurchaseOptionCard | hardening | API still needs hardening; keep plan loading, routing, and analytics in the app. |
| AsyncOptionsCombobox | hardening | Copy-and-own recipe with async option loading. |
| BreadCrumb | hardening | Copy-and-own responsive breadcrumb recipe. |
| PageStates | hardening | Copy-and-own page state recipe. |
| ComposedPagination | hardening | Copy-and-own product pagination recipe. |
| Component | Description |
|---|
| Button | Product-agnostic action component for forms, dialogs, and page workflows. |
| Button Group | Grouped actions with shared sizing and alignment. |
| Calendar | Calendar surface for selecting dates and ranges. |
| Checkbox | Boolean form control with accessible checked and indeterminate states. |
| Combobox | Autocomplete select control for larger option sets. |
| Date Picker | Composed date input and popover calendar picker. |
| Dropzone | Drag-and-drop file upload input. |
| File Upload | Composable file upload progress, preview, status, and cancellation display. |
| Field | Label, help, and error composition. |
| Filter | Composable filter builder for field, condition, and value rows. |
| Input | Text input primitive with Giddaa sizing and invalid-state styling. |
| Input Group | Input composition for leading and trailing content. |
| Input Size Context | Internal size provider published for compound input composition. |
| Label | Accessible label primitive. |
| Multi Step Form | Multi-step form shell for staged input flows. |
| Number Input | Numeric input with controlled formatting support. |
| Password Input | Password input with visibility toggle. |
| Phone Input | Phone number input backed by country metadata. |
| Radio Group | Single-choice grouped form control. |
| Rich Text Editor | TipTap-backed rich text editor. |
| Search Input | Search text input with icon and clear affordance. |
| Select | Single-selection dropdown control. |
| Slider | Numeric value and range selection control. |
| Size Context | Shared size provider for compound component families. |
| Switch | Boolean toggle control. |
| Textarea | Multi-line text input primitive. |
| Time Picker | Time selection input. |
| Component | Description |
|---|
| Chart | Shared chart primitives and theme helpers. |
| Bar Chart | Bar chart wrapper for comparing categorical values. |
| Bullet Chart | Compact progress-versus-target chart for KPI dashboards. |
| Funnel Chart | Funnel visualization for staged conversion data. |
| Heatmap Chart | Heatmap visualization for magnitude across two dimensions. |
| Line Chart | Line chart wrapper for trend visualization. |
| Pie Chart | Pie chart wrapper for proportional data. |
| Radar Chart | Radar chart wrapper for comparing multivariate values. |
| Scatter Chart | Scatter chart wrapper for correlation and distribution views. |
| Sparkline | Compact trend line for inline metrics. |
| Tree Map | Treemap visualization for hierarchical values. |
| Waterfall Chart | Waterfall visualization for positive and negative step changes. |
| Component | Description |
|---|
| Accordion | A vertically stacked set of interactive headings that each reveal a section of content. |
| Auth Layout | Composable authentication shell for sign-in, sign-up, and recovery flows. |
| Card | Composable container with title, content, footer, and optional action. |
| Collapsible | Single disclosure region for progressively revealed content. |
| CTA | Call-to-action section primitive. |
| Details Card | Structured details container for key-value or descriptive content. |
| Editorial Card | Editorial content card with media and text composition. |
| Footer | Footer layout primitives. |
| Item | Reusable item row primitive. |
| Page Header | Page title, description, and action composition. |
| Separator | Visual divider primitive. |
| Sheet | Side-panel overlay for secondary flows. |
| Sidebar | Application sidebar primitives. |
| Tabs | Tabbed content container. |
| Component | Description |
|---|
| Activity Timeline | Ordered activity list for status history and workflow progress. |
| Avatar | User or entity identity thumbnail with fallback support. |
| Badge | Compact semantic label for statuses, counts, and classifications. |
| Carousel | Embla-backed carousel for image or content slides. |
| Data Table | Composed table experience with toolbar, card view, filters, pagination, and selection. |
| Empty State | Structured empty, error, or no-results state. |
| Gallery Indicator | Media gallery count and position indicator. |
| Infinite Scroll | Composable infinite-scroll slots for paginated lists. |
| Kpi Card | Metric card for headline dashboard indicators. |
| Map Indicator | Branded map pin marker for property and location maps. |
| Match | Compact saved-preference match indicator. |
| Media Gallery Hero | Responsive bento media hero for image and video gallery entry points. |
| Media Player | Audio and video player primitives. |
| Photo Gallery | Responsive photo grid and gallery display. |
| Price Tag | Price display primitive for money-forward surfaces. |
| Progress | Progress indicator primitive. |
| Property Listing Card | Composable property card for listing search and recommendation surfaces. |
| Purchase Option Card | Composed purchase plan card built from Giddaa UI primitives. |
| Review Block | Review or testimonial content block. |
| Skeleton | Loading placeholder primitive. |
| Table | Table primitives for tabular data. |
| Table Card | Card treatment for tabular or row-based data. |
| Tag | Compact removable or static label. |
| Testimonial Block | Testimonial content section. |
| Component | Description |
|---|
| Alert | Inline status messaging for contextual feedback. |
| Stepper | Multi-step process indicator. |
| Toast | Transient notification surface. |
| Component | Description |
|---|
| Dialog | Modal surface for focused decisions and blocking flows. |
| Dropdown Menu | Menu surface for contextual actions. |
| Popover | Anchored non-modal overlay. |
| Tooltip | Hover and focus help text. |
| Component | Description |
|---|
| Breadcrumb | Hierarchical navigation trail for page context. |
| Mobile Sidebar | Standalone mobile site navigation sheet for pages with or without a top navbar. |
| Pagination | Paged navigation controls for tables and lists. |
| Top Navbar | Responsive desktop site navigation with composable menus and account actions. |
| Component | Description |
|---|
| Actions Menu | Composed dropdown menu for row and card actions. |
| App Video Player Dialog | Copy-and-own application wrapper for the video dialog primitives. |
| Async Options Combobox | Options combobox wrapper that loads option data with TanStack Query. |
| BreadCrumb | Responsive breadcrumb wrapper with collapsed overflow items. |
| Data Table | Composed table experience with toolbar, card view, filters, pagination, and selection. |
| Data Table View Select | Toolbar select for switching DataTable list and card views. |
| Filter | Composable filter builder for field, condition, and value rows. |
| Options Combobox | Typed options wrapper around the UI combobox primitive. |
| Options Select | Typed options wrapper around the UI select primitive. |
| Page States | Composed loader, error, and not-found states for product pages. |
| Composed Pagination | Product pagination wrapper with entry counts, controls, and jump-to-page support. |
| Tab List | Data-driven responsive tab list with overflow handling. |