https://github.com/zainadeel/compomo
Framework-agnostic web component library built with Stencil.js — works with React, Angular, and plain HTML. Part of the ds-mo design system.
https://github.com/zainadeel/compomo
angular component-library custom-elements design-system ds-mo stencil storybook typescript ui web-components
Last synced: 9 days ago
JSON representation
Framework-agnostic web component library built with Stencil.js — works with React, Angular, and plain HTML. Part of the ds-mo design system.
- Host: GitHub
- URL: https://github.com/zainadeel/compomo
- Owner: zainadeel
- License: mit
- Created: 2026-04-10T16:16:39.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-06-06T03:54:41.000Z (12 days ago)
- Last Synced: 2026-06-06T04:22:49.588Z (12 days ago)
- Topics: angular, component-library, custom-elements, design-system, ds-mo, stencil, storybook, typescript, ui, web-components
- Language: TypeScript
- Homepage: https://zainadeel.github.io/compomo/
- Size: 1.29 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# CompoMo — `@ds-mo/ui`
[](https://www.npmjs.com/package/@ds-mo/ui)
Composable web UI components (Stencil custom elements) styled with [TokoMo](https://github.com/zainadeel/TokoMo) design tokens. Works in any framework — ships Angular proxies out of the box.
## Install
```bash
npm install @ds-mo/ui @ds-mo/tokens
```
**Required peer dependency:** `@ds-mo/tokens` provides all CSS custom properties (colors, dimensions, typography, effects) that CompoMo components consume. Components will not render correctly without it.
**Optional:** `@ds-mo/icons` for icon components passed via the `slot="icon"` pattern.
```bash
npm install @ds-mo/icons
```
## Setup
Import TokoMo tokens globally (once, at your app root):
```tsx
import '@ds-mo/tokens'; // all tokens (colors, dimensions, typography, effects)
import '@ds-mo/tokens/reset'; // CSS reset
import '@ds-mo/tokens/globals'; // global styles
```
Then import CompoMo components (Angular proxies):
```ts
import { Button, Text, Surface, Card } from '@ds-mo/ui';
```
**SPA hosts (Angular / React):** `ds-panel-nav` and `ds-bar-nav` need a [first-paint integration contract](docs/framework-integration.md) on hard reload — set a document variant hint or element attributes before the custom element upgrades.
**After upgrading `@ds-mo/ui`:** restart your dev server and hard-reload the browser. HMR often leaves stale custom-element definitions; BarNav overflow (`.bar-nav__tabs-probe`) will not appear until the new chunk loads. See [framework integration — `ds-bar-nav`](docs/framework-integration.md#ds-bar-nav--responsive-tab-overflow).
## Components
### Primitives
- **Text** — typography with variant system, semantic colors, truncation, wrap modes
- **Surface** — container with backgrounds, elevation, edges, radius, interactive states
- **Card** — elevated content container with header/footer slots
- **Input** — text input field
- **Slider** — range slider
- **Field** — label + input wrapper
- **LabelWrap** — label + content wrapper with layout variants
- **Divider** — horizontal or vertical rule
### Actions
- **Button** — primary/secondary/tertiary with intents, sizes, icon support
- **ButtonGroup** — grouped button row with shared borders
- **ToggleButton** — two-state selectable button
- **ToggleButtonGroup** — radio-style group of toggle buttons
### Controls
- **Toggle** — on/off switch
- **Checkbox** — with label and indeterminate state
- **Radio** — single-select radio input
### Data display
- **Tag** — labels with intents, contrasts, removable
- **Badge** — numeric count indicator
- **Table** — sortable, paginated data table
- **Accordion** — collapsible content sections
- **Pagination** — page navigation control
### Overlays
- **Modal** — dialog with title, subtitle, footer slots
- **Menu** — dropdown with sections, selection, positioning
- **Tooltip** — hover tooltip with shortcut key support
- **Select** — dropdown select
- **Toast** — transient notification
- **Banner** — notification bar with intents, toast mode
### Navigation
- **Tab** — tab button with selection state
- **TabGroup** — grouped tabs with shared selection
- **Breadcrumb** — path navigation
### Status
- **EmptyState** — placeholder states
- **Loader** — loading indicator
- **Skeleton** — content placeholder
### Layout
- **Header** — page header with left/center/right slots
- **Sidebar** — collapsible, resizable navigation with sections and items
### Utility
- **Fade** — gradient overlay
- **Scrollbar** — custom scrollbar
- **ErrorBoundary** — error catch with fallback
## Token dependency
All styling uses TokoMo CSS custom properties. No hardcoded colors, sizes, or shadows — everything maps to the token system. Components will render unstyled if `@ds-mo/tokens` is not imported.
## Icon pattern
Components that accept icons use named slots:
```html
Save
```
Pass any element into `slot="icon"`. Works with `@ds-mo/icons` or any custom SVG element.