smbls
v3.6.1
Published
[](https://www.npmjs.com/package/smbls) [](https://www.npmjs.com/package/smbls) [
Readme
smbls
The main Symbols package — bundles the entire design system ecosystem into a single import.
Installation
npm install smblsWhat's Included
This package re-exports everything from:
| Package | Description |
|---------|-------------|
| @domql/utils | Utility functions |
| @symbo.ls/scratch | CSS framework and methodology |
| @symbo.ls/emotion | Emotion CSS-in-JS integration |
| @symbo.ls/default-config | Default design system configuration |
| @symbo.ls/uikit | Complete UI component library |
| @symbo.ls/smbls-utils | Symbols-specific utilities |
| css-in-props | CSS properties as props |
| attrs-in-props | HTML attributes as props |
It also includes the @symbo.ls/cli binary, @symbo.ls/fetch, @symbo.ls/sync, @symbo.ls/helmet, and @domql/router.
Quick Start
Initialize Design System
import { init } from 'smbls'
init({
color: {
primary: '#3B82F6',
gray: ['#1F2937', '#9CA3AF'] // [light, dark]
},
theme: {
primary: {
color: 'white',
background: 'primary',
':hover': { opacity: '0.85' }
}
}
})Theme Switching
Themes switch automatically via CSS — no JavaScript re-renders needed:
init({
theme: {
document: {
'@dark': { color: 'white', background: 'black' },
'@light': { color: 'black', background: 'white' }
}
}
})
// Auto: system preference drives switching
// Force: document.documentElement.dataset.theme = 'dark'
// Custom: add @ocean, @sunset, etc. — activate with data-theme="ocean"Create an Application
import { create } from 'smbls'
const App = {
extends: 'Flex',
flow: 'column',
Header: {
extends: 'Flex',
H1: { text: 'Hello Symbols!' }
},
Main: {
extends: 'Flex',
Button: {
text: 'Get Started',
theme: 'primary'
}
}
}
create(App, {
key: 'your-project-key'
})Create Variants
import { create, createAsync, createSync, createSkeleton } from 'smbls'
// Standard — renders immediately
create(App, options)
// Async — renders first, then fetches remote config
createAsync(App, options)
// Sync — fetches remote config first, then renders
await createSync(App, options)
// Skeleton — resolves extends only, no full rendering
createSkeleton(App, options)Init Options
init(config, {
emotion: customEmotion, // custom Emotion instance
useVariable: true, // inject CSS custom properties
useReset: true, // inject CSS reset
useFontImport: true, // inject @font-face declarations
useIconSprite: true, // create SVG icon sprite
useDocumentTheme: true, // apply document-level theme
useSvgSprite: true, // create SVG sprite sheet
useDefaultConfig: false, // use built-in default config
globalTheme: 'auto', // 'auto' (system preference), 'dark', 'light', or custom theme name
useThemeSuffixedVars: false, // also generate --theme-name-dark-prop vars (opt-in)
verbose: false // enable verbose logging
})Additional Exports
import {
// Re-initialization
reinit, // re-apply config changes
applyCSS, // inject global CSS
updateVars, // update CSS custom properties
// Constants
DEFAULT_CONTEXT,
DESIGN_SYSTEM_OPTIONS,
ROUTER_OPTIONS
} from 'smbls'Page Metadata
Define SEO metadata on your app or individual pages. Values can be static or functions:
// app.js — app-level defaults
export default {
metadata: {
title: 'My App',
description: 'Built with Symbols',
'og:image': '/social.png'
}
}
// pages/about.js — page-level overrides
export const about = {
metadata: {
title: 'About Us',
description: (el, s) => s.aboutDescription
},
// ... page content
}Metadata is applied at runtime (updates <title> and <meta> tags in the DOM) and during SSR (generates <head> HTML via brender). See @symbo.ls/helmet for the full API.
CLI
This package also provides the smbls CLI binary:
smbls init # Initialize a project
smbls start # Start dev server
smbls build # Build for production
smbls deploy # Deploy to hosting
smbls fetch # Fetch remote config
smbls push # Push changes to platform
smbls ask # AI assistantSee the @symbo.ls/cli package for the full command reference.
Documentation
For full documentation visit symbols.app/developers.