@vibe-labs/design-vue-core

Vue 3 core primitives for the Vibe Design System. Foundational building blocks — panels, links, labels, dividers, overflow layout, and accessibility helpers.

Installation

import { VibePanel, VibeLink, VibeLabel, VibeDivider, VibeHidden, VibeOverflowRow } from "@vibe-labs/design-vue-core";

Requires the CSS layer from @vibe-labs/design-components-core.

Components

VibePanel

Content container with variant styles and padding presets. Renders as a <div> by default.

Usage

vue

<!-- Basic -->
<VibePanel>Content here</VibePanel>

<!-- Variants -->
<VibePanel variant="default">Solid background</VibePanel>
<VibePanel variant="outlined">With border</VibePanel>
<VibePanel variant="raised">With shadow</VibePanel>
<VibePanel variant="ghost">Transparent background</VibePanel>

<!-- Padding sizes -->
<VibePanel size="sm">Tight padding</VibePanel>
<VibePanel size="md">Default padding</VibePanel>
<VibePanel size="lg">Spacious padding</VibePanel>
<VibePanel size="xl">Extra spacious</VibePanel>

<!-- Flush (no padding) -->
<VibePanel flush>No padding</VibePanel>

<!-- As a section element -->
<VibePanel section aria-label="User profile">
  Renders as section
</VibePanel>

<!-- Custom element -->
<VibePanel as="article">Renders as article</VibePanel>

<!-- Composing -->
<VibePanel variant="outlined" flush>
  <VibePanel size="md">Header area</VibePanel>
  <VibeDivider />
  <VibePanel size="md">Body area</VibePanel>
</VibePanel>

Props

Prop	Type	Default	Description
`variant`	`PanelVariant`	`"default"`	default · outlined · raised · ghost
`size`	`PanelSize`	`"md"`	sm · md · lg · xl (padding preset)
`flush`	`boolean`	`false`	Remove all padding
`as`	`string \| Component`	`"div"`	Rendered element/component
`section`	`boolean`	`false`	Render as `<section>`

VibeLink

Polymorphic link that resolves to <a>, <router-link>, or a custom element. Auto-detects external URLs.

Usage

vue

<!-- Basic anchor -->
<VibeLink href="/about">About</VibeLink>

<!-- Router link -->
<VibeLink :to="{ name: 'Dashboard' }">Dashboard</VibeLink>
<VibeLink to="/settings">Settings</VibeLink>

<!-- External (auto-detected from https://) -->
<VibeLink href="https://example.com">Example</VibeLink>
<!-- Renders: <a href="..." target="_blank" rel="noopener noreferrer"> -->

<!-- Force external -->
<VibeLink href="/api/download" external>Download</VibeLink>

<!-- Variants -->
<VibeLink href="/about" variant="accent">Accent (default)</VibeLink>
<VibeLink href="/about" variant="muted">Muted</VibeLink>
<VibeLink href="/about" variant="inherit">Inherits parent color</VibeLink>

<!-- Active state -->
<VibeLink href="/dashboard" active>Dashboard</VibeLink>

<!-- Disabled -->
<VibeLink href="/locked" disabled>Locked</VibeLink>

<!-- Custom element -->
<VibeLink :as="NuxtLink" to="/page">Nuxt Link</VibeLink>

Props

Prop	Type	Default	Description
`href`	`string`	—	URL for native anchor
`to`	`string \| object`	—	Vue Router route (renders `<router-link>`)
`as`	`string \| Component`	auto	Override element/component
`variant`	`LinkVariant`	`"accent"`	accent · muted · inherit
`external`	`boolean`	auto	Open in new tab with `rel="noopener noreferrer"`
`active`	`boolean`	`false`	Active/current page state
`disabled`	`boolean`	`false`	Disabled state

Resolution Order

If as is provided → use that
If disabled → renders <span> with aria-disabled
If to is provided → resolves <RouterLink> (falls back to <a>)
Otherwise → <a>

External links (https://, //) automatically get target="_blank" and rel="noopener noreferrer".

VibeLabel

Styled label with required indicator support.

Usage

vue

<!-- Basic -->
<VibeLabel for="email">Email address</VibeLabel>

<!-- With required asterisk -->
<VibeLabel for="name" required>Full name</VibeLabel>

<!-- Sizes -->
<VibeLabel for="input" size="sm">Small label</VibeLabel>
<VibeLabel for="input" size="lg">Large label</VibeLabel>

<!-- Disabled -->
<VibeLabel for="locked" disabled>Locked field</VibeLabel>

<!-- Wrapping an input (no for needed) -->
<VibeLabel required>
  Email
  <VibeInput v-model="email" />
</VibeLabel>

Props

Prop	Type	Default	Description
`for`	`string`	—	Associated input ID
`size`	`LabelSize`	`"md"`	sm · md · lg
`required`	`boolean`	`false`	Show required asterisk
`disabled`	`boolean`	`false`	Disabled styling

VibeDivider

Horizontal or vertical separator with optional label.

Usage

vue

<!-- Horizontal (default) -->
<VibeDivider />

<!-- Vertical (in a flex row) -->
<div style="display: flex; align-items: center">
  <span>Left</span>
  <VibeDivider orientation="vertical" />
  <span>Right</span>
</div>

<!-- With label -->
<VibeDivider>or</VibeDivider>
<VibeDivider>Section title</VibeDivider>

Props

Prop	Type	Default	Description
`orientation`	`DividerOrientation`	`"horizontal"`	horizontal · vertical
`ariaLabel`	`string`	—	Accessible label

Slots

Slot	Description
`default`	Label text (creates a labelled divider with lines on either side)

VibeOverflowRow

Generic overflow-aware horizontal row. Measures child widths via an offscreen clone and shows only as many items as fit, with a "+N" overflow indicator. Content-agnostic — works with badges, avatars, tags, or any inline element.

Usage

vue

<!-- Basic: badge overflow -->
<VibeOverflowRow :items="genres">
  <template #item="{ item }">
    <VibeBadge :label="item.name" auto-color />
  </template>
</VibeOverflowRow>

<!-- Custom overflow indicator -->
<VibeOverflowRow :items="tags" :gap="4">
  <template #item="{ item }">
    <VibeBadge :label="item.label" variant="outline" size="sm" />
  </template>
  <template #overflow="{ hiddenCount }">
    <VibeBadge :label="`+${hiddenCount} more`" variant="accent-subtle" size="sm" />
  </template>
</VibeOverflowRow>

<!-- Overlapping avatars -->
<VibeOverflowRow :items="users" :gap="-8">
  <template #item="{ item }">
    <VibeAvatar :src="item.avatar" :name="item.name" size="sm" />
  </template>
  <template #overflow="{ hiddenCount }">
    <VibeAvatar :label="`+${hiddenCount}`" size="sm" />
  </template>
</VibeOverflowRow>

Props

Prop	Type	Default	Description
`items`	`T extends { id: string \| number }[]`	—	Items to render. Each must have a unique `id`.
`gap`	`number`	`8`	Gap between items in px

Slots

Slot	Props	Description
`item`	`{ item: T, index: number }`	Render each visible item. Must be a single root element.
`overflow`	`{ hiddenCount: number }`	Overflow indicator (default: `+N` text span)

Notes

Uses ResizeObserver to re-measure on container or content resize.
The #item slot must render a single root element per item for accurate width measurement.
Negative gap values work for overlapping layouts (e.g. stacked avatars).

VibeHidden

Screen-reader-only content wrapper. Visually hidden but accessible to assistive technology.

Usage

vue

<!-- Basic (visually hidden text) -->
<VibeHidden>This text is only visible to screen readers</VibeHidden>

<!-- Skip link (visible on focus) -->
<VibeHidden focusable as="a" href="#main-content">
  Skip to main content
</VibeHidden>

<!-- Accessible icon button label -->
<button>
  <SearchIcon />
  <VibeHidden>Search</VibeHidden>
</button>

Props

Prop	Type	Default	Description
`focusable`	`boolean`	`false`	Become visible on focus (for skip links)
`as`	`string`	`"span"`	Rendered element

Dependencies

Package	Purpose
`@vibe-labs/design-components-core`	CSS tokens + generated styles

Build

bash

npm run build

Built with Vite + vite-plugin-dts. Outputs ES module with TypeScript declarations.

Usage Guide

Setup

import { VibePanel, VibeLink, VibeLabel, VibeDivider, VibeHidden, VibeOverflowRow } from "@vibe-labs/design-vue-core";
import "@vibe-labs/design-components-core";

VibePanel

Composing layout panels

vue

<script setup lang="ts">
import { VibePanel } from "@vibe-labs/design-vue-core";
import { VibeDivider } from "@vibe-labs/design-vue-core";
</script>

<template>
  <!-- Outlined container with internal sections -->
  <VibePanel variant="outlined" flush>
    <VibePanel size="md">
      <h3>Section Header</h3>
    </VibePanel>
    <VibeDivider />
    <VibePanel size="md">
      <p>Main content area</p>
    </VibePanel>
  </VibePanel>
</template>

VibeLink

vue

<script setup lang="ts">
import { VibeLink } from "@vibe-labs/design-vue-core";
import { RouterLink } from "vue-router";

defineProps<{ currentPath: string }>();
</script>

<template>
  <!-- Internal router link -->
  <VibeLink :to="{ name: 'Dashboard' }">Dashboard</VibeLink>

  <!-- External — auto-detects https:// and adds target="_blank" -->
  <VibeLink href="https://docs.example.com" variant="muted">Documentation</VibeLink>

  <!-- Active state for current route -->
  <VibeLink to="/profile" :active="currentPath === '/profile'">Profile</VibeLink>
</template>

VibeOverflowRow

Tag overflow with badges

vue

<script setup lang="ts">
import { VibeOverflowRow } from "@vibe-labs/design-vue-core";
import { VibeBadge } from "@vibe-labs/design-vue-badges";
import { ref } from "vue";

const tags = ref([
  { id: 1, label: "Electronic" },
  { id: 2, label: "Deep House" },
  { id: 3, label: "Minimal" },
  { id: 4, label: "Techno" },
  { id: 5, label: "Ambient" },
]);
</script>

<template>
  <VibeOverflowRow :items="tags" :gap="6">
    <template #item="{ item }">
      <VibeBadge :label="item.label" auto-color size="sm" />
    </template>
    <template #overflow="{ hiddenCount }">
      <VibeBadge :label="`+${hiddenCount} more`" variant="accent-subtle" size="sm" />
    </template>
  </VibeOverflowRow>
</template>

VibeDivider

Section separator and "or" divider

vue

<template>
  <VibePanel size="md">
    <p>Login with email</p>
    <VibeDivider>or</VibeDivider>
    <p>Continue with Google</p>
  </VibePanel>
</template>

VibeHidden

vue

<template>
  <!-- Screen-reader label on icon-only button -->
  <button>
    <SearchIcon aria-hidden="true" />
    <VibeHidden>Search</VibeHidden>
  </button>

  <!-- Skip navigation link (visible on focus) -->
  <VibeHidden focusable as="a" href="#main-content">
    Skip to main content
  </VibeHidden>
</template>

Common Patterns

Form field with label

vue

<script setup lang="ts">
import { VibeLabel } from "@vibe-labs/design-vue-core";
import { VibeInput } from "@vibe-labs/design-vue-inputs";
import { ref } from "vue";

const email = ref("");
</script>

<template>
  <div>
    <VibeLabel for="email-field" required>Email address</VibeLabel>
    <VibeInput id="email-field" v-model="email" type="email" />
  </div>
</template>

@vibe-labs/design-vue-core ​

Installation ​

Components ​

VibePanel ​

Usage ​

Props ​

VibeLink ​

Usage ​

Props ​

Resolution Order ​

VibeLabel ​

Usage ​

Props ​

VibeDivider ​

Usage ​

Props ​

Slots ​

VibeOverflowRow ​

Usage ​

Props ​

Slots ​

Notes ​

VibeHidden ​

Usage ​

Props ​

Dependencies ​

Build ​

Usage Guide ​

Setup ​

VibePanel ​

Composing layout panels ​

VibeLink ​

Navigation links ​

VibeOverflowRow ​

Tag overflow with badges ​

VibeDivider ​

Section separator and "or" divider ​

VibeHidden ​

Accessible icon button and skip link ​

Common Patterns ​

Form field with label ​

@vibe-labs/design-vue-core

Installation

Components

VibePanel

Usage

Props

VibeLink

Usage

Props

Resolution Order

VibeLabel

Usage

Props

VibeDivider

Usage

Props

Slots

VibeOverflowRow

Usage

Props

Slots

Notes

VibeHidden

Usage

Props

Dependencies

Build

Usage Guide

Setup

VibePanel

Composing layout panels

VibeLink

Navigation links

VibeOverflowRow

Tag overflow with badges

VibeDivider

Section separator and "or" divider

VibeHidden

Accessible icon button and skip link

Common Patterns

Form field with label