@iankibetsh/sh-tailwind

@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/:

These guides ship in the npm package, so they always match the installed version: node_modules/@iankibetsh/sh-tailwind/documentation/. AI agents: start at llms.txt (also shipped), which indexes every guide.

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; file-based routing needs 5). 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>

Popups

<ShPopups />  <!-- once, in App.vue; register components via the plugin's `popups` option -->
<ShPopupLink comp="ViewTask" type="drawer" :props="{ id: task.id }">View</ShPopupLink>
<!-- or /tasks?popup=drawer&comp=ViewTask&id=5 -->

Actions

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

Coming from shframework

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