Composables
useXUI
Runtime access to design tokens from app.config.ts — fonts, typography, spacing, border radius, and animation durations.
useXUI
Returns the xUI namespace from app.config.ts, giving JavaScript/TypeScript access to the same design tokens that are also exposed as CSS custom properties. Use it in components, composables, or scripts to read token values programmatically without hardcoding them. Consumer layers that override tokens in their own app.config.ts will see those overrides reflected here automatically.
Usage
<script setup>
const { fonts, typography, spacing, radius, duration } = useXUI()
</script>
Returns
| Key | Type | Description |
|---|---|---|
fonts.display | string | Display font family (default: Mona Sans). |
fonts.body | string | Body font family (default: Mona Sans). |
fonts.mono | string | Monospace font family (default: Hubot Sans). |
typography.display | object | Display scale tokens: { size, lineHeight, tracking, weight }. |
typography.headline | object | Headline scale tokens. |
typography.title | object | Title scale tokens. |
typography.body | object | Body scale tokens. |
typography.small | object | Small text scale tokens. |
typography.caption | object | Caption scale tokens. |
spacing.xs | string | Extra-small spacing (0.25rem). |
spacing.sm | string | Small spacing (0.5rem). |
spacing.md | string | Base spacing (1rem). |
spacing.lg | string | Large spacing (1.5rem). |
spacing.xl | string | Extra-large spacing (2rem). |
spacing['2xl'] | string | 2x extra-large spacing (3rem). |
spacing['3xl'] | string | 3x extra-large spacing (4rem). |
radius.sm | string | Small border radius (0.375rem). |
radius.md | string | Medium border radius (0.5rem). |
radius.lg | string | Large border radius (0.75rem). |
radius.xl | string | Extra-large border radius (1rem). |
radius.full | string | Full/pill border radius (9999px). |
duration.instant | string | Instant animation duration (100ms). |
duration.fast | string | Fast animation duration (150ms). |
duration.normal | string | Normal animation duration (250ms). |
duration.slow | string | Slow animation duration (400ms). |
duration.slower | string | Slower animation duration (700ms). |
AI Context
composable: useXUI
package: "xlayer-ui"
use-when: >
Accessing xlayer-ui design tokens at runtime in JavaScript or TypeScript.
Use when you need to pass a token value as a prop, use it in a computed
property, or apply it dynamically where CSS custom properties are not
sufficient (e.g. inline canvas drawing, chart configuration, JS-driven
animations). All other xlayers (nuxt-x-cards, nuxt-x-blog, etc.) extend
xlayer-ui and inherit these tokens automatically — no manual import needed.
Consumer overrides in app.config.ts under the xUI namespace are reflected
here immediately.