@happydesigns/ui

Reusable Nuxt layer for happydesigns websites, docs sites, and product apps.

The package provides shared Nuxt setup, Nuxt UI conventions, content collection schemas, public H* components, composables, variants, and app config conventions. Projects extend the layer and keep project-specific routes, content, branding, and deployment settings in the project that owns them.

npm · npmx · GitHub

Installation

pnpm add @happydesigns/ui @nuxt/ui tailwindcss

export default defineNuxtConfig({
  extends: ['@happydesigns/ui'],
  css: ['~/assets/css/main.css'],
})

Create the application's single Tailwind entry point:

@import "tailwindcss";
@import "@nuxt/ui";
@import "@happydesigns/ui/styles.css";

Do not register another stylesheet that imports Tailwind or Nuxt UI. Keeping one compilation context ensures that Nuxt UI's generated responsive and color-mode variants share the application's theme and source graph.

Run Nuxt preparation after changing dependencies or layer configuration:

pnpm exec nuxt prepare

Content collections

Applications using Nuxt Content extend @happydesigns/ui/content instead of @happydesigns/ui. This optional layer includes article/content layouts, HContentPage, HSnippet, content search, author lookup, navigation endpoints, and Nuxt Studio (disabled unless configured by the application).

export default defineNuxtConfig({
  extends: ['@happydesigns/ui/content'],
})

Migration from 0.19.x: change the layer entry point above if your application uses these features. The base entry point now registers only Nuxt UI and variants; Comark applications can keep it without initializing Nuxt Content or Studio. The dependencies remain installed for the optional layer, but are not activated by the base layer.

The layer exports reusable schema profiles, but it does not register collection names, sources, or route prefixes for an application. Define those locally in the consumer's content.config.ts:

import { collectionSchemas } from '@happydesigns/ui/schemas'
import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    news: defineCollection({
      type: 'page',
      source: 'news/**/*.md',
      schema: collectionSchemas.article,
    }),
    legal: defineCollection({
      type: 'page',
      source: 'legal/**/*.md',
      schema: collectionSchemas.content,
    }),
  },
})

This keeps the shared field model convenient while leaving collection names, file structure, routing, indexes, and additional project schemas under application control.

Development

pnpm install
pnpm prepare
pnpm dev
pnpm build

pnpm dev starts the playground app. pnpm build builds the playground.

Product Docs

The product docs live in docs/ and are built with Docus.

pnpm docs
pnpm docs:build

pnpm docs:build generates a static Docus build in docs/.output/public. Use pnpm docs:build:server only when the deployment target needs a server-capable Docus build for live MCP support.

The docs explain how to use the layer, content model, components, composables, variants, and configuration. Component props, slots, examples, variants, and collection tables are generated from the package source where possible.

Package Scope

This package owns reusable interface and content foundations. It does not own project copy, customer-specific routes, final brand assets, deployment settings, or product-specific domain behavior.

Use the product docs for usage guidance. Use the source files for implementation facts.