@iankibetsh/sh-tailwind

Vue 3 + Tailwind CSS v4 component library for Laravel backends, built on @iankibetsh/sh-core. The Tailwind twin of @iankibetsh/shframework (Bootstrap): schema-driven forms, a server-driven data table with an offline cache, Tailwind-native dialogs/drawers, tabs, and confirm/silent action buttons — zero runtime dependencies beyond its peers.

Documentation

Each module has its own guide under documentation/:

| Module | What it covers | |---|---| | Getting started | Install, Tailwind @source, the plugin | | Forms | ShForm — schema, type inference, validation, wizard | | Inputs & masks | Standalone inputs, money/pattern masks, PIN | | Table | ShTable — actions, columns, offline-first cache | | Tabs | ShTabs — slot / component / router modes | | Overlays | ShDialog / ShDrawer and trigger/form helpers | | Actions | ShConfirmAction / ShSilentAction | | Theming | The three override layers + full export list |

Install

npm i @iankibetsh/sh-tailwind @iankibetsh/sh-core pinia

Peers: @iankibetsh/sh-core@^1, vue@^3.5, pinia@^3, and vue-router@^4||^5 (optional). Register the plugin, then point Tailwind at the package — full steps in Getting started.

import { ShTailwind } from '@iankibetsh/sh-tailwind'
app.use(ShTailwind, { baseApiUrl: import.meta.env.VITE_APP_API_URL, authMode: 'bearer' })

Components at a glance

A small taste of each — follow the doc link for the full API.

Forms

<ShForm action="users" :fields="['name', 'email', { name: 'amount', mask: 'money' }]" success-message="Saved!" />

Inputs & masks

<MaskedInput v-model="amount" mask="money" />
<PinInput v-model="otp" :length="6" />

Table

<ShTable
    endpoint="users"
    :columns="['name', { name: 'amount', format: 'money' }]"
    :actions="[{ label: 'Edit', handler: row => (editing = row) }]"
    searchable cache
/>

Tabs

<ShTabs v-model:tab="active" :tabs="['overview', { key: 'activity', count: 12 }]" variant="pills">
    <template #tab-overview>…</template>
    <template #tab-activity>…</template>
</ShTabs>

Overlays

<ShDialog v-model:open="open" title="Edit user" size="lg">…</ShDialog>
<ShDrawer v-model:open="side" position="end" title="Filters">…</ShDrawer>

Actions

<ShConfirmAction url="users/9/suspend" title="Suspend user?" @success="reload">Suspend</ShConfirmAction>

Coming from shframework

| shframework (Bootstrap) | sh-tailwind | |---|---| | ShAutoForm + type arrays (textAreas, phones, …) | ShForm + field objects ({ name, type }) | | placeHolders / labels / helperTexts objects | per-field placeholder / label / helper | | fillSelects | options: { url } on the field | | ShTable (Bootstrap, prop-heavy) | ShTable — columns/actions objects + offline cache | | ShTabs + ShDynamicTabs | one ShTabs (slot / component / router modes) | | ShModal / ShModalBtn / ShModalForm | ShDialog / ShDialogBtn / ShDialogForm | | ShCanvas / ShCanvasBtn | ShDrawer / ShDrawerBtn | | shFormElementClasses injection | theme plugin option | | ShConfirmAction / ShSilentAction | same names, same events (+ legacy aliases) |

Both layer on the same @iankibetsh/sh-core, so auth, the API client, streamline and useUserStore behave identically — only the UI differs.