> ## Documentation Index
> Fetch the complete documentation index at: https://www.beeq.design/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Explore the BEEQ component library and jump into the guidance for each UI building block.

BEEQ components are the building blocks of consistent, accessible, and efficient product interfaces. Use this page to browse the library and open the guidance for each component.

<Note>
  Each tile links to usage guidance, framework examples, and API reference for that component. For interactive states and variants, open [Storybook](https://storybook.beeq.design).
</Note>

<div className="beeq-components-overview">
  ## Actions

  <Columns cols={3}>
    <Tile href="/components/button" title="Button" description="Trigger actions and guide users through primary and secondary flows.">
      <img src="https://mintcdn.com/beeq/NwMZMX-_rISftnfp/components/images/button/button-overview-light.svg?fit=max&auto=format&n=NwMZMX-_rISftnfp&q=85&s=204352dd423e44d26ed11347c16db548" alt="BEEQ Button component overview" className="block dark:hidden" width="572" height="320" data-path="components/images/button/button-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/NwMZMX-_rISftnfp/components/images/button/button-overview-dark.svg?fit=max&auto=format&n=NwMZMX-_rISftnfp&q=85&s=352571bd03caf2ee0b872dad8164aa45" alt="BEEQ Button component overview" className="hidden dark:block" width="572" height="320" data-path="components/images/button/button-overview-dark.svg" />
    </Tile>

    <Tile href="/components/dropdown" title="Dropdown" description="Show contextual actions and compact option lists from a trigger.">
      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/dropdown/dropdown-overview-light.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=99d1f9b8409df09c80f151b2b174f961" alt="BEEQ Dropdown component overview" className="block dark:hidden" width="506" height="298" data-path="components/images/dropdown/dropdown-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/dropdown/dropdown-overview-dark.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=5fcd0b17af739f230b2de087af0420f2" alt="BEEQ Dropdown component overview" className="hidden dark:block" width="506" height="298" data-path="components/images/dropdown/dropdown-overview-dark.svg" />
    </Tile>
  </Columns>

  ## Data Display

  <Columns cols={3}>
    <Tile href="/components/accordion" title="Accordion" description="Progressively reveal sections of related content without overwhelming the page.">
      <img src="https://mintcdn.com/beeq/NwMZMX-_rISftnfp/components/images/accordion/accordion-overview-light.svg?fit=max&auto=format&n=NwMZMX-_rISftnfp&q=85&s=f697770299d97fd94e6da539164d660c" alt="BEEQ Accordion component overview" className="block dark:hidden" width="600" height="285" data-path="components/images/accordion/accordion-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/NwMZMX-_rISftnfp/components/images/accordion/accordion-overview-dark.svg?fit=max&auto=format&n=NwMZMX-_rISftnfp&q=85&s=2e0c7fd98f9570880af8b72d78135788" alt="BEEQ Accordion component overview" className="hidden dark:block" width="600" height="285" data-path="components/images/accordion/accordion-overview-dark.svg" />
    </Tile>

    <Tile href="/components/avatar" title="Avatar" description="Represent a person, account, or entity with an image, initials, or icon.">
      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/avatar/avatar-overview-light.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=180062ff59124cddb3d8463beec835be" alt="BEEQ Avatar component overview" className="block dark:hidden" width="408" height="302" data-path="components/images/avatar/avatar-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/avatar/avatar-overview-dark.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=8e5578a525e651256a5b390e631dc9bd" alt="BEEQ Avatar component overview" className="hidden dark:block" width="408" height="302" data-path="components/images/avatar/avatar-overview-dark.svg" />
    </Tile>

    <Tile href="/components/badge" title="Badge" description="Highlight counts, labels, and compact metadata in a small visual container.">
      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/badge/badge-overview-light.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=7cac0046c225f4341cc586848a4e9cdc" alt="BEEQ Badge component overview" className="block dark:hidden" width="94" height="136" data-path="components/images/badge/badge-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/badge/badge-overview-dark.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=11cd9cd007b5909c16e271f5089ee343" alt="BEEQ Badge component overview" className="hidden dark:block" width="94" height="136" data-path="components/images/badge/badge-overview-dark.svg" />
    </Tile>

    <Tile href="/components/icon" title="Icon" description="Add visual cues and reinforce meaning in buttons, statuses, inputs, and more.">
      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/icon/icon-overview-light.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=81d1e95d84d20a97781c3c76ec25b91c" alt="BEEQ Icon component overview" className="block dark:hidden" width="217" height="419" data-path="components/images/icon/icon-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/icon/icon-overview-dark.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=a5a7d2701234cebb2d11069ea6736f80" alt="BEEQ Icon component overview" className="hidden dark:block" width="217" height="419" data-path="components/images/icon/icon-overview-dark.svg" />
    </Tile>

    <Tile href="/components/status" title="Status" description="Communicate system state, semantic meaning, or workflow progress at a glance.">
      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/status/status-overview-light.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=2cec438d2451e6290fd91887e6b93cad" alt="BEEQ Status component overview" className="block dark:hidden" width="217" height="284" data-path="components/images/status/status-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/status/status-overview-dark.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=40ce8f696110ce98dbe56366590dc1a7" alt="BEEQ Status component overview" className="hidden dark:block" width="217" height="284" data-path="components/images/status/status-overview-dark.svg" />
    </Tile>

    <Tile href="/components/table" title="Table" description="Present structured data in rows and columns with clear scanning patterns.">
      <img src="https://mintcdn.com/beeq/nN2FF5Iq6pY7AHlL/components/images/table/table-overview-light.svg?fit=max&auto=format&n=nN2FF5Iq6pY7AHlL&q=85&s=a174c2f8ffe9ff2d1ce7d1e7b8fc6e63" alt="BEEQ Table component overview" className="block dark:hidden" width="1255" height="572" data-path="components/images/table/table-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/nN2FF5Iq6pY7AHlL/components/images/table/table-overview-dark.svg?fit=max&auto=format&n=nN2FF5Iq6pY7AHlL&q=85&s=f586ec762902c32a7d3411650139c942" alt="BEEQ Table component overview" className="hidden dark:block" width="1255" height="572" data-path="components/images/table/table-overview-dark.svg" />
    </Tile>

    <Tile href="/components/tag" title="Tag" description="Label content, categories, or states with a lightweight visual marker.">
      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/tag/tag-overview-light.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=419225bd0575443963ea390cfd630c55" alt="BEEQ Tag component overview" className="block dark:hidden" width="505" height="288" data-path="components/images/tag/tag-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/tag/tag-overview-dark.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=478009d524603d5f0c0d27d33f848d57" alt="BEEQ Tag component overview" className="hidden dark:block" width="505" height="288" data-path="components/images/tag/tag-overview-dark.svg" />
    </Tile>
  </Columns>

  ## Feedback

  <Columns cols={3}>
    <Tile href="/components/alert" title="Alert" description="Surface important inline messages that need user attention in context.">
      <img src="https://mintcdn.com/beeq/q2QfdaQVx7Z_gV2t/components/images/alert/alert-overview-light.svg?fit=max&auto=format&n=q2QfdaQVx7Z_gV2t&q=85&s=716c2535c4b3db6e56949ce72bf6b006" alt="BEEQ Alert component overview" className="block dark:hidden" width="506" height="368" data-path="components/images/alert/alert-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/q2QfdaQVx7Z_gV2t/components/images/alert/alert-overview-dark.svg?fit=max&auto=format&n=q2QfdaQVx7Z_gV2t&q=85&s=892912fa924a10eaae9decb24ae328e8" alt="BEEQ Alert component overview" className="hidden dark:block" width="506" height="368" data-path="components/images/alert/alert-overview-dark.svg" />
    </Tile>

    <Tile href="/components/dialog" title="Dialog" description="Interrupt the flow when users need to review, confirm, or complete a focused task.">
      <img src="https://mintcdn.com/beeq/nN2FF5Iq6pY7AHlL/components/images/dialog/dialog-overview-light.svg?fit=max&auto=format&n=nN2FF5Iq6pY7AHlL&q=85&s=5c3ed0ae8ac27e33a7822d212e23a7c4" alt="BEEQ Dialog component overview" className="block dark:hidden" width="668" height="312" data-path="components/images/dialog/dialog-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/nN2FF5Iq6pY7AHlL/components/images/dialog/dialog-overview-dark.svg?fit=max&auto=format&n=nN2FF5Iq6pY7AHlL&q=85&s=228fb8f0bfebe23a7e5fe765cfdedcc4" alt="BEEQ Dialog component overview" className="hidden dark:block" width="668" height="312" data-path="components/images/dialog/dialog-overview-dark.svg" />
    </Tile>

    <Tile href="/components/drawer" title="Drawer" description="Present secondary content or actions in a sliding panel alongside the main view.">
      <img src="https://mintcdn.com/beeq/sS_4c30oR3xlqpA7/components/images/drawer/drawer-overview-light.svg?fit=max&auto=format&n=sS_4c30oR3xlqpA7&q=85&s=f3204d6d14e656b475c7e9764913c90a" alt="BEEQ Drawer component overview" className="block dark:hidden" width="384" height="431" data-path="components/images/drawer/drawer-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/sS_4c30oR3xlqpA7/components/images/drawer/drawer-overview-dark.svg?fit=max&auto=format&n=sS_4c30oR3xlqpA7&q=85&s=061cce52bf0160ea7190beff160cca9a" alt="BEEQ Drawer component overview" className="hidden dark:block" width="384" height="431" data-path="components/images/drawer/drawer-overview-dark.svg" />
    </Tile>

    <Tile href="/components/empty-state" title="Empty State" description="Explain empty or no-results views and guide users to a next step.">
      <img src="https://mintcdn.com/beeq/TCdd76vDkJvhGwHG/components/images/empty-state/empty-state-overview-light.svg?fit=max&auto=format&n=TCdd76vDkJvhGwHG&q=85&s=a8b761139d6cf5047c1326bf4ac7e342" alt="BEEQ Empty State component overview" className="block dark:hidden" width="134" height="240" data-path="components/images/empty-state/empty-state-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/TCdd76vDkJvhGwHG/components/images/empty-state/empty-state-overview-dark.svg?fit=max&auto=format&n=TCdd76vDkJvhGwHG&q=85&s=a2e64d866b4e315bd17bfc1ed77b70e4" alt="BEEQ Empty State component overview" className="hidden dark:block" width="134" height="240" data-path="components/images/empty-state/empty-state-overview-dark.svg" />
    </Tile>

    <Tile href="/components/notification" title="Notification" description="Communicate important updates inside the interface without blocking progress.">
      <img src="https://mintcdn.com/beeq/Z4ffKipt5yZIDQUT/components/images/notification/notification-overview-light.svg?fit=max&auto=format&n=Z4ffKipt5yZIDQUT&q=85&s=ef7bc12be82fd926e65897c00cd65054" alt="BEEQ Notification component overview" className="block dark:hidden" width="450" height="407" data-path="components/images/notification/notification-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/Z4ffKipt5yZIDQUT/components/images/notification/notification-overview-dark.svg?fit=max&auto=format&n=Z4ffKipt5yZIDQUT&q=85&s=fe845e973669d2edd0bed27b03b18021" alt="BEEQ Notification component overview" className="hidden dark:block" width="450" height="407" data-path="components/images/notification/notification-overview-dark.svg" />
    </Tile>

    <Tile href="/components/progress" title="Progress" description="Show completion state, task advancement, or loading progression.">
      <img src="https://mintcdn.com/beeq/Z4ffKipt5yZIDQUT/components/images/progress/progress-overview-light.svg?fit=max&auto=format&n=Z4ffKipt5yZIDQUT&q=85&s=5f7dba74b8594491ed6b81b134ea8f5e" alt="BEEQ Progress component overview" className="block dark:hidden" width="250" height="265" data-path="components/images/progress/progress-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/Z4ffKipt5yZIDQUT/components/images/progress/progress-overview-dark.svg?fit=max&auto=format&n=Z4ffKipt5yZIDQUT&q=85&s=e24b460b109b18915e3d97dc22c3eedb" alt="BEEQ Progress component overview" className="hidden dark:block" width="250" height="265" data-path="components/images/progress/progress-overview-dark.svg" />
    </Tile>

    <Tile href="/components/spinner" title="Spinner" description="Indicate background activity when a precise progress value is unavailable.">
      <img src="https://mintcdn.com/beeq/Z4ffKipt5yZIDQUT/components/images/spinner/spinner-overview-light.svg?fit=max&auto=format&n=Z4ffKipt5yZIDQUT&q=85&s=9d577d4a2585a9e64ce6b1fdf349d231" alt="BEEQ Spinner component overview" className="block dark:hidden" width="72" height="88" data-path="components/images/spinner/spinner-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/Z4ffKipt5yZIDQUT/components/images/spinner/spinner-overview-dark.svg?fit=max&auto=format&n=Z4ffKipt5yZIDQUT&q=85&s=732943aedaf0735e8f75d0ef53ba2751" alt="BEEQ Spinner component overview" className="hidden dark:block" width="72" height="88" data-path="components/images/spinner/spinner-overview-dark.svg" />
    </Tile>

    <Tile href="/components/toast" title="Toast" description="Deliver brief transient feedback after an action or system event.">
      <img src="https://mintcdn.com/beeq/Z4ffKipt5yZIDQUT/components/images/toast/toast-overview-light.svg?fit=max&auto=format&n=Z4ffKipt5yZIDQUT&q=85&s=cc64b95a806188811729d36352ea2e7a" alt="BEEQ Toast component overview" className="block dark:hidden" width="486" height="308" data-path="components/images/toast/toast-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/Z4ffKipt5yZIDQUT/components/images/toast/toast-overview-dark.svg?fit=max&auto=format&n=Z4ffKipt5yZIDQUT&q=85&s=d4ba7fc731fd629c66dec18e8648be10" alt="BEEQ Toast component overview" className="hidden dark:block" width="486" height="308" data-path="components/images/toast/toast-overview-dark.svg" />
    </Tile>

    <Tile href="/components/tooltip" title="Tooltip" description="Reveal helper text or additional context on hover, focus, or tap.">
      <img src="https://mintcdn.com/beeq/Tso4GJp_dKGZhwcq/components/images/tooltip/tooltip-overview-light.svg?fit=max&auto=format&n=Tso4GJp_dKGZhwcq&q=85&s=a75bed476c697ebcc21468ea5bf753a0" alt="BEEQ Tooltip component overview" className="block dark:hidden" width="553" height="60" data-path="components/images/tooltip/tooltip-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/Tso4GJp_dKGZhwcq/components/images/tooltip/tooltip-overview-dark.svg?fit=max&auto=format&n=Tso4GJp_dKGZhwcq&q=85&s=b68cc89f1fa1e3587889095a88db806c" alt="BEEQ Tooltip component overview" className="hidden dark:block" width="553" height="60" data-path="components/images/tooltip/tooltip-overview-dark.svg" />
    </Tile>
  </Columns>

  ## Form Controls

  <Columns cols={3}>
    <Tile href="/components/checkbox" title="Checkbox" description="Let users select one or more options from a set.">
      <img src="https://mintcdn.com/beeq/nN2FF5Iq6pY7AHlL/components/images/checkbox/checkbox-overview-light.svg?fit=max&auto=format&n=nN2FF5Iq6pY7AHlL&q=85&s=0429705e75879f0047407793b0344696" alt="BEEQ Checkbox component overview" className="block dark:hidden" width="575" height="328" data-path="components/images/checkbox/checkbox-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/nN2FF5Iq6pY7AHlL/components/images/checkbox/checkbox-overview-dark.svg?fit=max&auto=format&n=nN2FF5Iq6pY7AHlL&q=85&s=cd8be2d127180000760b65df769ba674" alt="BEEQ Checkbox component overview" className="hidden dark:block" width="575" height="328" data-path="components/images/checkbox/checkbox-overview-dark.svg" />
    </Tile>

    <Tile href="/components/date-picker" title="Date Picker" description="Collect dates and times with a structured calendar or time selection flow.">
      <img src="https://mintcdn.com/beeq/mYObpr88Zgebcg_l/components/images/date-picker/date-picker-overview-light.svg?fit=max&auto=format&n=mYObpr88Zgebcg_l&q=85&s=404da75de2cd40f1002c6655ec036f3b" alt="BEEQ Date Picker component overview" className="block dark:hidden" width="328" height="461" data-path="components/images/date-picker/date-picker-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/mYObpr88Zgebcg_l/components/images/date-picker/date-picker-overview-dark.svg?fit=max&auto=format&n=mYObpr88Zgebcg_l&q=85&s=30f321ae33d5e8106b219fd5892ac2ac" alt="BEEQ Date Picker component overview" className="hidden dark:block" width="328" height="461" data-path="components/images/date-picker/date-picker-overview-dark.svg" />
    </Tile>

    <Tile href="/components/input" title="Input" description="Capture short freeform text, numbers, and common single-line entries.">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/input/input-overview-light.svg" alt="BEEQ Input component overview" className="block dark:hidden" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/input/input-overview-dark.svg" alt="BEEQ Input component overview" className="hidden dark:block" />
    </Tile>

    <Tile href="/components/radio" title="Radio" description="Support a single choice from a set of mutually exclusive options.">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/radio/radio-overview-light.svg" alt="BEEQ Radio component overview" className="block dark:hidden" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/radio/radio-overview-dark.svg" alt="BEEQ Radio component overview" className="hidden dark:block" />
    </Tile>

    <Tile href="/components/select" title="Select" description="Expose a controlled list of options when freeform entry is not appropriate.">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/select/select-overview-light.svg" alt="BEEQ Select component overview" className="block dark:hidden" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/select/select-overview-dark.svg" alt="BEEQ Select component overview" className="hidden dark:block" />
    </Tile>

    <Tile href="/components/slider" title="Slider" description="Let users choose a value or range along a continuous scale.">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/slider/slider-overview-light.svg" alt="BEEQ Slider component overview" className="block dark:hidden" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/slider/slider-overview-dark.svg" alt="BEEQ Slider component overview" className="hidden dark:block" />
    </Tile>

    <Tile href="/components/switch" title="Switch" description="Toggle a setting on or off with a clear binary control.">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/switch/switch-overview-light.svg" alt="BEEQ Switch component overview" className="block dark:hidden" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/switch/switch-overview-dark.svg" alt="BEEQ Switch component overview" className="hidden dark:block" />
    </Tile>

    <Tile href="/components/textarea" title="Textarea" description="Capture longer multi-line text such as comments or descriptions.">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/textarea/textarea-overview-light.svg" alt="BEEQ Textarea component overview" className="block dark:hidden" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/beeq/components/images/textarea/textarea-overview-dark.svg" alt="BEEQ Textarea component overview" className="hidden dark:block" />
    </Tile>
  </Columns>

  ## Layout

  <Columns cols={3}>
    <Tile href="/components/card" title="Card" description="Group related content and actions inside a flexible visual container.">
      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/card/card-overview-light.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=87cbd1550c852ac607db3f9885608747" alt="BEEQ Card component overview" className="block dark:hidden" width="648" height="487" data-path="components/images/card/card-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/card/card-overview-dark.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=26b04ba770497e9fa9618098df175997" alt="BEEQ Card component overview" className="hidden dark:block" width="648" height="487" data-path="components/images/card/card-overview-dark.svg" />
    </Tile>

    <Tile href="/components/divider" title="Divider" description="Separate content areas and reinforce structure without adding heavy chrome.">
      <img src="https://mintcdn.com/beeq/7l4gei1h0AEi0HPD/components/images/divider/divider-overview-light.svg?fit=max&auto=format&n=7l4gei1h0AEi0HPD&q=85&s=49f51d8a2402bc2bf47bf9fa7f663429" alt="BEEQ Divider component overview" className="block dark:hidden" width="322" height="210" data-path="components/images/divider/divider-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/7l4gei1h0AEi0HPD/components/images/divider/divider-overview-dark.svg?fit=max&auto=format&n=7l4gei1h0AEi0HPD&q=85&s=5f80890c11494e32ea0896518862f0c7" alt="BEEQ Divider component overview" className="hidden dark:block" width="322" height="210" data-path="components/images/divider/divider-overview-dark.svg" />
    </Tile>

    <Tile href="/components/page-title" title="Page Title" description="Frame page-level hierarchy with a clear heading and optional supporting content.">
      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/page-title/page-title-overview-light.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=4651926f0cb5253aa5ad949515bf9544" alt="BEEQ Page Title component overview" className="block dark:hidden" width="640" height="636" data-path="components/images/page-title/page-title-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/wg4EwK5G4l2plt8W/components/images/page-title/page-title-overview-dark.svg?fit=max&auto=format&n=wg4EwK5G4l2plt8W&q=85&s=5394d77f1b1b55222d09960c99850e0f" alt="BEEQ Page Title component overview" className="hidden dark:block" width="640" height="636" data-path="components/images/page-title/page-title-overview-dark.svg" />
    </Tile>
  </Columns>

  ## Navigation

  <Columns cols={3}>
    <Tile href="/components/breadcrumb" title="Breadcrumb" description="Show the current location in a hierarchy and support quick backtracking.">
      <img src="https://mintcdn.com/beeq/q2QfdaQVx7Z_gV2t/components/images/breadcrumb/breadcrumb-overview-light.svg?fit=max&auto=format&n=q2QfdaQVx7Z_gV2t&q=85&s=1cb6e9eaed2f5aeed68d9d71909a3df6" alt="BEEQ Breadcrumb component overview" className="block dark:hidden" width="242" height="93" data-path="components/images/breadcrumb/breadcrumb-overview-light.svg" />

      <img src="https://mintcdn.com/beeq/q2QfdaQVx7Z_gV2t/components/images/breadcrumb/breadcrumb-overview-dark.svg?fit=max&auto=format&n=q2QfdaQVx7Z_gV2t&q=85&s=cc9ca8e405c1c1cb54cb937278805cdb" alt="BEEQ Breadcrumb component overview" className="hidden dark:block" width="242" height="93" data-path="components/images/breadcrumb/breadcrumb-overview-dark.svg" />
    </Tile>

    <Tile href="/components/side-menu" title="Side Menu" description="Navigate between sections with a persistent vertical menu." />

    <Tile href="/components/steps" title="Steps" description="Guide users through a multi-step flow with clear progress." />

    <Tile href="/components/tab" title="Tab" description="Switch between related views within the same context." />
  </Columns>
</div>

***

<Card title="Request a component" type="tip" icon="lightbulb">
  If you don't find the component you need, [request it](https://github.com/Endava/BEEQ/issues/new?template=feature_request.yml) and we'll build it for you.
</Card>