[{"data":1,"prerenderedAt":706},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":28,"doc-nav":41},[],{"_path":5,"_dir":6,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":10,"body":12,"_type":23,"_id":24,"_source":25,"_file":26,"_extension":27},"/documentation/reference",{"_path":7,"title":8},"/documentation/reference/_dir","Reference",false,"","All components",{"type":13,"children":14,"toc":20},"root",[15],{"type":16,"tag":17,"props":18,"children":19},"element","doc-component-list",{},[],{"title":10,"searchDepth":21,"depth":21,"links":22},2,[],"markdown","content:documentation:60.reference:0.index.md","content","documentation/60.reference/0.index.md","md",[29,35],{"_path":30,"_dir":10,"_draft":9,"_partial":9,"_locale":10,"title":31,"description":10,"toc":32,"_type":23,"_id":33,"_source":25,"_file":34,"_extension":27},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":7,"_dir":36,"_draft":9,"_partial":32,"_locale":10,"title":8,"_id":37,"_type":38,"_source":25,"_file":39,"_extension":40},"reference","content:documentation:60.reference:_dir.yml","yaml","documentation/60.reference/_dir.yml","yml",[42,43,46,49,52,55,58,61,64,67,70,73,76,79,82,85,88,91,94,97,100,103,106,109,112,115,123,127,131,134,137,140,143,144,145,148,155,162,169,176,183,190,197,204,211,220,227,234,241,248,254,261,268,276,283,290,296,303,310,317,325,333,340,346,352,359,365,370,377,383,391,398,404,411,420,427,434,437,443,450,456,466,472,478,485,492,502,508,517,524,531,533,539,546,557,565,571,573,579,586,592,597,599,605,611,616,622,624,630,636,641,646,649,656,662,668,671,679,688,693,701],{"_path":30,"title":31,"description":10},{"_path":44,"title":45},"/documentation/setup/_dir","Setup",{"_path":47,"title":48,"description":10},"/documentation/setup","Prerequisites",{"_path":50,"title":51,"description":10},"/documentation/setup/nuxt-layers-and-tairo","Nuxt, Layers, and Tairo",{"_path":53,"title":54,"description":10},"/documentation/setup/installation","Installation",{"_path":56,"title":57,"description":10},"/documentation/setup/add-a-layout","Add a layout",{"_path":59,"title":60,"description":10},"/documentation/setup/first-page","Your first page",{"_path":62,"title":63,"description":10},"/documentation/setup/first-api-route","Your first API route",{"_path":65,"title":66,"description":10},"/documentation/setup/configuration","Configuration",{"_path":68,"title":69},"/documentation/layers/_dir","Layers",{"_path":71,"title":72,"description":10},"/documentation/layers","Tairo base layer",{"_path":74,"title":75,"description":10},"/documentation/layers/sidebar","Sidebar layer",{"_path":77,"title":78,"description":10},"/documentation/layers/collapse","Collapse layer",{"_path":80,"title":81,"description":10},"/documentation/layers/topnav","Topnav layer",{"_path":83,"title":84,"description":10},"/documentation/layers/iconnav","Iconnav layer",{"_path":86,"title":87,"description":10},"/documentation/layers/extending-layers","Extending Tairo Layers",{"_path":89,"title":90},"/documentation/tailwindcss/_dir","Tailwind CSS",{"_path":92,"title":93,"description":10},"/documentation/tailwindcss","Tailwind, and Tairo",{"_path":95,"title":96,"description":10},"/documentation/tailwindcss/config","Customizing Tailwind",{"_path":98,"title":99,"description":10},"/documentation/tailwindcss/shuriken-ui","رابط کاربری شوریکن",{"_path":101,"title":102,"description":10},"/documentation/tailwindcss/colors","Colors",{"_path":104,"title":105,"description":10},"/documentation/tailwindcss/fonts","Fonts",{"_path":107,"title":108,"description":10},"/documentation/tailwindcss/tooltip","Tooltip",{"_path":110,"title":111},"/documentation/guides/_dir","Guides",{"_path":113,"title":10,"description":114},"/documentation/guides","Redirecting to panels...",{"_path":116,"title":117,"description":118,"components":119,"icon":121},"/documentation/guides/panels","Panels","Tairo panels allow to display additional data and details in animated left or right drawers.",[120],"TairoPanels",{"src":122,"srcDark":122},"/img/illustrations/components/logo-icon.svg",{"_path":124,"title":125,"description":126},"/documentation/guides/form-validation","Form validation","Form validation is a way to check if the data entered by the user is valid. Tairo provides a simple way to validate forms using the `veevalidate` and `zod` libraries.",{"_path":128,"title":129,"description":130},"/documentation/guides/mutli-step-forms","Multi step forms","Utils to create stepper forms in multiple pages",{"_path":132,"title":133,"description":10},"/documentation/guides/pnpm-workspace","Pnpm workspace",{"_path":135,"title":136,"description":10},"/documentation/guides/deployment","Deployment",{"_path":138,"title":139,"description":10},"/documentation/guides/typescript","Typescript",{"_path":141,"title":142,"description":10},"/documentation/guides/troubleshooting","Troubleshooting",{"_path":7,"title":8},{"_path":5,"title":11,"description":10},{"_path":146,"title":147},"/documentation/reference/base/_dir","UI Components",{"_path":149,"title":150,"description":151,"components":152,"icon":153},"/documentation/reference/base/accordion","BaseAccordion","Display content in a collapsible and expandable format.",[150],{"src":154,"srcDark":154},"/img/illustrations/components/accordion-icon.svg",{"_path":156,"title":157,"description":158,"components":159,"icon":160},"/documentation/reference/base/avatar-group","BaseAvatarGroup","Use avatars groups to represent groups of persons, technologies, companies or anything else with a logo or an image.",[157],{"src":161,"srcDark":161},"/img/illustrations/components/avatar-group-icon.svg",{"_path":163,"title":164,"description":165,"components":166,"icon":167},"/documentation/reference/base/avatar","BaseAvatar","Use avatars to represent entities with an image, icon, or initials. Discover multiple variations and options.",[164],{"src":168,"srcDark":168},"/img/illustrations/components/avatar-icon.svg",{"_path":170,"title":171,"description":172,"components":173,"icon":174},"/documentation/reference/base/breadcrumb","BaseBreadcrumb","Don't let users get lost inside your application. Automatically generate breadcrumbs based on the current route.",[171],{"src":175,"srcDark":175},"/img/illustrations/components/breadcrumb-icon.svg",{"_path":177,"title":178,"description":179,"components":180,"icon":181},"/documentation/reference/base/button-action","BaseButtonAction","Use actions to interact within or to navigate to a new page. Explore the different button types and their variations.",[178],{"src":182,"srcDark":182},"/img/illustrations/components/button-icon.svg",{"_path":184,"title":185,"description":186,"components":187,"icon":188},"/documentation/reference/base/button-close","BaseButtonClose","Use close buttons for all your custom elements that need to have a close handle, like for modals, dialogs and alerts.",[185],{"src":189,"srcDark":189},"/img/illustrations/components/button-close-icon.svg",{"_path":191,"title":192,"description":193,"components":194,"icon":195},"/documentation/reference/base/button-icon","BaseButtonIcon","Use icon buttons to interact within or to navigate to a new page. Explore the different button types and their variations.",[192],{"src":196,"srcDark":196},"/img/illustrations/components/button-action-icon.svg",{"_path":198,"title":199,"description":200,"components":201,"icon":203},"/documentation/reference/base/button","BaseButton","Use buttons to trigger actions or to navigate to a new page. Explore the different button types and their variations.",[199,202],"BaseButtonGroup",{"src":182,"srcDark":182},{"_path":205,"title":206,"description":207,"components":208,"icon":209},"/documentation/reference/base/card","BaseCard","Cards are used to group related content and present it in an elegant and efficient way. Explore the available options.",[206],{"src":210,"srcDark":210},"/img/illustrations/components/card-icon.svg",{"_path":212,"title":213,"description":214,"components":215,"icon":218},"/documentation/reference/base/dropdown","BaseDropdown","Dropdown are used to display multiple options after a user interaction. Customize how they look and feel using the available props.",[213,216,217],"BaseDropdownItem","BaseDropdownDivider",{"src":219,"srcDark":219},"/img/illustrations/components/dropdown-icon.svg",{"_path":221,"title":222,"description":223,"components":224,"icon":225},"/documentation/reference/base/focus-loop","BaseFocusLoop","Use the focus loop when you want to group several elements inside a same container and make them easily focusable.",[222],{"src":226,"srcDark":226},"/img/illustrations/components/focus-loop-icon.svg",{"_path":228,"title":229,"description":230,"components":231,"icon":232},"/documentation/reference/base/icon-box","BaseIconBox","Display a box with an icon and a title. Use this to raise attention to a specific feature.",[229],{"src":233,"srcDark":233},"/img/illustrations/components/iconbox-icon.svg",{"_path":235,"title":236,"description":237,"components":238,"icon":240},"/documentation/reference/base/list","BaseList","Tairo provides ready to use typography components such as heading, paragraphs and text, with many customization options.",[236,239],"BaseListItem",{"src":154,"srcDark":154},{"_path":242,"title":243,"description":244,"components":245,"icon":246},"/documentation/reference/base/message","BaseMessage","Use messages to inform users about important interactions or events that occur inside your application.",[243],{"src":247,"srcDark":247},"/img/illustrations/components/message-icon.svg",{"_path":249,"title":250,"description":223,"components":251,"icon":252},"/documentation/reference/base/pagination","BasePagination",[250],{"src":253,"srcDark":253},"/img/illustrations/components/pagination-icon.svg",{"_path":255,"title":256,"description":257,"components":258,"icon":259},"/documentation/reference/base/placeholder","BasePlaceholderPage","Use placeholders when your pages are empty. It can be because there is no data yet to display or because the user has no access to the content.",[256],{"src":260,"srcDark":260},"/img/illustrations/components/placeholder-icon.svg",{"_path":262,"title":263,"description":264,"components":265,"icon":266},"/documentation/reference/base/placeload","BasePlaceload","Use placeloads to show a loading state on your page. Placeloads can be customized to mimic the content structure of your page.",[263],{"src":267,"srcDark":267},"/img/illustrations/components/placeload-icon.svg",{"_path":269,"title":270,"description":271,"components":272,"icon":274},"/documentation/reference/base/progress","BaseProgress","Display the progress of a task in a linear or circular way. Use the different options to customize the look and feel of the progress bars.",[270,273],"BaseProgressCircle",{"src":275,"srcDark":275},"/img/illustrations/components/progress-icon.svg",{"_path":277,"title":278,"description":279,"components":280,"icon":281},"/documentation/reference/base/prose","BaseProse","Use the prose component, which is an implementation of the Tailwind CSS typography plugin, made ready to use for your content driven pages.",[278],{"src":282,"srcDark":282},"/img/illustrations/components/prose-icon.svg",{"_path":284,"title":285,"description":286,"components":287,"icon":288},"/documentation/reference/base/snack","BaseSnack","Snacks are used to display an interactive message to the user. They are used to display information in a compact way.",[285],{"src":289,"srcDark":289},"/img/illustrations/components/snack-icon.svg",{"_path":291,"title":292,"description":293,"components":294,"icon":295},"/documentation/reference/base/tabs-slider","BaseTabSlider","Use tab sliders to display fancy sliding tabs that you can use anywhere in your app, components and pages.",[292],{"src":226,"srcDark":226},{"_path":297,"title":298,"description":299,"components":300,"icon":301},"/documentation/reference/base/tabs","BaseTabs","Use navtabs to organize content into different sections. Explore the different options to customize the look and feel of your tabs.",[298],{"src":302,"srcDark":302},"/img/illustrations/components/tabs-icon.svg",{"_path":304,"title":305,"description":306,"components":307,"icon":308},"/documentation/reference/base/tag","BaseTag","Tags are used to display information in a compact and synthetic way. Many color and shape options are available to customize them.",[305],{"src":309,"srcDark":309},"/img/illustrations/components/tag-icon.svg",{"_path":311,"title":312,"description":313,"components":314,"icon":316},"/documentation/reference/base/theme-toggle","BaseThemeToggle","Tairo ships with a ready to use theme switcher that you can include anywhere to toggle between light and dark mode.",[312,315],"BaseThemeSwitch",{"src":226,"srcDark":226},{"_path":318,"title":319,"description":237,"components":320,"icon":324},"/documentation/reference/base/typography","BaseHeading",[319,321,322,323],"BaseParagraph","BaseText","BaseLink",{"src":226,"srcDark":226},{"_path":326,"title":327,"description":328,"components":329,"icon":331},"/documentation/reference/forms/autocomplete","BaseAutocomplete","Tairo ships with ready to use autocomplete that render different kinds of lists, ranging from text to complex media objects.",[327,330],"BaseAutocompleteItem",{"src":332,"srcDark":332},"/img/illustrations/components/autocomplete-icon.svg",{"_path":334,"title":335,"description":336,"components":337,"icon":338},"/documentation/reference/forms/checkbox-animated","BaseCheckboxAnimated","Use animated checkboxes to display fancy svg circle and check animations, which are ideal to engage your audience.",[335],{"src":339,"srcDark":339},"/img/illustrations/components/checkbox-icon.svg",{"_path":341,"title":342,"description":343,"components":344,"icon":345},"/documentation/reference/forms/checkbox-headless","BaseCheckboxHeadless","Create a custom checkbox using the the base checkbox element and designing yourself the exterior look of it.",[342],{"src":339,"srcDark":339},{"_path":347,"title":348,"description":349,"components":350,"icon":351},"/documentation/reference/forms/checkbox","BaseCheckbox","A checkbox is a form element that allows the user to select one or more options from a predefined set of data.",[348],{"src":339,"srcDark":339},{"_path":353,"title":354,"description":355,"components":356,"icon":357},"/documentation/reference/forms/dropfile","BaseFullscreenDropfile","Tairo fullscreen drop file is a component that handles drag and drop file uploads. It works in conjunction with the `BaseInputFileHeadless` component.",[354],{"src":358,"srcDark":358},"/img/illustrations/components/input-file-icon.svg",{"_path":360,"title":361,"description":362,"components":363,"icon":364},"/documentation/reference/forms/file-headless","BaseInputFileHeadless","Use file inputs in your form to allow the user to upload files from their computer. Many customization options are available.",[361],{"src":358,"srcDark":358},{"_path":366,"title":367,"description":362,"components":368,"icon":369},"/documentation/reference/forms/file","BaseInputFile",[367],{"src":358,"srcDark":358},{"_path":371,"title":372,"description":373,"components":374,"icon":375},"/documentation/reference/forms/input-number","BaseInputNumber","An input dedicated to numeric data. Explore the available options.",[372],{"src":376,"srcDark":376},"/img/illustrations/components/input-icon.svg",{"_path":378,"title":379,"description":380,"components":381,"icon":382},"/documentation/reference/forms/input","BaseInput","An input is a form element that allows the user to enter text or numeric data from the keyboard. Explore the available options.",[379],{"src":376,"srcDark":376},{"_path":384,"title":385,"description":386,"components":387,"icon":389},"/documentation/reference/forms/listbox","BaseListbox","Tairo ships with ready to use listbox select that render different kinds of lists, ranging from text to complex media objects.",[385,388],"BaseListboxItem",{"src":390,"srcDark":390},"/img/illustrations/components/listbox-icon.svg",{"_path":392,"title":393,"description":394,"components":395,"icon":396},"/documentation/reference/forms/radio-headless","BaseRadioHeadless","Create a completely custom radio button using the the base radio element and designing yourself the exterior look of it.",[393],{"src":397,"srcDark":397},"/img/illustrations/components/radio-icon.svg",{"_path":399,"title":400,"description":401,"components":402,"icon":403},"/documentation/reference/forms/radio","BaseRadio","A radio button is a form element that allows the user to select a single option from a predefined set.",[400],{"src":397,"srcDark":397},{"_path":405,"title":406,"description":407,"components":408,"icon":409},"/documentation/reference/forms/select","BaseSelect","Use the Tairo select form element when you wan to display a mobile friendly selection box. Explore the available customization options.",[406],{"src":410,"srcDark":410},"/img/illustrations/components/select-icon.svg",{"_path":412,"title":413,"description":414,"components":415,"icon":418},"/documentation/reference/forms/switch","BaseSwitch","A switch is a binary input that can be either on or off. It is used to toggle between two states. Check out the thin and the ball versions.",[416,417],"BaseSwitchThin","BaseSwitchBall",{"src":419,"srcDark":419},"/img/illustrations/components/switch-thin-icon.svg",{"_path":421,"title":422,"description":423,"components":424,"icon":425},"/documentation/reference/forms/textarea","BaseTextarea","A textarea is a form element that allows the user to enter long text data from the keyboard. Explore the available customization options.",[422],{"src":426,"srcDark":426},"/img/illustrations/components/textarea-icon.svg",{"_path":428,"title":429,"description":430,"components":431,"icon":433},"/documentation/reference/forms/treeselect","BaseTreeSelect","Display data tree in collapsible items. Can be used to select node in tree.",[429,432],"BaseTreeSelectItem",{"src":426,"srcDark":426},{"_path":435,"title":436},"/documentation/reference/tairo/_dir","Tairo layer",{"_path":438,"title":439,"description":440,"components":441,"icon":442},"/documentation/reference/tairo/check-animated","TairoCheckAnimated","Tairo animated check icon can be used to show a checkmark animation when a user accomplishes an action.",[439],{"src":339,"srcDark":339},{"_path":444,"title":445,"description":446,"components":447,"icon":449},"/documentation/reference/tairo/content-wrapper","TairoContentWrapper","Tairo content wrapper wraps the page content. It provides slots and allows you to control the horizontal flow of the page.",[445,448],"TairoContentWrapperTabbed",{"src":122,"srcDark":122},{"_path":451,"title":452,"description":453,"components":454,"icon":455},"/documentation/reference/tairo/error","TairoError","Tairo provides a simple way to show errors to the user. It uses the `TairoError` component to show the error.",[452],{"src":189,"srcDark":189},{"_path":457,"title":458,"description":459,"components":460,"icon":464},"/documentation/reference/tairo/flex-table","TairoFlexTable","Flex tables are an alternative way to display tabular data. They behave responsively on smaller screens.",[458,461,462,463],"TairoFlexTableHeading","TairoFlexTableRow","TairoFlexTableCell",{"src":465,"srcDark":465},"/img/illustrations/components/table-icon.svg",{"_path":467,"title":468,"description":469,"components":470,"icon":471},"/documentation/reference/tairo/form-group","TairoFormGroup","Tairo form groups are used to hold some form elements together. They are used to show a label and a description for a group of form elements.",[468],{"src":189,"srcDark":189},{"_path":473,"title":474,"description":475,"components":476,"icon":477},"/documentation/reference/tairo/form-save","TairoFormSave","Tairo form save is a customizable set of fixed buttons that are used to save or cancel a form.",[474],{"src":196,"srcDark":196},{"_path":479,"title":480,"description":481,"components":482,"icon":484},"/documentation/reference/tairo/logo","TairoLogo","The Tairo logo is an inline and customizable svg logo component that can be used to display your app logo.",[480,483],"TairoLogoText",{"src":122,"srcDark":122},{"_path":486,"title":487,"description":488,"components":489,"icon":490},"/documentation/reference/tairo/modal","TairoModal","Modals are popups that you can use to force an interaction before the user can continue using the application.",[487],{"src":491,"srcDark":491},"/img/illustrations/components/modal-icon.svg",{"_path":493,"title":494,"description":495,"components":496,"icon":500},"/documentation/reference/tairo/popover","TairoPopover","A flexible popover that you can use to make simple text based popovers or more complex UI interactions.",[494,497,498,499],"TairoPopoverContentHelp","TairoPopoverContentDual","TairoPopoverContentMedia",{"src":501,"srcDark":501},"/img/illustrations/components/popover-icon.svg",{"_path":503,"title":504,"description":505,"components":506,"icon":507},"/documentation/reference/tairo/sidebar-tools","TairoSidebarTools","Tairo sidebar tools is a component that lets you reuse the main toolbar buttons anywhere in your app.",[504],{"src":196,"srcDark":196},{"_path":509,"title":510,"description":511,"components":512,"icon":516},"/documentation/reference/tairo/table","TairoTable","Tairo tables are a quick shortcut to render lists and collections using the native HTML5 table element.",[510,513,514,515],"TairoTableHeading","TairoTableRow","TairoTableCell",{"src":226,"srcDark":226},{"_path":518,"title":519,"description":520,"components":521,"icon":522},"/documentation/reference/tairo/toaster","TairoToaster","Tairo toasters are used to display notifications and messages to the user.",[519],{"src":523,"srcDark":523},"/img/illustrations/components/sidebar-icon.svg",{"_path":525,"title":526,"description":527,"components":528,"icon":530},"/documentation/reference/tairo/toc","TairoToc","Tairo's table of contents component provides an easy way to display the page content using the anchors on the page.",[526,529],"TairoTocAnchor",{"src":523,"srcDark":523},{"_path":532,"title":75},"/documentation/reference/sidebar/_dir",{"_path":534,"title":535,"description":536,"components":537,"icon":538},"/documentation/reference/sidebar/layout","TairoSidebarLayout","The sidebar layout is a double sided navigation layout. It has a sidebar with a list of menu links and a subsidebar with a list of submenu links.",[535,480],{"src":523,"srcDark":523},{"_path":540,"title":541,"description":542,"components":543,"icon":545},"/documentation/reference/sidebar/navigation","TairoSidebarNavigation","The sidebar navigation is a double sided navigation layout. It has a sidebar with a list of menu links and a subsidebar with a list of submenu links.",[541,544],"TairoSidebarNavigationItem",{"src":523,"srcDark":523},{"_path":547,"title":548,"description":549,"components":550,"icon":556},"/documentation/reference/sidebar/subsidebar","TairoSubsidebar","The subsidebar works as a submenu element for the TairoSidebarNavigation component",[548,551,552,553,554,555],"TairoSubsidebarHeader","TairoSubsidebarMenu","TairoSubsidebarMenuCollapseLinks","TairoSubsidebarMenuDivider","TairoSubsidebarMenuLink",{"src":523,"srcDark":523},{"_path":558,"title":559,"description":560,"components":561,"icon":563},"/documentation/reference/sidebar/toolbar","TairoSidebarToolbar","The Tairo toolbar provides a smart way to handle menu items that are displayed at the top of the page.",[559,562],"TairoSidebarBurger",{"src":564,"srcDark":564},"/img/illustrations/components/anchor-icon.svg",{"_path":566,"title":567,"description":568,"components":569,"icon":570},"/documentation/reference/sidebar/circular-menu","TairoSidebarCircularMenu","Tairo's circular menu is a flying button that can be expanded to display the toolbar menu, when not visible.",[567],{"src":564,"srcDark":564},{"_path":572,"title":78},"/documentation/reference/collapse/_dir",{"_path":574,"title":575,"description":576,"components":577,"icon":578},"/documentation/reference/collapse/layout","TairoCollapseLayout","The collapse layout focuses on a single sidebar with a list of menu links.",[575],{"src":523,"srcDark":523},{"_path":580,"title":581,"description":582,"components":583,"icon":585},"/documentation/reference/collapse/navigation","TairoCollapseNavigation","The collapse navigation focuses on a single sidebar with a list of menu links.",[581,584],"TairoCollapseNavigationCollapseLinks",{"src":523,"srcDark":523},{"_path":587,"title":588,"description":560,"components":589,"icon":591},"/documentation/reference/collapse/toolbar","TairoCollapseToolbar",[588,590],"TairoCollapseBurger",{"src":564,"srcDark":564},{"_path":593,"title":594,"description":568,"components":595,"icon":596},"/documentation/reference/collapse/circular-menu","TairoCollapseCircularMenu",[594],{"src":564,"srcDark":564},{"_path":598,"title":81},"/documentation/reference/topnav/_dir",{"_path":600,"title":601,"description":602,"components":603,"icon":604},"/documentation/reference/topnav/layout","TairoTopnavLayout","The Topnav layout focuses on a single top navbar with a list of menu links.",[601],{"src":154,"srcDark":154},{"_path":606,"title":607,"description":608,"components":609,"icon":610},"/documentation/reference/topnav/navigation","TairoTopnavNavigation","The Topnav navigation provides a slot for the header as well as a toolbar.",[607],{"src":154,"srcDark":154},{"_path":612,"title":613,"description":568,"components":614,"icon":615},"/documentation/reference/topnav/circular-menu","TairoTopnavCircularMenu",[613],{"src":564,"srcDark":564},{"_path":617,"title":618,"description":619,"components":620,"icon":621},"/documentation/reference/topnav/footer","TairoTopnavFooter","Tairo's top nav footer is a minimal footer that you can include to provide additional navigation links.",[618],{"src":564,"srcDark":564},{"_path":623,"title":84},"/documentation/reference/iconnav/_dir",{"_path":625,"title":626,"description":627,"components":628,"icon":629},"/documentation/reference/iconnav/layout","TairoIconnavLayout","The Iconnav layout focuses on a double top navbar with a list of menu links.",[626],{"src":154,"srcDark":154},{"_path":631,"title":632,"description":633,"components":634,"icon":635},"/documentation/reference/iconnav/navigation","TairoIconnavNavigation","The Iconnav navigation provides a slot for the header as well as a toolbar.",[632],{"src":154,"srcDark":154},{"_path":637,"title":638,"description":568,"components":639,"icon":640},"/documentation/reference/iconnav/circular-menu","TairoIconnavCircularMenu",[638],{"src":564,"srcDark":564},{"_path":642,"title":643,"description":619,"components":644,"icon":645},"/documentation/reference/iconnav/footer","TairoIconnavFooter",[643],{"src":564,"srcDark":564},{"_path":647,"title":648},"/documentation/reference/advanced/_dir","Advanced",{"_path":650,"title":651,"description":652,"components":653,"icon":654},"/documentation/reference/advanced/input-password","AddonInputPassword","Secure password input field with password visibility toggle.",[651],{"src":655,"srcDark":655},"/img/illustrations/components/markdown-icon.svg",{"_path":657,"title":658,"description":659,"components":660,"icon":661},"/documentation/reference/advanced/input-phone","AddonInputPhone","International phone number input field with country code dropdown.",[658],{"src":655,"srcDark":655},{"_path":663,"title":664,"description":665,"components":666,"icon":667},"/documentation/reference/advanced/markdown","AddonMarkdownRemark","Convert markdown to HTML client-side using the unified remak/rehype and shiki. Use the built-in component to render markdown content.",[664],{"src":655,"srcDark":655},{"_path":669,"title":670},"/documentation/reference/integration/_dir","Integration",{"_path":672,"title":673,"description":674,"components":675,"icon":677},"/documentation/reference/integration/apexcharts","Apexcharts","Tairo ships with the Apexcharts data visualization library customized for Vue and Nuxt. Use the component to render charts and graphs.",[676],"AddonApexcharts",{"src":678,"srcDark":678},"/img/illustrations/components/apexcharts-icon.svg",{"_path":680,"title":681,"description":682,"components":683,"icon":686},"/documentation/reference/integration/carousel","Carousel","Tairo ships with the swiper module for Nuxt. Use the component to display fancy and highly customizable carousels.",[684,685],"AddonCarouselTeam","AddonCarouselIcons",{"src":687,"srcDark":687},"/img/illustrations/components/carousel-icon.svg",{"_path":689,"title":690,"description":10,"components":691},"/documentation/reference/integration/icons","Icons",[692],"Icon",{"_path":694,"title":695,"description":696,"components":697,"icon":699},"/documentation/reference/integration/mapbox","Mapbox","Tairo ships with a Mapbox integration, allowing you to display maps anywhere you want. Explore the mapbox panel for a concrete example.",[698],"AddonMapboxPanel",{"src":700,"srcDark":700},"/img/illustrations/components/map-icon.svg",{"_path":702,"title":703,"description":704,"icon":705},"/documentation/reference/integration/slider","Sliders","Tairo ships with the powerful vueform slider component. Use it to render fancy sliders with or without tooltips and the ability to merge them.",{"src":161,"srcDark":161},1779173424730]