Kinetix & the Laravel starter kit

Kinetix is built for the official Laravel starter-kit stack — Inertia + Vue 3

• shadcn-vue (Reka UI). That's a deliberate choice: Kinetix and the starter kit share the exact same primitives, so they slot together instead of fighting.

The mental model is simple:

The starter kit owns authentication and the basic account.Kinetix owns the app-building toolkit — and the deltas the starter kit doesn't ship.

Kinetix is a complement, not a replacement. You almost never need to rip out a starter-kit feature to adopt Kinetix; you add Kinetix alongside it and only reach for a Kinetix module where the starter kit leaves a gap.

Who owns what

Area	Laravel starter kit	Kinetix	Recommendation
Login / register / password reset	✅	—	Starter kit. Kinetix doesn't touch auth.
Email verification, password confirmation	✅	—	Starter kit.
Two-factor authentication (2FA)	✅ (Fortify)	—	Starter kit. Kinetix intentionally ships no 2FA — it would duplicate Fortify with the same primitives.
Profile / password settings	✅	—	Starter kit.
Appearance (light/dark/system)	✅	—	Starter kit. Kinetix components honor the html.dark class it sets.
Delete account	✅ (basic)	✅ (GDPR: + export, anonymize, queue, audit)	Either — see GDPR overlap.
Data export ("download my data")	—	✅ (GDPR)	Kinetix. This is the gap the starter kit leaves.
Social login / OAuth (sign in with provider)	—	✅ (Connected Accounts)	Kinetix. The starter kit ships no OAuth at all — this is a complete feature, not a complement.
Link / unlink connected accounts	—	✅ (Connected Accounts)	Kinetix.
Set password for social-only users	—	✅ (Connected Accounts)	Kinetix.
Active sessions / device management	—	✅ (Browser Sessions)	Kinetix.
Resources, Tables, Forms, Infolists	—	✅	Kinetix. The core toolkit.
Notifications, Widgets, Spotlight, Activity	—	✅	Kinetix.
Roles & permissions, Membership, Impersonation	—	✅	Kinetix.
Billing, Webhooks, API tokens, Feature flags	—	✅	Kinetix.
Onboarding, Accessibility, Settings hub	—	✅	Kinetix.

✅ ships it · — not included · 🛣️ planned (see the roadmap).

How they sit together

A typical starter-kit app keeps its generated settings/* pages and simply mounts Kinetix panels next to them. For example, the starter kit's settings/Profile.vue keeps profile + password + 2FA + delete, and you add a sibling page (or a tab) that mounts Kinetix's Settings, API tokens, or GDPR export panels. Kinetix's Settings module is itself a host for arbitrary panels, so it's a natural place to compose both worlds.

Because both use shadcn-vue tokens, the Kinetix panels inherit your theme with no extra styling.

Mounting Kinetix inside the sidebar

The starter kit's AppSidebar.vue is a plain shadcn-vue <Sidebar>, so Kinetix components drop straight into its slots. One is built for exactly that: <KinetixOnboardingChecklist variant="sidebar"> — a condensed "Getting started" block that travels with the user across every page instead of living on one dashboard. The footer, above the user menu, is its natural home:

<SidebarFooter>
  <KinetixOnboardingChecklist variant="sidebar" />
  <NavUser />
</SidebarFooter>

It honors collapsible="icon" out of the box: the block carries shadcn's own group-data-[collapsible=icon]:hidden, so a collapsed rail drops it rather than squeezing it.

Wide tables & the min-w-0 layout fix

The starter kit's content area is a flex column, and a flex item defaults to min-width: auto — it refuses to shrink below its content. A wide Kinetix table (many columns) therefore grows that column and pushes the whole page, overflowing the viewport, instead of scrolling inside its own card.

Kinetix already does its part — the table card carries min-w-0 max-w-full and the scaffolded pages wrap in … min-w-0 …. The missing link is on the starter kit's content flex item, which ships without min-w-0.

Option A — one global CSS rule (most general, recommended)

shadcn-vue's SidebarInset always renders <main data-slot="sidebar-inset">, and data-slot is a stable contract. So a single rule fixes every sidebar layout — the starter kit's AppSidebarLayout, any shadcn "sidebar" block you paste in, your own variants — without touching a single component:

/* resources/css/app.css */
[data-slot='sidebar-inset'] {
    min-width: 0;
}

SidebarInset is flex flex-col, so its inner content column and the Kinetix card stretch to that now-shrinkable <main> and the table's own overflow-x-auto scrollbar takes over. Nothing else to change.

Option B — patch the layout components

If you prefer explicit classes over a global rule, add min-w-0 to the content wrappers directly:

• resources/js/components/ui/sidebar/SidebarInset.vue (sidebar layouts): 'bg-background relative flex w-full flex-1 flex-col' → add min-w-0.
• resources/js/components/AppContent.vue (the header layout's <main>): mx-auto flex h-full w-full max-w-7xl … → add min-w-0.

Any other layout

For a custom page that is not a shadcn sidebar (no data-slot), just give the flex column that holds the table min-w-0:

<div class="flex min-w-0 flex-1 flex-col gap-4 p-4">
    <KinetixTable :table="table" />
</div>

The overflow-x-hidden some layouts pass only clips at the page level; min-w-0 is what lets the column shrink so the table scrolls locally.

GDPR / account-deletion overlap

This is the one genuine overlap. The starter kit ships a simple Delete account action; Kinetix's GDPR module ships a superset — data export and account deletion / anonymization (queued, with a notification and audit trail). Pick one of two clean approaches so you never render two "Delete account" buttons:

Option A — split responsibilities (recommended)

Keep the starter kit's Delete account as-is, and use Kinetix for the export it doesn't have. Mount only the export side:

<script setup lang="ts">
import { useKinetixGdpr } from "@/composables/useKinetixGdpr";

const { exportData } = useKinetixGdpr();
</script>

<template>
  <!-- Add a "Download your data" action next to the starter kit's settings -->
  <button @click="exportData()">Download my data</button>
</template>

You get the missing export feature with zero duplication of the delete flow.

Option B — upgrade to the Kinetix flow

Replace the starter kit's delete section with the full Kinetix panel (export + anonymization + queue + audit). Remove the starter kit's Delete account block from settings/Profile.vue, then mount:

<script setup lang="ts">
import KinetixGdprPanel from "@/components/kinetix/KinetixGdprPanel.vue";
</script>

<template>
  <KinetixGdprPanel :require-password="true" />
</template>

Avoid double delete buttons. Whichever option you pick, make sure only one "Delete account" control is mounted — either the starter kit's or Kinetix's, never both.

Rule of thumb

• Auth, basic account settings, 2FA, appearance → leave to the starter kit.
• Everything that builds your actual application → reach for Kinetix.
• For the deletion/export overlap → choose Option A or B above.