# Giddaa UI - **Documentation** - [Installation](/docs/installation): Install Giddaa UI, import styles, and configure the application font. - [Theming](/docs/theming): Available Giddaa UI theme tokens and how to override them. - [Components](/docs/components) - [llms.txt](/llms.txt) - [llms-full.txt](/llms-full.txt) - [Changelog](/docs/changelog): Version notes, breaking changes, and migration guidance for Giddaa UI. - **Forms & Inputs** - [Button](/docs/components/button): Product-agnostic action component for forms, dialogs, and workflows. - [ButtonGroup](/docs/components/button-group): Groups related buttons into a connected control. - [Calendar](/docs/components/calendar): Date selection calendar built on React DayPicker. - [Checkbox](/docs/components/checkbox): Boolean control for selecting one or more options. - [Combobox](/docs/components/combobox): Filterable selection control for searchable option lists. - [CurrencySelector](/docs/components/currency-selector): Compact currency picker with optional country flag and background treatment. - [DatePicker](/docs/components/date-picker): Popover date and date-range picker controls with quick month and year navigation. - [Dropzone](/docs/components/dropzone): Accessible file drop area with drag, browse, and status primitives. - [FileUpload](/docs/components/file-upload): Composable file upload progress, preview, status, and cancellation display. - [Field](/docs/components/field): Label, helper, error, and layout primitives for form controls. - [Filter](/docs/components/filter): Composable filter builder for serializing field, condition, and value rows. - [Input](/docs/components/input): Text input styled with Giddaa input tokens. - [InputGroup](/docs/components/input-group): Composes inputs with inline or block addons and buttons. - [InputOTP](/docs/components/input-otp): Accessible one-time-code input built on Base UI OTP Field. - [InputSizeContext](/docs/components/input-size-context): Context utilities for sharing input sizes across composed controls. - [Label](/docs/components/label): Form label with required and optional indicators. - [MaskInput](/docs/components/mask-input): Text input that formats what is typed — pattern masks, currency and percentage amounts, and attached affixes. - [MultiStepForm](/docs/components/multi-step-form): Responsive multi-step form state, navigation, and indicators. - [NumberInput](/docs/components/number-input): Locale-aware numeric input with optional step controls. - [PasswordInput](/docs/components/password-input): Password field with built-in visibility toggle. - [PhoneInput](/docs/components/phone-input): Country-aware phone number input that emits E.164 values. - [RadioGroup](/docs/components/radio-group): Exclusive selection group. - [Rating](/docs/components/rating): Star rating that reads and writes. - [RichTextEditor](/docs/components/rich-text-editor): Tiptap-powered rich text editor for formatted content. - [SearchInput](/docs/components/search-input): Search input with clear affordance and app/dashboard variants. - [Select](/docs/components/select): Single or multiple-selection dropdown control. - [Slider](/docs/components/slider): Numeric value and range selection control. - [SizeContext](/docs/components/size-context): Context utilities for sharing component sizes across nested controls. - [Switch](/docs/components/switch): Binary on/off control. - [ThemeSwitcher](/docs/components/theme-switcher): Theme menu trigger for selecting light, dark, or system appearance. - [Textarea](/docs/components/textarea): Multi-line text input. - [TimePicker](/docs/components/time-picker): Time input with 12-hour and 24-hour formatting. - **Charts** - [Chart](/docs/components/chart): Shared chart shell, legend, tooltip, and axis helpers for Recharts-based visualizations. - [BarChart](/docs/components/bar-chart): Composable cartesian primitives for vertical, horizontal, stacked, and grouped Recharts bar charts. - [BulletChart](/docs/components/bullet-chart): Compact target-versus-actual chart. - [FunnelChart](/docs/components/funnel-chart): Funnel or bar-style conversion chart. - [HeatmapChart](/docs/components/heatmap-chart): A row × column grid encoding magnitude as fill intensity. - [LineChart](/docs/components/line-chart): Layout helpers for Recharts line and area charts. - [PieChart](/docs/components/pie-chart): Layout, center label, and legend helpers for Recharts pie charts. - [RadarChart](/docs/components/radar-chart): Composable polar primitives for Recharts radar charts. - [ScatterChart](/docs/components/scatter-chart): Composable cartesian primitives for Recharts scatter plots. - [Sparkline](/docs/components/sparkline): Small inline trend chart for KPI cards and dense tables. - [TreeMap](/docs/components/tree-map): Part-to-whole treemap chart for category composition. - [WaterfallChart](/docs/components/waterfall-chart): Bridge chart for totals, increases, decreases, and final net movement. - **Layout & Structure** - [Accordion](/docs/components/accordion): A vertically stacked set of interactive headings that reveal content panels. - [AuthLayout](/docs/components/auth-layout): Composable authentication shell for sign-in, sign-up, and recovery flows. - [Card](/docs/components/card): Surface primitive for grouped content and actions. - [Collapsible](/docs/components/collapsible): Disclosure primitive for hiding and revealing a single content region. - [CTA](/docs/components/cta): Composable call-to-action panel for a kicker, title, description, checklist, feature cards, and actions. - [DetailsCard](/docs/components/details-card): Composable read-only card for structured label-value data. - [EditorialCard](/docs/components/editorial-card): Composable editorial card for article, interview, and media previews. - [Footer](/docs/components/footer): Composable footer primitives for CTAs, navigation groups, contact details, social links, newsletter forms, and legal links. - [Icons](/docs/components/icons): The inline glyph set every component draws from, with no icon dependency. - [Item](/docs/components/item): Simple label-value display primitive. - [ListItem](/docs/components/list-item): Flexible non-tabular list row for activity, notifications, and assignments. - [PageHeader](/docs/components/page-header): Dashboard page header primitives for titles, descriptions, and actions. - [ScrollSpy](/docs/components/scroll-spy): Section navigation for long pages — triggers scroll to their section and track the one being read. - [SectionJumper](/docs/components/section-jumper): A compact page-section navigator that expands into a popover for fast jumps through long content. - [Separator](/docs/components/separator): Visual divider between grouped content. - [Sheet](/docs/components/sheet): Side panel dialog for secondary workflows. - [Sidebar](/docs/components/sidebar): Application sidebar layout and navigation primitives. - [Tabs](/docs/components/tabs): Tab primitives for switching between related panels. - **Data Display** - [ActivityTimeline](/docs/components/activity-timeline): Recent activity list with avatar rails, action badges, and timestamps. - [Avatar](/docs/components/avatar): User image, fallback initials, status, and grouped avatar primitives. - [Badge](/docs/components/badge): Compact label for statuses, categories, and metadata. - [CallCard](/docs/components/call-card): Voice-call overlay for ringing, connecting, connected, and ended states. - [Carousel](/docs/components/carousel): Embla-based carousel primitives for swipeable content. - [Chat](/docs/components/chat): Chat shell, scrolling body, and message composer primitives. - [DataTable](/docs/components/data-table): Composed table experience with toolbar, card view, filters, pagination, and selection. - [EmptyState](/docs/components/empty-state): Structured blank-state message with optional media and actions. - [GalleryIndicator](/docs/components/gallery-indicator): Glass overlay chip for image galleries and photo carousels. - [Image](/docs/components/image): An img the host app can replace with its own image component, one at a time or everywhere at once. - [InfiniteScroll](/docs/components/infinite-scroll): Composable infinite-scroll slots for paginated lists. - [Kanban](/docs/components/kanban): Drag-and-drop board primitives for pipelines, with columns, cards, and scroll controls. - [KpiCard](/docs/components/kpi-card): Metric card for dashboard summaries. - [MapIndicator](/docs/components/map-indicator): Branded map pin marker for property and location maps. - [Match](/docs/components/match): Compact saved-preference match indicator. - [MediaGalleryHero](/docs/components/media-gallery-hero): Composable responsive media hero primitives for image and video gallery entry points. - [MediaPlayer](/docs/components/media-player): Composable audio and video player primitives built on Media Chrome. - [Message](/docs/components/message): Chat message bubbles, attachments, and conversation markers. - [PhotoGallery](/docs/components/photo-gallery): Property image gallery with carousel navigation and fullscreen viewer. - [PriceTag](/docs/components/price-tag): Rounded-box price overlay for house cards, galleries, and buy-side comparison surfaces. - [Progress](/docs/components/progress): Linear and circular progress indicators. - [PropertyListingCard](/docs/components/property-listing-card): Primitive property listing card building blocks for search, recommendations, and saved listing surfaces. - [PurchaseOptionCard](/docs/components/purchase-option-card): Composed purchase plan card built from Giddaa UI primitives. - [ReviewBlock](/docs/components/review-block): Pill-shaped star rating block with decimal star fills and optional review count text. - [Skeleton](/docs/components/skeleton): Placeholder block for loading content. - [Table](/docs/components/table): Styled table primitives for structured data. - [TableCard](/docs/components/table-card): Card primitive for row-as-card layouts, used by DataTable's card and mobile views. - [Tag](/docs/components/tag): Removable token for filters, selected options, and dismissible chips. - [TestimonialBlock](/docs/components/testimonial-block): Composable testimonial card for ratings, review quotes, reviewer metadata, and optional media. - **Feedback** - [Alert](/docs/components/alert): Status message container for contextual feedback. - [Sonar](/docs/components/sonar): Pulses rings outward from a dot, badge or button to draw attention to it. - [Stepper](/docs/components/stepper): Step-by-step progress and timeline primitive. - [Toast](/docs/components/toast): Toast provider and imperative notification API. - **Overlays** - [Dialog](/docs/components/dialog): Modal dialog primitives for focused decisions and forms. - [DropdownMenu](/docs/components/dropdown-menu): Menu primitives for contextual actions. - [Popover](/docs/components/popover): Anchored floating content for rich contextual UI. - [Tooltip](/docs/components/tooltip): Hover or focus disclosure for short helper text, plus Infotip for standalone info triggers. - **Navigation** - [Breadcrumb](/docs/components/breadcrumb): Navigation trail primitives for page hierarchy. - [MobileSidebar](/docs/components/mobile-sidebar): Standalone mobile site navigation sheet for pages with or without a top navbar. - [Pagination](/docs/components/pagination): Pagination navigation primitives for pages and controls. - [TopNavbar](/docs/components/top-navbar): Responsive desktop site navigation with composable menus and account actions. - **Utilities** - [cn](/docs/components/cn): The class merger every component in this package uses, so an override actually overrides. - [format](/docs/components/format): The formatters the components here already use — durations, dates, timestamps, initials. - [Hooks](/docs/components/hooks): The React hooks the components here are built on — controlled/uncontrolled state, reduced motion, viewport, intersection. - [Phone](/docs/components/phone): Phone number validation, parsing, and formatting — the same helpers PhoneInput uses, without the input. - **Recipes** - [ActionsMenu](/docs/components/composed/actions-menu): Composed dropdown menu for row and card actions. - [AppVideoPlayerDialog](/docs/components/composed/app-video-player-dialog): Copy-and-own application wrapper for video dialog primitives, media controls, playlists, and automatic advancement. - [AsyncOptionsCombobox](/docs/components/composed/async-options-combobox): Options combobox wrapper that loads option data with TanStack Query. - [BreadCrumb](/docs/components/composed/breadcrumb): Responsive breadcrumb wrapper with collapsed overflow items. - [DataTableViewSelect](/docs/components/composed/data-table-view-select): Toolbar select for switching DataTable list and card views. - [OptionsCombobox](/docs/components/composed/options-combobox): Typed options wrapper around the UI combobox primitive. - [OptionsSelect](/docs/components/composed/options-select): Typed options wrapper around the UI select primitive. - [PageStates](/docs/components/composed/page-states): Composed loader, error, and not-found states for product pages. - [ComposedPagination](/docs/components/composed/pagination): Product pagination wrapper with entry counts, controls, and jump-to-page support. - [TabList](/docs/components/composed/tab-list): Data-driven responsive tab list with overflow handling.