@teranga-ds/components

Framework-agnostic Web Components built with Stencil.js. Works with React, Angular, Vue, Svelte, or plain HTML.

Installation

npm install @teranga-ds/components

Usage

Script tag (CDN)

<script type="module" src="https://unpkg.com/@teranga-ds/components/dist/teranga-ds/teranga-ds.esm.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@teranga-ds/components/dist/teranga-ds/teranga-ds.css">

<tg-button variant="primary">Cliquez ici</tg-button>

ES Module

import { defineCustomElements } from '@teranga-ds/components/loader';
import '@teranga-ds/components/teranga-ds.css';

defineCustomElements();

Direct import (tree-shakable)

import { TgButton } from '@teranga-ds/components/dist/components/tg-button';

Components (79)

Forms & Input (16)

tg-button · tg-input · tg-textarea · tg-select · tg-checkbox · tg-radio · tg-switch · tg-combobox · tg-multi-select · tg-date-picker · tg-time-picker · tg-autocomplete · tg-otp-input · tg-slider · tg-stepper-input · tg-rich-editor

Data Display (14)

tg-table · tg-data-table · tg-card · tg-badge · tg-tag · tg-kpi-card · tg-stat-widget · tg-timeline · tg-activity-feed · tg-tree-view · tg-kanban-board · tg-calendar-view · tg-expandable-row · tg-heatmap

Navigation (12)

tg-navbar · tg-sidebar · tg-breadcrumb · tg-pagination · tg-tabs · tg-mega-menu · tg-command-palette · tg-context-menu · tg-bottom-nav · tg-stepper · tg-wizard-nav · tg-quick-switcher

Feedback (12)

tg-alert · tg-toast · tg-modal · tg-spinner · tg-skeleton · tg-progress · tg-tooltip · tg-empty-state · tg-confirm-dialog · tg-undo-snackbar · tg-status-badge · tg-retry-ui

AI (9)

tg-chat-message · tg-streaming-response · tg-prompt-input · tg-confidence-badge · tg-model-selector · tg-ai-insight-card · tg-ai-feedback · tg-source-citation · tg-token-usage

Media (4)

tg-audio-player · tg-video-player · tg-image-gallery · tg-file-upload

Real-time (3)

tg-live-badge · tg-presence-indicator · tg-activity-stream

Security (4)

tg-login-form · tg-role-badge · tg-session-expired · tg-avatar

Mobile (5)

tg-bottom-sheet · tg-fab · tg-pull-to-refresh · tg-global-loader · tg-chat

CSS Custom Properties

All components use --tg-* CSS custom properties for theming:

:root {
  --tg-color-green-600: #2D6A4F;
  --tg-color-gold-500: #D4A373;
  --tg-color-red-600: #C1121F;
  --tg-font-family-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

Browser Support

• Chrome / Edge 79+
• Firefox 63+
• Safari 14.1+
• iOS Safari 14.5+

License

MIT © Teranga DS Contributors