@smalt-ui/core

@smalt-ui/core

The library core: 56 UI components for Vue 3 built on Reka UI, three-tier design tokens with themes (light/dark), composables and providers. Built with Vite library mode (ESM + .d.ts + styles.css), tree-shakeable (preserveModules + sideEffects).

Part of the Smalt UI monorepo. Shared requirements, installation and workspace commands are described in the root README.

Installation

pnpm add @smalt-ui/core

Peer dependencies (installed by the consumer):

Icons (lucide) and the mask engine (maska) are internal dependencies; no separate install needed.

Usage

Globally (plugin)

import { createApp } from 'vue'
import { SUI } from '@smalt-ui/core'
import '@smalt-ui/core/styles.css'
import App from './App.vue'

createApp(App).use(SUI).mount('#app')

Per component (tree-shaking)

<script setup lang="ts">
import { SButton } from '@smalt-ui/core'
import '@smalt-ui/core/styles.css'
</script>

<template>
  <SButton>Button</SButton>
</template>

Wrap the app (or a subtree) in the .s-root container: it isolates the styles from the host (see the "Isolation" section of the documentation site).

Entry points (exports)

What's inside

• Components (src/components/, S prefix): basics, forms, feedback, navigation/layout.
• Providers (src/providers/, no S prefix): ConfigProvider (i18n, explicit import only), ToastProvider (toasts).
• Form validation: SForm, rules on every form field, built-in rules and Zod/Valibot schemas through schemaRule (see the Validation guide).
• Composables: useColorMode, useToast, createTheme/injectTheme, useMessages/provideLocale/installLocale, useIcons/registerIcons/resolveIcon.
• Tokens and themes: SASS maps (src/styles/) → CSS variables with the --s- prefix; the theme is set with data-theme on <html>.

Fonts

The package ships the Inter font (variable, weights 100–900) in four subsets: Latin, Cyrillic and their extended ranges. The browser downloads only the subsets whose characters appear on the page. Include it with a separate entry:

import '@smalt-ui/core/fonts.css'

Headings can get their own font through a token; by default they use the text font:

:root {
  --s-font-heading: 'Manrope', var(--s-font-sans);
}

Inter is distributed under the SIL Open Font License 1.1; the license text sits next to the files (fonts/OFL.txt).

Package scripts

Run from the root: pnpm --filter @smalt-ui/core <script>.