juxt.ui

Getting started

Installation

Add juxt.ui to a Nuxt or Vue 3 project. It takes about a minute.

Install the package #

Copy
npm install @juxtui/ui

juxt.ui requires Vue 3.5 or newer. With Nuxt, version 3.15 or newer — Nuxt 4 is recommended.

Nuxt #

Add the module. Every component and composable is auto-imported, and the stylesheet is included for you.

nuxt.config.ts
Copy
export default defineNuxtConfig({
  modules: ['@juxtui/ui/nuxt'],
})

Place a toaster once, near the root of your app, if you plan to use toasts:

app.vue
Copy
<template>
  <NuxtPage />
  <JToaster />
</template>

The module accepts a single option:

nuxt.config.ts
Copy
export default defineNuxtConfig({
  modules: ['@juxtui/ui/nuxt'],
  juxt: {
    // Set to false if you import the stylesheet yourself.
    css: true,
  },
})

Vue #

Import the stylesheet once, then import components where you use them. Unused components are tree-shaken.

main.ts
Copy
import { createApp } from 'vue'
import '@juxtui/ui/style.css'
import App from './App.vue'

createApp(App).mount('#app')
App.vue
Copy
<script setup lang="ts">
import { JButton, toast } from '@juxtui/ui'
</script>

<template>
  <JButton @click="toast.success('Saved')">Save changes</JButton>
</template>

Prefer global registration? Use the plugin — at the cost of tree-shaking:

main.ts
Copy
import { JuxtUI } from '@juxtui/ui'

createApp(App).use(JuxtUI).mount('#app')

Fonts #

juxt.ui is designed around Inter and JetBrains Mono and falls back to the system stack when they aren’t present. To match the reference look exactly, install them locally:

Copy
npm install @fontsource-variable/inter @fontsource-variable/jetbrains-mono
main.css
Copy
@import '@fontsource-variable/inter';
@import '@fontsource-variable/jetbrains-mono';

Tailwind CSS (optional) #

juxt.ui doesn’t need Tailwind. If you use Tailwind v4, import the theme bridge and your utilities will speak in juxt.ui tokens — bg-surface, text-fg-muted, border-border, rounded-md, duration-fast — and dark: will follow juxt.ui’s theme class.

main.css
Copy
@import 'tailwindcss';
@import '@juxtui/ui/tailwind.css';

Dark mode #

Add the dark class (or data-theme="dark") to <html>. See Theming for a flash-free setup.