Configuration

app.config.ts and runtimeConfig reference for xlayer-ui.

Configuration

app.config.ts

export default defineAppConfig({
  xUI: {
    fonts: {
      display: 'Mona Sans',
      body: 'Mona Sans',
      mono: 'Hubot Sans',
    },
    typography: {
      display: { size: '3.75rem', leading: '1', tracking: '-0.025em', weight: '800' },
      headline: { size: '2.25rem', leading: '1.1', tracking: '-0.02em', weight: '700' },
      title: { size: '1.5rem', leading: '1.25', tracking: '-0.01em', weight: '600' },
      body: { size: '1rem', leading: '1.625', tracking: '0', weight: '400' },
      small: { size: '0.875rem', leading: '1.5', tracking: '0', weight: '400' },
      caption: { size: '0.75rem', leading: '1.5', tracking: '0.01em', weight: '400' },
    },
    spacing: {
      xs: '0.25rem',
      sm: '0.5rem',
      md: '1rem',
      lg: '1.5rem',
      xl: '2rem',
      '2xl': '3rem',
      '3xl': '4rem',
    },
    radius: {
      sm: '0.375rem',
      md: '0.5rem',
      lg: '0.75rem',
      xl: '1rem',
      full: '9999px',
    },
    duration: {
      instant: '100ms',
      fast: '150ms',
      normal: '250ms',
      slow: '400ms',
      slower: '700ms',
    },
  },
})

Schema Reference

Key	Type	Default	Description
`fonts.display`	`string`	`'Mona Sans'`	Display font family name. Maps to `--x-font-display`.
`fonts.body`	`string`	`'Mona Sans'`	Body font family name. Maps to `--x-font-body`.
`fonts.mono`	`string`	`'Hubot Sans'`	Monospace font family name. Maps to `--x-font-mono`.
`typography.display.size`	`string`	`'3.75rem'`	Display scale font size.
`typography.display.leading`	`string`	`'1'`	Display scale line height.
`typography.display.tracking`	`string`	`'-0.025em'`	Display scale letter spacing.
`typography.display.weight`	`string`	`'800'`	Display scale font weight.
`typography.headline.size`	`string`	`'2.25rem'`	Headline scale font size.
`typography.headline.leading`	`string`	`'1.1'`	Headline scale line height.
`typography.headline.tracking`	`string`	`'-0.02em'`	Headline scale letter spacing.
`typography.headline.weight`	`string`	`'700'`	Headline scale font weight.
`typography.title.size`	`string`	`'1.5rem'`	Title scale font size.
`typography.title.leading`	`string`	`'1.25'`	Title scale line height.
`typography.title.tracking`	`string`	`'-0.01em'`	Title scale letter spacing.
`typography.title.weight`	`string`	`'600'`	Title scale font weight.
`typography.body.size`	`string`	`'1rem'`	Body scale font size.
`typography.body.leading`	`string`	`'1.625'`	Body scale line height.
`typography.small.size`	`string`	`'0.875rem'`	Small text font size.
`typography.caption.size`	`string`	`'0.75rem'`	Caption text font size.
`spacing.xs`	`string`	`'0.25rem'`	Extra-small spacing token. Maps to `--x-space-xs`.
`spacing.sm`	`string`	`'0.5rem'`	Small spacing token. Maps to `--x-space-sm`.
`spacing.md`	`string`	`'1rem'`	Medium spacing token. Maps to `--x-space-md`.
`spacing.lg`	`string`	`'1.5rem'`	Large spacing token. Maps to `--x-space-lg`.
`spacing.xl`	`string`	`'2rem'`	Extra-large spacing token. Maps to `--x-space-xl`.
`spacing.2xl`	`string`	`'3rem'`	2x extra-large spacing token. Maps to `--x-space-2xl`.
`spacing.3xl`	`string`	`'4rem'`	3x extra-large spacing token. Maps to `--x-space-3xl`.
`radius.sm`	`string`	`'0.375rem'`	Small border radius. Maps to `--x-radius-sm`.
`radius.md`	`string`	`'0.5rem'`	Medium border radius. Maps to `--x-radius-md`.
`radius.lg`	`string`	`'0.75rem'`	Large border radius. Maps to `--x-radius-lg`.
`radius.xl`	`string`	`'1rem'`	Extra-large border radius. Maps to `--x-radius-xl`.
`radius.full`	`string`	`'9999px'`	Full (pill) border radius. Maps to `--x-radius-full`.
`duration.instant`	`string`	`'100ms'`	Instant animation duration. Maps to `--x-duration-instant`.
`duration.fast`	`string`	`'150ms'`	Fast animation duration. Maps to `--x-duration-fast`.
`duration.normal`	`string`	`'250ms'`	Normal animation duration. Maps to `--x-duration-normal`.
`duration.slow`	`string`	`'400ms'`	Slow animation duration. Maps to `--x-duration-slow`.
`duration.slower`	`string`	`'700ms'`	Slower animation duration. Maps to `--x-duration-slower`.

Runtime Config / Environment Variables

None required.

AI Context

package: "xlayer-ui"
config-key: xUI

Edit this pageorReport an issue

useXUI

Runtime access to design tokens from app.config.ts — fonts, typography, spacing, border radius, and animation durations.

nuxt-x-app-admin

Nuxt layer for admin portals — user management, Stripe billing, content, support ticketing, AI assistants, roles, tenants, audit logs, and impersonation. Extends nuxt-x-app.