https://github.com/tailwindlabs/tailwindui-vue

Deprecated, please use the Headless UI repo instead.
https://github.com/tailwindlabs/tailwindui-vue

Last synced: about 2 months ago
JSON representation

Deprecated, please use the Headless UI repo instead.

• Host: GitHub
• URL: https://github.com/tailwindlabs/tailwindui-vue
• Owner: tailwindlabs
• Archived: true
• Created: 2020-05-29T17:04:32.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-02T21:51:16.000Z (almost 4 years ago)
• Last Synced: 2024-06-03T02:36:16.768Z (4 months ago)
• Language: JavaScript
• Homepage: https://github.com/tailwindlabs/headlessui/
• Size: 10.7 KB
• Stars: 648
• Watchers: 60
• Forks: 29
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  
⚠️ Deprecated: use Headless UI instead ⚠️


---

# @tailwindui/vue

**This project is still in a pre-alpha state and could change dramatically at any time. Not for production.**

A set of completely unstyled, fully accessible UI components for Vue.js, designed to integrate beautifully with Tailwind CSS.

You bring the styles and the markup, we handle all of the complex keyboard interactions and ARIA management.

## Installation

```sh

# npm

npm install @tailwindui/vue

# Yarn

yarn add @tailwindui/vue

```

## Usage

### Listbox

Basic example:

```html

  

    

      Select a wrestler:

    

    

      {{ selectedWrestler }}

    

    

      

        


          {{ wrestler }}

          

        

      

    

  


  import {

    Listbox,

    ListboxLabel,

    ListboxButton,

    ListboxList,

    ListboxOption,

  } from "@tailwindui/vue";

  export default {

    components: {

      Listbox,

      ListboxLabel,

      ListboxButton,

      ListboxList,

      ListboxOption,

    },

    data() {

      return {

        selectedWrestler: "The Ultimate Warrior",

        wrestlers: [

          "The Ultimate Warrior",

          "Randy Savage",

          "Hulk Hogan",

          "Bret Hart",

          "The Undertaker",

          "Mr. Perfect",

          "Ted DiBiase",

          "Bam Bam Bigelow",

          "Yokozuna",

        ],

      };

    },

  };

```