TCM Design System

TCM Design System

v1
by
V
Vijayraghavan
TCM Design System
Loading...
Lewati ke konten
AD
Platform UI enterprise

TCM Design System

Sistem desain yang komprehensif, dapat diakses, dan digerakkan oleh token untuk produk enterprise, formulir kompleks, alur kerja media kaya, dan aplikasi dengan data berat.

Jelajahi token Buka playground
15area spesifikasi
120+komponen & pola
AATarget WCAG

Dapat diakses secara bawaan

Kontrol berfokus pada keyboard, fokus yang terlihat, status ARIA, live region, dukungan pengurangan gerakan, dan mode kontras tinggi.

Arsitektur komposabel

Token, komponen, status formulir, dan perilaku dipisahkan sehingga tim dapat mengintegrasikan React, Vue, Angular, atau Web Components.

Skala enterprise

Pola mencakup grid data padat, formulir adaptif, pengelola berkas, pratinjau media, dan tooling pengembang.

Peta cakupan

Matriks implementasi spesifikasi

Fondasi

Design Tokens & Theming

Semua keputusan visual dikendalikan oleh variabel CSS yang dapat diubah saat runtime tanpa memuat ulang halaman.

Pengganti tema saat runtime

Pilih sistem, terang, gelap, merek kustom, atau kontras tinggi. Preferensi akan disimpan dengan Miniapps storage API jika tersedia.

Warna utama Skala radius Kepadatan

Pratinjau token langsung

Primary Secondary Healthy Warning
:root { --tcm-color-primary: ...; --tcm-radius-md: ...; }

Kategori token

Warna, tipografi, spasi, elevasi, opasitas, gradasi, z-index, gerakan, dan breakpoint.

Kontrol

Kontrol Input Inti

Input tervalidasi, bertopeng, mampu media, dan bergaya editor untuk pembuat formulir perusahaan.

Bidang standar, numerik, dan bertopeng

Kotak teks Email Kata sandi Nomor telepon Mata uang Persentase Area teks

Teks kaya, markdown, dan editor kode

Bold List Code 
<tcm-input required validation="email" />

Unggah file dan gambar

Letakkan file di siniGambar, PDF, audio, video hingga 50MB

Pemilih warna

Gunakan eyedropper

Pad tanda tangan

HapusSimpan tanda tangan

Tanggal, waktu, dan pelokalan

DateTimeDateTime

Rentang, opasitas, dan penggeser

Size Opacity
Preview

Tag, chip, dan multi-pilih

Pola pilihan

Kontrol Seleksi

Kontrol seleksi tunggal, ganda, hierarkis, geografis, visual, dan bergaya wizard.

Checkbox, radio, toggles

Include audit logs Require approval Enterprise BusinessFeature flag

Selectors

CountryLanguageTime zone

Icon, font, shape, pattern

InterSerifMono

Tree view

  • ▾ Design Tokens
    • Colors
    • Typography
    • Motion
  • ▾ Components
    • Inputs
    • Data Grid
    • Overlays

Stepper

  1. Account
  2. Permissions
  3. Review

Tabs and accordion

UsageAPIA11Y
Advanced options

Expandable panels support keyboard access and nested content.

Struktur

Navigasi & Struktur

Bilah sisi responsif, bilah atas, laci, menu, breadcrumbs, paginasi, bottom sheet, dan area lengket.

Breadcrumbs and pagination

Previous123Next

Menus and context actions

Open context menu
RenameDuplicateDelete

Sticky header/footer and bottom sheet

Sticky product header

Scrollable container content with persistent actions.

Panels and drawers adapt to viewport size.

Sticky action footer
Open bottom sheet
Arsitektur

Arsitektur Formulir

Formulir reaktif dan dinamis dengan grup, array, kontrol bertingkat, dependensi, validasi async, dan tata letak adaptif.

Dynamic form builder

Add fieldValidate

Smart wizard

  1. Profile
  2. Rules
  3. Review
BackNext

Validation and state model

Interaksi

Tombol & Aksi

Aksi standar, kirim/reset, tombol ikon, hyperlink, pemuatan, dinonaktifkan, ditekan, grup aksi, dan FAB speed dial.

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API
ResetPreviewPublish
New docUploadGenerate
Status

Umpan Balik & Indikator

Progres, pemintal, kerangka (skeleton), toast, snackbar, peringatan, notifikasi, lencana, modal, popover, dan tooltip.

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.
Storage quota is above 95%.
Database connection failed. Retrying.
Trigger toast

Progress and loading

Open accessible modal
Data perusahaan

Kontrol Tampilan & Data

Tabel, grid, penyuntingan sebaris, pengurutan, pemfilteran, pemuatan lambat, kartu, daftar, paginasi, karusel, galeri, dan pemutar media.

Export CSV
ServiceStatusRegionLatencyActions
Previous12Next

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

‹
Analytics dashboard
›

Media player

Aset

Fitur Media & File Lanjutan

Manajer file, navigasi folder, pengurutan seret-dan-lepas, pratinjau gambar/audio/video/PDF, kompresi, dan alur kerja konversi.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Komposisi

    Tata Letak & Kontainer

    Flex, grid, panel dapat diciutkan, carousel, kolom responsif, tata letak otomatis, elemen lengket, dan kontrol overflow.

    Responsive auto-layout playground

    Flex area
    Grid area
    Sticky area
    Overflow area
    Collapsible panel

    Panels use semantic disclosure patterns and retain keyboard accessibility.

    Overflow controls

    Wide content inside a contained scroll region with clear affordances.
    Pengaturan

    Utilitas & Pengaturan

    Geolokasi, peta, pemindai QR/barcode, widget cuaca, pengganti tema, kontrol font/latar/border/bayangan, dan mode warna adaptif.

    Geolocation and weather

    Get location
    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    FontShadow
    Model runtime

    Formulir — Manajemen Peristiwa & State

    Lifecycle hook, peristiwa validasi, dependensi, binding data async, undo/redo, penyimpanan otomatis, pemulihan, pelacakan state, dan animasi.

    Event timeline

    Simulate lifecycle

    Undo, redo, auto-save

    UndoRedoIdle
    A11Y

    Aksesibilitas & Kegunaan

    Praktik WCAG 2.1 AA untuk keyboard, pembaca layar, kontras, indikator fokus, gerakan berkurang, dan kegunaan lintas perangkat.

    Checklist

    Live region

    Announce status
    Contrast AA7.8:1
    Adaptif

    Desain Responsif & Adaptif

    Tata letak mobile-first, breakpoint adaptif, target sentuh, tab yang dapat digeser, overlay ramah keyboard, dan kepadatan responsif.

    Breakpoint tokens

    Touch-friendly components

    44px targetSwipe tabBottom sheet
    DX

    Pengalaman Pengembang

    Dukungan TypeScript, integrasi kerangka kerja, playground Storybook, ekspor token, API tema, impor modular, scaffolding CLI, dan konvensi penamaan.

    TypeScript component API

    import { Button, ThemeProvider } from '@tcm/design-system';

<ThemeProvider mode="system" tokens={customTokens}>
  <Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>

    CLI and token export

    npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook start

    Accessible enterprise modal

    Focus is managed, Escape closes the dialog, and actions are keyboard reachable.

    This action cannot be undone.
    CancelAcknowledge

    Enterprise bottom sheet

    Mobile-friendly surfaces can be dismissed with a button or backdrop tap.

    Done