{"id":13516508,"url":"https://github.com/tailwindlabs/tailwindui-vue","last_synced_at":"2025-09-30T15:30:44.228Z","repository":{"id":65977893,"uuid":"267911946","full_name":"tailwindlabs/tailwindui-vue","owner":"tailwindlabs","description":"Deprecated, please use the Headless UI repo instead.","archived":true,"fork":false,"pushed_at":"2020-10-02T21:51:16.000Z","size":11,"stargazers_count":648,"open_issues_count":0,"forks_count":28,"subscribers_count":59,"default_branch":"master","last_synced_at":"2025-01-19T20:04:16.352Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/tailwindlabs/headlessui/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tailwindlabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-29T17:04:32.000Z","updated_at":"2024-12-07T03:53:41.000Z","dependencies_parsed_at":"2023-02-19T19:15:46.586Z","dependency_job_id":null,"html_url":"https://github.com/tailwindlabs/tailwindui-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindui-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindui-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindui-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindui-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tailwindlabs","download_url":"https://codeload.github.com/tailwindlabs/tailwindui-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234747656,"owners_count":18880477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T05:01:22.878Z","updated_at":"2025-09-30T15:30:38.899Z","avatar_url":"https://github.com/tailwindlabs.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003e⚠️ Deprecated: use \u003ca href=\"https://github.com/tailwindlabs/headlessui/\"\u003eHeadless UI\u003c/a\u003e instead ⚠️\u003c/h1\u003e\n\u003c/p\u003e\n\n---\n\n# @tailwindui/vue\n\n**This project is still in a pre-alpha state and could change dramatically at any time. Not for production.**\n\nA set of completely unstyled, fully accessible UI components for Vue.js, designed to integrate beautifully with Tailwind CSS.\n\nYou bring the styles and the markup, we handle all of the complex keyboard interactions and ARIA management.\n\n## Installation\n\n```sh\n# npm\nnpm install @tailwindui/vue\n\n# Yarn\nyarn add @tailwindui/vue\n```\n\n## Usage\n\n### Listbox\n\nBasic example:\n\n```html\n\u003ctemplate\u003e\n  \u003cListbox v-model=\"selectedWrestler\" v-slot=\"{ isOpen }\"\u003e\n    \u003cListboxLabel class=\"sr-only\"\u003e\n      Select a wrestler:\n    \u003c/ListboxLabel\u003e\n    \u003cListboxButton class=\"rounded p-3 border\"\u003e\n      {{ selectedWrestler }}\n    \u003c/ListboxButton\u003e\n    \u003cListboxList v-show=\"isOpen\"\u003e\n      \u003cListboxOption\n        v-for=\"wrestler in wrestlers\"\n        :key=\"wrestler\"\n        :value=\"wrestler\"\n        v-slot=\"{ isActive, isSelected }\"\n      \u003e\n        \u003cdiv\n          class=\"p-3\"\n          :class=\"isActive ? 'bg-blue-600 text-white' : 'bg-white text-gray-900'\"\n        \u003e\n          {{ wrestler }}\n          \u003cimg v-show=\"isSelected\" src=\"/checkmark.svg\" /\u003e\n        \u003c/div\u003e\n      \u003c/ListboxOption\u003e\n    \u003c/ListboxList\u003e\n  \u003c/Listbox\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import {\n    Listbox,\n    ListboxLabel,\n    ListboxButton,\n    ListboxList,\n    ListboxOption,\n  } from \"@tailwindui/vue\";\n\n  export default {\n    components: {\n      Listbox,\n      ListboxLabel,\n      ListboxButton,\n      ListboxList,\n      ListboxOption,\n    },\n    data() {\n      return {\n        selectedWrestler: \"The Ultimate Warrior\",\n        wrestlers: [\n          \"The Ultimate Warrior\",\n          \"Randy Savage\",\n          \"Hulk Hogan\",\n          \"Bret Hart\",\n          \"The Undertaker\",\n          \"Mr. Perfect\",\n          \"Ted DiBiase\",\n          \"Bam Bam Bigelow\",\n          \"Yokozuna\",\n        ],\n      };\n    },\n  };\n\u003c/script\u003e\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailwindlabs%2Ftailwindui-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftailwindlabs%2Ftailwindui-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailwindlabs%2Ftailwindui-vue/lists"}