@nficano/inkwell

A Nuxt UI v3 theme layer — semantic palette, design tokens, fonts, and a library of Ink* components built on top of @nuxt/ui and @nuxt/ui-pro.

Inkwell ships as a Nuxt layer, so consuming it is a single extends line.

Install

pnpm add @nficano/inkwell @nuxt/ui @nuxt/ui-pro
# or
npm install @nficano/inkwell @nuxt/ui @nuxt/ui-pro

@nuxt/ui, @nuxt/ui-pro, nuxt, and vue are peer dependencies — you control the versions.

Use

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@nficano/inkwell'],
  modules: ['@nuxt/ui-pro'],
})

That's it. Extending the layer gives you:

• The Inkwell CSS pipeline (Tailwind v4 + Nuxt UI + tokens + bridge + component CSS).
• The inkwell-day / inkwell-night theme classes (scoped, not tied to a global html class — you can nest themes).
• Inter, JetBrains Mono, and Newsreader via @nuxt/fonts.
• All Ink* components auto-imported (<InkButton>, <InkChatPrompt>, <InkPricingTable>, etc.).

Switching themes

Toggle the active theme by setting a class on any wrapping element:

<template>
  <div class="inkwell-day">
    <!-- light theme scope -->
  </div>
  <div class="inkwell-night">
    <!-- dark theme scope -->
  </div>
</template>

Non-Nuxt usage

If you're using Vite + Vue (no Nuxt), import the CSS directly and use components from the explicit exports:

import '@nficano/inkwell/css'
import { InkButton } from '@nficano/inkwell/components'

Note: in this mode you're responsible for wiring up Nuxt UI's own setup, and app.config.ts overrides won't apply.

Exports

| Path | What it is | |---|---| | @nficano/inkwell | Components + patterns (named exports) | | @nficano/inkwell/components | Components only | | @nficano/inkwell/patterns | Layout/page patterns | | @nficano/inkwell/css | Full CSS bundle | | @nficano/inkwell/app.config | Nuxt UI app.config overrides | | @nficano/inkwell/nuxt.config | Layer nuxt.config |

Requirements

• Node 18+
• Nuxt 4
• @nuxt/ui ^3 and @nuxt/ui-pro ^3
• Tailwind v4 (set up by Nuxt UI)

License

MIT