@salesql/public-components

Vue 3 component library powering SalesQL's public-facing applications. Reusable UI and domain components with a focus on SSR/SSG safety, design tokens, accessibility and TypeScript-first APIs.

Installation

pnpm add @salesql/public-components
# or
npm install @salesql/public-components
# or
yarn add @salesql/public-components

Requires Vue ^3.5.0 as a peer dependency.

Usage

Import the component and the stylesheet once (typically in your app entry):

import { createApp } from 'vue';
import { SqlButton } from '@salesql/public-components';
import '@salesql/public-components/styles.css';

import App from './App.vue';

createApp(App).mount('#app');

Then use any component in your templates:

<script setup lang="ts">
import { SqlButton } from '@salesql/public-components';
</script>

<template>
  <SqlButton variant="primary" @click="onClick">Click me</SqlButton>
</template>

What's inside

UI components — SqlButton, SqlLinkButton, SqlInput, SqlSelector, SqlChip, SqlCell, SqlDivider, SqlDropdownMenu, SqlMenuButton, SqlPagination, SqlSegmentedButton, SqlTooltip.

Domain components — SqlHeader, SqlFooter, SqlFaq, SqlTestimonial, SqlCTABanner, SqlSignUpModal.

Every component ships with its TypeScript types (SqlButtonProps, SqlHeaderConfig, etc.) exported from the package root.

Design tokens

All styling is driven by CSS custom properties prefixed with --sq-*. Override them in your app to theme the library:

:root {
  --sq-color-primary: #6d4cff;
  --sq-radius-md: 8px;
}

The full token catalog lives in styles.css and is documented in the main repository.

Requirements

• Vue 3.5+
• ESM-only — bundled output is dist/index.js (ES modules)
• SSR/SSG-safe — no browser APIs are touched at module scope

Links

• Source repository
• Changelog
• Issue tracker

License

Internal — SalesQL.