TabShell

The phone frame the whole app sits inside.

Import it from rei-kit/app: import { TabShell } from 'rei-kit/app'

Open TabShell in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { TabShell } from 'rei-kit/app'
</script>

<template>
  <TabShell>
    <RouterView />

    <template #aside>
      <p>© 2026 My app</p>
    </template>
  </TabShell>
</template>

Props

This component takes no props.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub