Primitive

Headless Primitive; covers Reka UI Primitive, Radix Slot, shadcn/ui Slot.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Primitive } from "@vizejs/ui/primitive";

Or copy the source into your project with vize lib pull primitive (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Polymorphic primitive rendered as a labelled section element. -->
<script setup lang="ts">
import { useId } from "vue";

import { Primitive } from "@vizejs/ui/primitive";

const headingId = useId();
</script>

<template>
  <Primitive as="section" :aria-labelledby="headingId">
    <h2 :id="headingId">Release notes</h2>
    <p>Version 2.4 adds keyboard shortcuts to the editor.</p>
  </Primitive>
</template>

API

Primitive

Source: src/families/foundations/primitive/primitive-element.vue

Props

Exposed

Behavior

Normative state × input → outcome table for primitive-element.vue (@vizejs/ui/primitive). Every row is proven by the named mounted-DOM test in src/families/foundations/primitive/primitive.test.ts.