vue-tailwind-components

SETUP

# Install Deps
npm ci

# View isolated components
npm run storybook

ELEMENTS:

Button

View Code | View Examples

<t-button>Button</t-button>

Icon

View Code | View Examples

<t-icon value="cog" />

Card

View Code | View Examples

<t-card>Card Content</t-card>

Menu (Dropdown)

View Code | View Examples

<t-menu :items="items" label="My Dropdown" />

Tabs

View Code | View Examples

<t-tabs v-model="tabs" :items="items" >
    <template slot="tab1">
        This is tab 1 content with cards
    </template>
</t-tabs>

Modals

View Code | View Examples

<t-modal :show="showing" @end="showing = false">
    Modal content here....
</t-modal>

FORMS:

Select

View Code | View Examples

Options can be Array of objects or an Array of values.

<t-select 
    v-model="value" 
    label="My Select" 
    :options="options" 
    placeholder="Select One" 
/>

Text Field

View Code | View Examples

<t-text-field v-model="value" label="First Name" placeholder="First Name" required />

Checkbox

View Code | View Examples

<t-checkbox v-model="value" label="My Checkbox" />