[{"data":1,"prerenderedAt":1002},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":327,"doc-page-nav":340,"doc-nav":345},[],{"_path":5,"_dir":6,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":10,"body":12,"_type":322,"_id":323,"_source":324,"_file":325,"_extension":326},"/documentation/layers",{"_path":7,"title":8},"/documentation/layers/_dir","Layers",false,"","Tairo base layer",{"type":13,"children":14,"toc":319},"root",[15,308,313],{"type":16,"tag":17,"props":18,"children":20},"element","doc-component-demo",{"title":19},"Tairo Layer",[21,28,35,40,42,163,172,177,179,267,272,277,295],{"type":16,"tag":22,"props":23,"children":24},"p",{},[25],{"type":26,"value":27},"text","This layer is the base layer of Tairo. It contains shared features across all layers like panels, multi step forms, modals, advanced inputs, etc...",{"type":16,"tag":29,"props":30,"children":34},"doc-heading",{"className":31,"label":33},[32],"mb-4","Modules",[],{"type":16,"tag":22,"props":36,"children":37},{},[38],{"type":26,"value":39},"Modules are preinstalled to bootstrap your project with a lot of features and utilities while keeping the flexibility to extend or override them",{"type":26,"value":41},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":16,"tag":43,"props":44,"children":45},"table",{},[46,66],{"type":16,"tag":47,"props":48,"children":49},"thead",{},[50],{"type":16,"tag":51,"props":52,"children":53},"tr",{},[54,61],{"type":16,"tag":55,"props":56,"children":58},"th",{"align":57},"left",[59],{"type":26,"value":60},"Module",{"type":16,"tag":55,"props":62,"children":63},{"align":57},[64],{"type":26,"value":65},"Description",{"type":16,"tag":67,"props":68,"children":69},"tbody",{},[70,91,109,127,145],{"type":16,"tag":51,"props":71,"children":72},{},[73,86],{"type":16,"tag":74,"props":75,"children":76},"td",{"align":57},[77],{"type":16,"tag":78,"props":79,"children":83},"a",{"href":80,"rel":81},"https://shurikenui.com/",[82],"nofollow",[84],{"type":26,"value":85},"@shuriken-ui/nuxt",{"type":16,"tag":74,"props":87,"children":88},{"align":57},[89],{"type":26,"value":90},"Base UI components",{"type":16,"tag":51,"props":92,"children":93},{},[94,104],{"type":16,"tag":74,"props":95,"children":96},{"align":57},[97],{"type":16,"tag":78,"props":98,"children":101},{"href":99,"rel":100},"https://vueuse.org/",[82],[102],{"type":26,"value":103},"@vueuse/nuxt",{"type":16,"tag":74,"props":105,"children":106},{"align":57},[107],{"type":26,"value":108},"Vue composition API utilities",{"type":16,"tag":51,"props":110,"children":111},{},[112,122],{"type":16,"tag":74,"props":113,"children":114},{"align":57},[115],{"type":16,"tag":78,"props":116,"children":119},{"href":117,"rel":118},"https://github.com/nuxt-modules/icon",[82],[120],{"type":26,"value":121},"nuxt-icon",{"type":16,"tag":74,"props":123,"children":124},{"align":57},[125],{"type":26,"value":126},"100,000+ ready to use icons from Iconify.",{"type":16,"tag":51,"props":128,"children":129},{},[130,140],{"type":16,"tag":74,"props":131,"children":132},{"align":57},[133],{"type":16,"tag":78,"props":134,"children":137},{"href":135,"rel":136},"https://color-mode.nuxtjs.org/",[82],[138],{"type":26,"value":139},"@nuxtjs/color-mode",{"type":16,"tag":74,"props":141,"children":142},{"align":57},[143],{"type":26,"value":144},"Dark and Light mode for Nuxt with auto detection",{"type":16,"tag":51,"props":146,"children":147},{},[148,158],{"type":16,"tag":74,"props":149,"children":150},{"align":57},[151],{"type":16,"tag":78,"props":152,"children":155},{"href":153,"rel":154},"https://tailwindcss.nuxtjs.org/",[82],[156],{"type":26,"value":157},"@nuxtjs/tailwindcss",{"type":16,"tag":74,"props":159,"children":160},{"align":57},[161],{"type":26,"value":162},"Tailwind CSS integration for Nuxt.js",{"type":16,"tag":164,"props":165,"children":166},"doc-message",{},[167],{"type":16,"tag":22,"props":168,"children":169},{},[170],{"type":26,"value":171},"Take a look at their documentation to see all the features they provide",{"type":16,"tag":29,"props":173,"children":176},{"className":174,"label":175},[32],"Composables",[],{"type":26,"value":178},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":16,"tag":43,"props":180,"children":181},{},[182,196],{"type":16,"tag":47,"props":183,"children":184},{},[185],{"type":16,"tag":51,"props":186,"children":187},{},[188,192],{"type":16,"tag":55,"props":189,"children":190},{"align":57},[191],{"type":26,"value":60},{"type":16,"tag":55,"props":193,"children":194},{"align":57},[195],{"type":26,"value":65},{"type":16,"tag":67,"props":197,"children":198},{},[199,216,233,250],{"type":16,"tag":51,"props":200,"children":201},{},[202,211],{"type":16,"tag":74,"props":203,"children":204},{"align":57},[205],{"type":16,"tag":78,"props":206,"children":208},{"href":207},"/documentation/guides/mutli-step-forms",[209],{"type":26,"value":210},"useMultiStepForm",{"type":16,"tag":74,"props":212,"children":213},{"align":57},[214],{"type":26,"value":215},"A composable to create forms over multiple pages",{"type":16,"tag":51,"props":217,"children":218},{},[219,228],{"type":16,"tag":74,"props":220,"children":221},{"align":57},[222],{"type":16,"tag":78,"props":223,"children":225},{"href":224},"/documentation/guides/panels",[226],{"type":26,"value":227},"usePanels",{"type":16,"tag":74,"props":229,"children":230},{"align":57},[231],{"type":26,"value":232},"Easily create and show panels with a lot of features",{"type":16,"tag":51,"props":234,"children":235},{},[236,245],{"type":16,"tag":74,"props":237,"children":238},{"align":57},[239],{"type":16,"tag":78,"props":240,"children":242},{"href":241},"/documentation/reference/tairo/toaster",[243],{"type":26,"value":244},"useToaster",{"type":16,"tag":74,"props":246,"children":247},{"align":57},[248],{"type":26,"value":249},"Show toasts with ease",{"type":16,"tag":51,"props":251,"children":252},{},[253,262],{"type":16,"tag":74,"props":254,"children":255},{"align":57},[256],{"type":16,"tag":257,"props":258,"children":259},"strong",{},[260],{"type":26,"value":261},"useTailwindColors",{"type":16,"tag":74,"props":263,"children":264},{"align":57},[265],{"type":26,"value":266},"Reactive colors from your tailwind config",{"type":16,"tag":29,"props":268,"children":271},{"className":269,"label":270},[32],"Configuration",[],{"type":16,"tag":22,"props":273,"children":274},{},[275],{"type":26,"value":276},"The default configuration of Tairo is really simple. It allows you to set the title of your app, the logo of the error page and the panels you want to use. Feel free to add your own configuration keys and use them in your app.",{"type":16,"tag":278,"props":279,"children":280},"code-group",{},[281],{"type":16,"tag":282,"props":283,"children":289},"pre",{"className":284,"code":286,"filename":287,"language":288,"meta":10},[285],"language-ts","export default defineAppConfig({\n  tairo: {\n    title: 'Tairo',\n\n    error: {\n      logo: {\n        component: 'TairoLogo',\n        props: { class: 'text-primary-500 mx-auto h-40 p-6' },\n      },\n    },\n\n    panels: [],\n  },\n})\n","\u003Capp>/app.config.ts","ts",[290],{"type":16,"tag":291,"props":292,"children":293},"code",{"__ignoreMap":10},[294],{"type":26,"value":286},{"type":16,"tag":22,"props":296,"children":297},{},[298,300,306],{"type":26,"value":299},"New configuration options are added to the ",{"type":16,"tag":291,"props":301,"children":303},{"className":302},[],[304],{"type":26,"value":305},"tairo",{"type":26,"value":307}," object when you enable layouts, see details in corresponding layer documentation.",{"type":16,"tag":309,"props":310,"children":312},"doc-component-list",{"prefix":311},"^Tairo(?!Sidebar|Subsidebar|Collapse|Topnav|Iconnav)(.*)",[],{"type":16,"tag":314,"props":315,"children":318},"doc-nav",{"next":316,"prev":317},"/documentation/layers/sidebar","/documentation/setup/first-api-route",[],{"title":10,"searchDepth":320,"depth":320,"links":321},2,[],"markdown","content:documentation:20.layers:1.index.md","content","documentation/20.layers/1.index.md","md",[328,334],{"_path":329,"_dir":10,"_draft":9,"_partial":9,"_locale":10,"title":330,"description":10,"toc":331,"_type":322,"_id":332,"_source":324,"_file":333,"_extension":326},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":7,"_dir":335,"_draft":9,"_partial":331,"_locale":10,"title":8,"_id":336,"_type":337,"_source":324,"_file":338,"_extension":339},"layers","content:documentation:20.layers:_dir.yml","yaml","documentation/20.layers/_dir.yml","yml",[341,343],{"_path":317,"title":342},"Your first API route",{"_path":316,"title":344},"Sidebar layer",[346,347,350,353,356,359,362,365,366,368,369,370,371,374,377,380,383,386,389,392,395,398,401,404,407,410,417,421,424,427,430,433,436,439,442,445,452,459,466,473,480,487,494,501,508,517,524,531,538,545,551,558,565,573,580,587,593,600,607,614,622,630,637,643,649,656,662,667,674,680,688,695,701,708,717,724,731,734,740,747,753,763,769,775,782,789,799,805,814,820,827,829,835,842,853,861,867,869,875,882,888,893,895,901,907,912,918,920,926,932,937,942,945,952,958,964,967,975,984,989,997],{"_path":329,"title":330,"description":10},{"_path":348,"title":349},"/documentation/setup/_dir","Setup",{"_path":351,"title":352,"description":10},"/documentation/setup","Prerequisites",{"_path":354,"title":355,"description":10},"/documentation/setup/nuxt-layers-and-tairo","Nuxt, Layers, and Tairo",{"_path":357,"title":358,"description":10},"/documentation/setup/installation","Installation",{"_path":360,"title":361,"description":10},"/documentation/setup/add-a-layout","Add a layout",{"_path":363,"title":364,"description":10},"/documentation/setup/first-page","Your first page",{"_path":317,"title":342,"description":10},{"_path":367,"title":270,"description":10},"/documentation/setup/configuration",{"_path":7,"title":8},{"_path":5,"title":11,"description":10},{"_path":316,"title":344,"description":10},{"_path":372,"title":373,"description":10},"/documentation/layers/collapse","Collapse layer",{"_path":375,"title":376,"description":10},"/documentation/layers/topnav","Topnav layer",{"_path":378,"title":379,"description":10},"/documentation/layers/iconnav","Iconnav layer",{"_path":381,"title":382,"description":10},"/documentation/layers/extending-layers","Extending Tairo Layers",{"_path":384,"title":385},"/documentation/tailwindcss/_dir","Tailwind CSS",{"_path":387,"title":388,"description":10},"/documentation/tailwindcss","Tailwind, and Tairo",{"_path":390,"title":391,"description":10},"/documentation/tailwindcss/config","Customizing Tailwind",{"_path":393,"title":394,"description":10},"/documentation/tailwindcss/shuriken-ui","رابط کاربری شوریکن",{"_path":396,"title":397,"description":10},"/documentation/tailwindcss/colors","Colors",{"_path":399,"title":400,"description":10},"/documentation/tailwindcss/fonts","Fonts",{"_path":402,"title":403,"description":10},"/documentation/tailwindcss/tooltip","Tooltip",{"_path":405,"title":406},"/documentation/guides/_dir","Guides",{"_path":408,"title":10,"description":409},"/documentation/guides","Redirecting to panels...",{"_path":224,"title":411,"description":412,"components":413,"icon":415},"Panels","Tairo panels allow to display additional data and details in animated left or right drawers.",[414],"TairoPanels",{"src":416,"srcDark":416},"/img/illustrations/components/logo-icon.svg",{"_path":418,"title":419,"description":420},"/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":207,"title":422,"description":423},"Multi step forms","Utils to create stepper forms in multiple pages",{"_path":425,"title":426,"description":10},"/documentation/guides/pnpm-workspace","Pnpm workspace",{"_path":428,"title":429,"description":10},"/documentation/guides/deployment","Deployment",{"_path":431,"title":432,"description":10},"/documentation/guides/typescript","Typescript",{"_path":434,"title":435,"description":10},"/documentation/guides/troubleshooting","Troubleshooting",{"_path":437,"title":438},"/documentation/reference/_dir","Reference",{"_path":440,"title":441,"description":10},"/documentation/reference","All components",{"_path":443,"title":444},"/documentation/reference/base/_dir","UI Components",{"_path":446,"title":447,"description":448,"components":449,"icon":450},"/documentation/reference/base/accordion","BaseAccordion","Display content in a collapsible and expandable format.",[447],{"src":451,"srcDark":451},"/img/illustrations/components/accordion-icon.svg",{"_path":453,"title":454,"description":455,"components":456,"icon":457},"/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.",[454],{"src":458,"srcDark":458},"/img/illustrations/components/avatar-group-icon.svg",{"_path":460,"title":461,"description":462,"components":463,"icon":464},"/documentation/reference/base/avatar","BaseAvatar","Use avatars to represent entities with an image, icon, or initials. Discover multiple variations and options.",[461],{"src":465,"srcDark":465},"/img/illustrations/components/avatar-icon.svg",{"_path":467,"title":468,"description":469,"components":470,"icon":471},"/documentation/reference/base/breadcrumb","BaseBreadcrumb","Don't let users get lost inside your application. Automatically generate breadcrumbs based on the current route.",[468],{"src":472,"srcDark":472},"/img/illustrations/components/breadcrumb-icon.svg",{"_path":474,"title":475,"description":476,"components":477,"icon":478},"/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.",[475],{"src":479,"srcDark":479},"/img/illustrations/components/button-icon.svg",{"_path":481,"title":482,"description":483,"components":484,"icon":485},"/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.",[482],{"src":486,"srcDark":486},"/img/illustrations/components/button-close-icon.svg",{"_path":488,"title":489,"description":490,"components":491,"icon":492},"/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.",[489],{"src":493,"srcDark":493},"/img/illustrations/components/button-action-icon.svg",{"_path":495,"title":496,"description":497,"components":498,"icon":500},"/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.",[496,499],"BaseButtonGroup",{"src":479,"srcDark":479},{"_path":502,"title":503,"description":504,"components":505,"icon":506},"/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.",[503],{"src":507,"srcDark":507},"/img/illustrations/components/card-icon.svg",{"_path":509,"title":510,"description":511,"components":512,"icon":515},"/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.",[510,513,514],"BaseDropdownItem","BaseDropdownDivider",{"src":516,"srcDark":516},"/img/illustrations/components/dropdown-icon.svg",{"_path":518,"title":519,"description":520,"components":521,"icon":522},"/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.",[519],{"src":523,"srcDark":523},"/img/illustrations/components/focus-loop-icon.svg",{"_path":525,"title":526,"description":527,"components":528,"icon":529},"/documentation/reference/base/icon-box","BaseIconBox","Display a box with an icon and a title. Use this to raise attention to a specific feature.",[526],{"src":530,"srcDark":530},"/img/illustrations/components/iconbox-icon.svg",{"_path":532,"title":533,"description":534,"components":535,"icon":537},"/documentation/reference/base/list","BaseList","Tairo provides ready to use typography components such as heading, paragraphs and text, with many customization options.",[533,536],"BaseListItem",{"src":451,"srcDark":451},{"_path":539,"title":540,"description":541,"components":542,"icon":543},"/documentation/reference/base/message","BaseMessage","Use messages to inform users about important interactions or events that occur inside your application.",[540],{"src":544,"srcDark":544},"/img/illustrations/components/message-icon.svg",{"_path":546,"title":547,"description":520,"components":548,"icon":549},"/documentation/reference/base/pagination","BasePagination",[547],{"src":550,"srcDark":550},"/img/illustrations/components/pagination-icon.svg",{"_path":552,"title":553,"description":554,"components":555,"icon":556},"/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.",[553],{"src":557,"srcDark":557},"/img/illustrations/components/placeholder-icon.svg",{"_path":559,"title":560,"description":561,"components":562,"icon":563},"/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.",[560],{"src":564,"srcDark":564},"/img/illustrations/components/placeload-icon.svg",{"_path":566,"title":567,"description":568,"components":569,"icon":571},"/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.",[567,570],"BaseProgressCircle",{"src":572,"srcDark":572},"/img/illustrations/components/progress-icon.svg",{"_path":574,"title":575,"description":576,"components":577,"icon":578},"/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.",[575],{"src":579,"srcDark":579},"/img/illustrations/components/prose-icon.svg",{"_path":581,"title":582,"description":583,"components":584,"icon":585},"/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.",[582],{"src":586,"srcDark":586},"/img/illustrations/components/snack-icon.svg",{"_path":588,"title":589,"description":590,"components":591,"icon":592},"/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.",[589],{"src":523,"srcDark":523},{"_path":594,"title":595,"description":596,"components":597,"icon":598},"/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.",[595],{"src":599,"srcDark":599},"/img/illustrations/components/tabs-icon.svg",{"_path":601,"title":602,"description":603,"components":604,"icon":605},"/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.",[602],{"src":606,"srcDark":606},"/img/illustrations/components/tag-icon.svg",{"_path":608,"title":609,"description":610,"components":611,"icon":613},"/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.",[609,612],"BaseThemeSwitch",{"src":523,"srcDark":523},{"_path":615,"title":616,"description":534,"components":617,"icon":621},"/documentation/reference/base/typography","BaseHeading",[616,618,619,620],"BaseParagraph","BaseText","BaseLink",{"src":523,"srcDark":523},{"_path":623,"title":624,"description":625,"components":626,"icon":628},"/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.",[624,627],"BaseAutocompleteItem",{"src":629,"srcDark":629},"/img/illustrations/components/autocomplete-icon.svg",{"_path":631,"title":632,"description":633,"components":634,"icon":635},"/documentation/reference/forms/checkbox-animated","BaseCheckboxAnimated","Use animated checkboxes to display fancy svg circle and check animations, which are ideal to engage your audience.",[632],{"src":636,"srcDark":636},"/img/illustrations/components/checkbox-icon.svg",{"_path":638,"title":639,"description":640,"components":641,"icon":642},"/documentation/reference/forms/checkbox-headless","BaseCheckboxHeadless","Create a custom checkbox using the the base checkbox element and designing yourself the exterior look of it.",[639],{"src":636,"srcDark":636},{"_path":644,"title":645,"description":646,"components":647,"icon":648},"/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.",[645],{"src":636,"srcDark":636},{"_path":650,"title":651,"description":652,"components":653,"icon":654},"/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.",[651],{"src":655,"srcDark":655},"/img/illustrations/components/input-file-icon.svg",{"_path":657,"title":658,"description":659,"components":660,"icon":661},"/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.",[658],{"src":655,"srcDark":655},{"_path":663,"title":664,"description":659,"components":665,"icon":666},"/documentation/reference/forms/file","BaseInputFile",[664],{"src":655,"srcDark":655},{"_path":668,"title":669,"description":670,"components":671,"icon":672},"/documentation/reference/forms/input-number","BaseInputNumber","An input dedicated to numeric data. Explore the available options.",[669],{"src":673,"srcDark":673},"/img/illustrations/components/input-icon.svg",{"_path":675,"title":676,"description":677,"components":678,"icon":679},"/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.",[676],{"src":673,"srcDark":673},{"_path":681,"title":682,"description":683,"components":684,"icon":686},"/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.",[682,685],"BaseListboxItem",{"src":687,"srcDark":687},"/img/illustrations/components/listbox-icon.svg",{"_path":689,"title":690,"description":691,"components":692,"icon":693},"/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.",[690],{"src":694,"srcDark":694},"/img/illustrations/components/radio-icon.svg",{"_path":696,"title":697,"description":698,"components":699,"icon":700},"/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.",[697],{"src":694,"srcDark":694},{"_path":702,"title":703,"description":704,"components":705,"icon":706},"/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.",[703],{"src":707,"srcDark":707},"/img/illustrations/components/select-icon.svg",{"_path":709,"title":710,"description":711,"components":712,"icon":715},"/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.",[713,714],"BaseSwitchThin","BaseSwitchBall",{"src":716,"srcDark":716},"/img/illustrations/components/switch-thin-icon.svg",{"_path":718,"title":719,"description":720,"components":721,"icon":722},"/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.",[719],{"src":723,"srcDark":723},"/img/illustrations/components/textarea-icon.svg",{"_path":725,"title":726,"description":727,"components":728,"icon":730},"/documentation/reference/forms/treeselect","BaseTreeSelect","Display data tree in collapsible items. Can be used to select node in tree.",[726,729],"BaseTreeSelectItem",{"src":723,"srcDark":723},{"_path":732,"title":733},"/documentation/reference/tairo/_dir","Tairo layer",{"_path":735,"title":736,"description":737,"components":738,"icon":739},"/documentation/reference/tairo/check-animated","TairoCheckAnimated","Tairo animated check icon can be used to show a checkmark animation when a user accomplishes an action.",[736],{"src":636,"srcDark":636},{"_path":741,"title":742,"description":743,"components":744,"icon":746},"/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.",[742,745],"TairoContentWrapperTabbed",{"src":416,"srcDark":416},{"_path":748,"title":749,"description":750,"components":751,"icon":752},"/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.",[749],{"src":486,"srcDark":486},{"_path":754,"title":755,"description":756,"components":757,"icon":761},"/documentation/reference/tairo/flex-table","TairoFlexTable","Flex tables are an alternative way to display tabular data. They behave responsively on smaller screens.",[755,758,759,760],"TairoFlexTableHeading","TairoFlexTableRow","TairoFlexTableCell",{"src":762,"srcDark":762},"/img/illustrations/components/table-icon.svg",{"_path":764,"title":765,"description":766,"components":767,"icon":768},"/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.",[765],{"src":486,"srcDark":486},{"_path":770,"title":771,"description":772,"components":773,"icon":774},"/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.",[771],{"src":493,"srcDark":493},{"_path":776,"title":777,"description":778,"components":779,"icon":781},"/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.",[777,780],"TairoLogoText",{"src":416,"srcDark":416},{"_path":783,"title":784,"description":785,"components":786,"icon":787},"/documentation/reference/tairo/modal","TairoModal","Modals are popups that you can use to force an interaction before the user can continue using the application.",[784],{"src":788,"srcDark":788},"/img/illustrations/components/modal-icon.svg",{"_path":790,"title":791,"description":792,"components":793,"icon":797},"/documentation/reference/tairo/popover","TairoPopover","A flexible popover that you can use to make simple text based popovers or more complex UI interactions.",[791,794,795,796],"TairoPopoverContentHelp","TairoPopoverContentDual","TairoPopoverContentMedia",{"src":798,"srcDark":798},"/img/illustrations/components/popover-icon.svg",{"_path":800,"title":801,"description":802,"components":803,"icon":804},"/documentation/reference/tairo/sidebar-tools","TairoSidebarTools","Tairo sidebar tools is a component that lets you reuse the main toolbar buttons anywhere in your app.",[801],{"src":493,"srcDark":493},{"_path":806,"title":807,"description":808,"components":809,"icon":813},"/documentation/reference/tairo/table","TairoTable","Tairo tables are a quick shortcut to render lists and collections using the native HTML5 table element.",[807,810,811,812],"TairoTableHeading","TairoTableRow","TairoTableCell",{"src":523,"srcDark":523},{"_path":241,"title":815,"description":816,"components":817,"icon":818},"TairoToaster","Tairo toasters are used to display notifications and messages to the user.",[815],{"src":819,"srcDark":819},"/img/illustrations/components/sidebar-icon.svg",{"_path":821,"title":822,"description":823,"components":824,"icon":826},"/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.",[822,825],"TairoTocAnchor",{"src":819,"srcDark":819},{"_path":828,"title":344},"/documentation/reference/sidebar/_dir",{"_path":830,"title":831,"description":832,"components":833,"icon":834},"/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.",[831,777],{"src":819,"srcDark":819},{"_path":836,"title":837,"description":838,"components":839,"icon":841},"/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.",[837,840],"TairoSidebarNavigationItem",{"src":819,"srcDark":819},{"_path":843,"title":844,"description":845,"components":846,"icon":852},"/documentation/reference/sidebar/subsidebar","TairoSubsidebar","The subsidebar works as a submenu element for the TairoSidebarNavigation component",[844,847,848,849,850,851],"TairoSubsidebarHeader","TairoSubsidebarMenu","TairoSubsidebarMenuCollapseLinks","TairoSubsidebarMenuDivider","TairoSubsidebarMenuLink",{"src":819,"srcDark":819},{"_path":854,"title":855,"description":856,"components":857,"icon":859},"/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.",[855,858],"TairoSidebarBurger",{"src":860,"srcDark":860},"/img/illustrations/components/anchor-icon.svg",{"_path":862,"title":863,"description":864,"components":865,"icon":866},"/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.",[863],{"src":860,"srcDark":860},{"_path":868,"title":373},"/documentation/reference/collapse/_dir",{"_path":870,"title":871,"description":872,"components":873,"icon":874},"/documentation/reference/collapse/layout","TairoCollapseLayout","The collapse layout focuses on a single sidebar with a list of menu links.",[871],{"src":819,"srcDark":819},{"_path":876,"title":877,"description":878,"components":879,"icon":881},"/documentation/reference/collapse/navigation","TairoCollapseNavigation","The collapse navigation focuses on a single sidebar with a list of menu links.",[877,880],"TairoCollapseNavigationCollapseLinks",{"src":819,"srcDark":819},{"_path":883,"title":884,"description":856,"components":885,"icon":887},"/documentation/reference/collapse/toolbar","TairoCollapseToolbar",[884,886],"TairoCollapseBurger",{"src":860,"srcDark":860},{"_path":889,"title":890,"description":864,"components":891,"icon":892},"/documentation/reference/collapse/circular-menu","TairoCollapseCircularMenu",[890],{"src":860,"srcDark":860},{"_path":894,"title":376},"/documentation/reference/topnav/_dir",{"_path":896,"title":897,"description":898,"components":899,"icon":900},"/documentation/reference/topnav/layout","TairoTopnavLayout","The Topnav layout focuses on a single top navbar with a list of menu links.",[897],{"src":451,"srcDark":451},{"_path":902,"title":903,"description":904,"components":905,"icon":906},"/documentation/reference/topnav/navigation","TairoTopnavNavigation","The Topnav navigation provides a slot for the header as well as a toolbar.",[903],{"src":451,"srcDark":451},{"_path":908,"title":909,"description":864,"components":910,"icon":911},"/documentation/reference/topnav/circular-menu","TairoTopnavCircularMenu",[909],{"src":860,"srcDark":860},{"_path":913,"title":914,"description":915,"components":916,"icon":917},"/documentation/reference/topnav/footer","TairoTopnavFooter","Tairo's top nav footer is a minimal footer that you can include to provide additional navigation links.",[914],{"src":860,"srcDark":860},{"_path":919,"title":379},"/documentation/reference/iconnav/_dir",{"_path":921,"title":922,"description":923,"components":924,"icon":925},"/documentation/reference/iconnav/layout","TairoIconnavLayout","The Iconnav layout focuses on a double top navbar with a list of menu links.",[922],{"src":451,"srcDark":451},{"_path":927,"title":928,"description":929,"components":930,"icon":931},"/documentation/reference/iconnav/navigation","TairoIconnavNavigation","The Iconnav navigation provides a slot for the header as well as a toolbar.",[928],{"src":451,"srcDark":451},{"_path":933,"title":934,"description":864,"components":935,"icon":936},"/documentation/reference/iconnav/circular-menu","TairoIconnavCircularMenu",[934],{"src":860,"srcDark":860},{"_path":938,"title":939,"description":915,"components":940,"icon":941},"/documentation/reference/iconnav/footer","TairoIconnavFooter",[939],{"src":860,"srcDark":860},{"_path":943,"title":944},"/documentation/reference/advanced/_dir","Advanced",{"_path":946,"title":947,"description":948,"components":949,"icon":950},"/documentation/reference/advanced/input-password","AddonInputPassword","Secure password input field with password visibility toggle.",[947],{"src":951,"srcDark":951},"/img/illustrations/components/markdown-icon.svg",{"_path":953,"title":954,"description":955,"components":956,"icon":957},"/documentation/reference/advanced/input-phone","AddonInputPhone","International phone number input field with country code dropdown.",[954],{"src":951,"srcDark":951},{"_path":959,"title":960,"description":961,"components":962,"icon":963},"/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.",[960],{"src":951,"srcDark":951},{"_path":965,"title":966},"/documentation/reference/integration/_dir","Integration",{"_path":968,"title":969,"description":970,"components":971,"icon":973},"/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.",[972],"AddonApexcharts",{"src":974,"srcDark":974},"/img/illustrations/components/apexcharts-icon.svg",{"_path":976,"title":977,"description":978,"components":979,"icon":982},"/documentation/reference/integration/carousel","Carousel","Tairo ships with the swiper module for Nuxt. Use the component to display fancy and highly customizable carousels.",[980,981],"AddonCarouselTeam","AddonCarouselIcons",{"src":983,"srcDark":983},"/img/illustrations/components/carousel-icon.svg",{"_path":985,"title":986,"description":10,"components":987},"/documentation/reference/integration/icons","Icons",[988],"Icon",{"_path":990,"title":991,"description":992,"components":993,"icon":995},"/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.",[994],"AddonMapboxPanel",{"src":996,"srcDark":996},"/img/illustrations/components/map-icon.svg",{"_path":998,"title":999,"description":1000,"icon":1001},"/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":458,"srcDark":458},1779173523415]