Introduction

Most component libraries grow by adding. juxt.ui grows by finishing. There are 44 components, and each one has been tuned for keyboard use, screen readers, reduced motion, touch, light and dark — before anything new was allowed in.

What you get #

• 44 components — the building blocks of most product interfaces, from buttons to a command palette.
• A token system — colour, type, space, radius, elevation, motion and layers as CSS custom properties you can override.
• One motion language — four durations and three curves, used consistently, and respectful of reduced-motion preferences.
• Accessibility built in — focus trapping and restoration, WAI-ARIA keyboard patterns and layered Escape handling.
• A Nuxt module — auto-imports, SSR-safe ids and a single line of configuration.

A first look #

With the Nuxt module installed, components and toast are available everywhere without imports:

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <JButton @click="open = true">Save changes</JButton>

  <JDialog v-model:open="open" title="Save changes?">
    <template #footer="{ close }">
      <JButton variant="ghost" @click="close">Cancel</JButton>
      <JButton @click="close(); toast.success('Saved')">Save</JButton>
    </template>
  </JDialog>
</template>

Principles #

Quiet until it matters

The interface is grayscale. Green (#079D6B) is reserved for state: focus rings, checked controls, success, the active item. Because it’s rare, it means something when it appears.

Motion is feedback, not decoration

Everything that moves does so for a reason — to show where something came from, that an action registered, or what changed. Nothing animates for longer than a quarter of a second, and only transform and opacity are animated.

Small, predictable APIs

Props are named after what they do, defaults are the common case, and every component that holds state supports v-model. If you know one juxt.ui component, you know how the others behave.

Next steps #

Follow the installation guide, then browse the components — or press ⌘ K and jump straight to one.