@uxfront/ui

Vue components for the uxfront.com family of homepages. With them, a product site gets the same look and feel as uxfront.com. That includes the scroll-driven WebGL scene of @uxfront/scene, chapters that step through their details as they scroll by, the HUD, the header, the finale and the error page.

In a Nuxt app, extend @uxfront/layer-ui instead of installing this package: the layer registers the components and composables, self-hosts the fonts and keeps the first paint free of scripts.

Install

pnpm add @uxfront/ui @uxfront/scene

The package ships Vue single-file components as source, so each component's styles compile with the app and can be inlined into the server-rendered HTML. It needs a Vite build with @vitejs/plugin-vue. Outside Nuxt (VitePress, plain Vite), let Vite compile it:

// vite.config.ts
export default defineConfig({
  optimizeDeps: { exclude: ["@uxfront/ui"] },
  ssr: { noExternal: ["@uxfront/ui"] },
});

A page

<script setup lang="ts">
import { corridor, ink, monolith } from "@uxfront/scene/formations";

// One formation per section: the hero, each chapter, the finale.
const scene = [
  monolith({ label: "Foundation" }),
  ink({ label: "Inkline" }),
  corridor({ label: "Build" }),
];
</script>

<template>
  <UxSite :scene="scene" skip-to="#inkline">
    <template #header>
      <UxHeader brand="Inkline" :nav="[{ href: '#inkline', label: 'Library', index: '01' }]" />
    </template>

    <UxHero kicker="Inkline" title="The UI library for every framework" scroll-href="#inkline">
      <template #lines>
        <UxHeroLine>The UI library</UxHeroLine>
        <UxHeroLine>for <em class="ux-serif">every</em> framework</UxHeroLine>
      </template>
      <template #lead>Perfectly designed components, in all seven frameworks.</template>
    </UxHero>

    <UxChapter
      id="inkline"
      index="01"
      role="Library"
      title="Inkline"
      href="https://inkline.io"
      :steps="2"
    >
      <template #lead>Built on the foundation.</template>
      <UxSpec
        :items="[
          { term: 'Built with', detail: 'Unframework' },
          { term: 'Ships to', detail: 'Seven frameworks' },
        ]"
      />
    </UxChapter>

    <UxFinale
      kicker="Inkline"
      :cards="[{ href: 'https://inkline.io', name: 'Inkline', meta: '01 · UI library' }]"
    >
      <template #title>Build on the <em class="ux-serif">foundation</em>.</template>
      <template #footer><span>© 2026 Inkline</span></template>
    </UxFinale>
  </UxSite>
</template>

apps/web/app/pages/index.vue is the full uxfront.com homepage.

Components

| Component | Role | | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | UxSite | The page root. Takes the scene (one formation per section), starts it on mount and brings the base styles. Slots: header, hud (defaults to UxHud), anchors, controls, fallback and the sections. | | UxHero | The first section: kicker (with an optional badge, like "New"), a title in UxHeroLines (with title for assistive technology), a lead, an index of sections for small screens and a scroll cue. | | UxChapter | A full-screen section: eyebrow (index, role), title, lead slot, details and a link. align="end" puts the copy on the right, valign="end" at the bottom, steps highlights details one by one. | | UxFinale | The closing section: a large mark slot, kicker, title, lead, an actions slot (buttons), a grid of link cards and a footer. | | UxPillars, UxChips, UxTraits, UxSpec | Chapter details that light up one after another (set steps on the chapter to their count). | | UxHeader | Brand (mark slot, UxFrontMark by default, empty for none; brand slot to style the name), a byline slot beside it for links like "by UXFront", section nav (marks the one held), an actions slot for extra links and a GitHub link (with an optional githubStars count). | | UxHud | Particle count and fps, the chapter counter and progress, and the Motion toggle. | | UxAnchor | A label pinned to a formation anchor, like plates:0: callout, tag or button (put buttons in the controls slot). | | UxPillLink, UxErrorPage, icons | The scrambled pill link, a full error page, and UxArrowIcon, UxGithubIcon, UxStarIcon, UxFrameworkLogo, UxFrontMark. |

Also exported: useExperience() (the scene's reactive state inside a UxSite), the v-scramble directive, FRAMEWORKS and their logos, and uxRenderHookKey.

Styles

Everything is scoped to pages that render a UxSite (or UxErrorPage), so the components can share an app with other pages. Tokens and the page base sit on :root:has(.ux-site). Utilities are prefixed (.ux-mono, .ux-serif, .ux-sr-only), and component styles are scoped.

The tokens are the shared look, so sites shouldn't need to change them. If one must, override it with the same selector:

:root:has(.ux-site) {
  --ux-fg: #f2f2f5;
  --ux-spectrum-0: #ff4a5a; /* …to 6: the prism's rails and the chips' tones */
}

Keep --ux-bg at #050507: the scene's canvas paints that colour itself.

The typefaces are Geist, Geist Mono and Instrument Serif (--font-ux-sans, --font-ux-mono, --font-ux-serif). Without Nuxt, load them yourself.