Saltbox UI

A composable UI component library for Vue 3 applications. Small, focused primitives that compose into rich interfaces.

Components

Lists — SbList, SbListItem, SbListSection, SbListLabel, SbDetailRow, SbSectionedList

Tabs — SbTabs, SbTab, SbRouteTab

FAB — SbFab, SbFabAction

Data Display — SbProgressBar, SbStatCard, SbSectionHeader

Controls — SbResultsBar, SbLoadMore

Install

pnpm add @unio/saltbox-ui

Peer dependencies: vue >=3.5, @nuxt/ui >=4.0, tailwindcss >=4.0

Setup

Saltbox ships raw .vue source files that are compiled by your app's Vite pipeline. Two things to configure:

1. Nuxt UI Vite plugin — add scanPackages so Saltbox components get auto-import resolution for Nuxt UI components (UIcon, UButton, etc.):

// vite.config.ts
import ui from "@nuxt/ui/vite"

export default defineConfig({
  plugins: [
    ui({
      scanPackages: ["@unio/saltbox-ui"],
      // ...your other options
    }),
  ],
})

2. CSS — import Saltbox's styles so Tailwind scans its source files for utility classes:

/* application.css */
@import "tailwindcss";
@import "@nuxt/ui";
@import "@unio/saltbox-ui";

Usage

<script setup lang="ts">
import { SbList, SbListItem, SbListSection, SbListLabel } from "@unio/saltbox-ui"
</script>

<template>
  <SbList bordered separator>
    <SbListItem clickable>
      <SbListSection>
        <SbListLabel>Item title</SbListLabel>
        <SbListLabel caption>Supporting text</SbListLabel>
      </SbListSection>
    </SbListItem>
  </SbList>
</template>

Navigation

Components that navigate (SbRouteTab, SbFab, SbFabAction) use a pluggable navigator. Provide your router adapter at the app root:

import { SB_NAVIGATOR_KEY } from "@unio/saltbox-ui"

// Inertia.js
provide(SB_NAVIGATOR_KEY, {
  navigate: (url) => router.visit(url),
  currentUrl: computed(() => usePage().url),
})

// Vue Router
provide(SB_NAVIGATOR_KEY, {
  navigate: (url) => router.push(url),
  currentUrl: computed(() => route.path),
})

If no provider is given, navigation falls back to window.location.

License

MIT

Views and leading figures

SbViewSwitch wraps Nuxt UI tabs without panels for a same-page view choice. Pass items (label, value, optional count and disabled), a group label, and v-model. The host handles URL navigation on update. Counts are quiet numbers; Nuxt UI retains keyboard and selected-state behavior.

SbFigure takes label, a preformatted value, optional description and ui classes for the three text roles. It does no money or locale conversion. Compose figures inside SbFigureRow: one column on phones, two from sm, four from lg. Pass columns="3" for three columns from sm. It is unboxed; SbStatCard remains for centered card metrics.