एंटरप्राइज़ UI प्लेटफ़ॉर्म

TCM डिज़ाइन सिस्टम

एंटरप्राइज़ प्रोडक्ट्स, जटिल फॉर्म्स, रिच मीडिया वर्कफ़्लोज़ और डेटा‑हेवी एप्लिकेशंस के लिए एक व्यापक, एक्सेसिबल, टोकन‑ड्रिवन डिज़ाइन सिस्टम।

टोकन्स एक्सप्लोर करें प्लेग्राउंड खोलें

15स्पेस एरियाज़

120+कॉम्पोनेंट्स और पैटर्न्स

AAWCAG लक्ष्य

डिफॉल्ट रूप से एक्सेसिबल

कीबोर्ड‑प्राथमिक नियंत्रण, दृश्य फोकस, ARIA स्टेट्स, लाइव रीजन, रिड्यूस्ड‑मोशन सपोर्ट और हाई‑कॉन्ट्रास्ट मोड्स।

कंपोज़ेबल आर्किटेक्चर

टोकन्स, कॉम्पोनेंट्स, फॉर्म स्टेट और बिहेवियर अलग‑अलग हैं, ताकि टीमें React, Vue, Angular या Web Components को इंटीग्रेट कर सकें।

एंटरप्राइज़ स्तर पर स्केल

पैटर्न घने डेटा ग्रिड्स, अनुकूलनीय फॉर्म्स, फ़ाइल मैनेजर्स, मीडिया प्रीव्यू और डेवलपर टूलिंग को कवर करते हैं।

कवरेज मैप

स्पेसिफिकेशन इम्प्लिमेंटेशन मैट्रिक्स

फ़ाउंडेशन

डिज़ाइन टोकन और थीमिंग

सभी दृश्य निर्णय CSS वेरिएबल्स द्वारा संचालित होते हैं जिन्हें पेज रीलोड किए बिना रनटाइम पर बदला जा सकता है।

रनटाइम थीम स्विचर

सिस्टम, लाइट, डार्क, कस्टम ब्रांड, या उच्च कॉन्ट्रास्ट चुनें। जब उपलब्ध हो, तो प्राथमिकताएँ Miniapps स्टोरेज API के साथ सुरक्षित की जाती हैं।

प्राथमिक रंग रेडियस स्केल घनत्व

लाइव टोकन पूर्वावलोकन

Primary Secondary Healthy Warning

:root {
  --tcm-color-primary: ...;
  --tcm-radius-md: ...;
}

टोकन श्रेणियाँ

रंग, टाइप, स्पेसिंग, उन्नयन, अपारदर्शिता, ग्रेडिएंट, z-index, मोशन, और ब्रेकपॉइंट्स।

नियंत्रण

मुख्य इनपुट नियंत्रण

एंटरप्राइज़ फ़ॉर्म बिल्डर के लिए मान्य, मास्क किए गए, मीडिया‑समर्थ और एडिटर‑शैली इनपुट।

मानक, संख्यात्मक और मास्क किए गए फ़ील्ड

टेक्स्टबॉक्स Email पासवर्ड फ़ोन नंबर मुद्रा प्रतिशत टेक्स्ट एरिया

रिच टेक्स्ट, मार्कडाउन और कोड एडिटर

Bold List Code

<tcm-input required validation="email" />

फ़ाइल और छवि अपलोड

फ़ाइलें यहाँ छोड़ेंइमेज, PDF, ऑडियो, वीडियो 50MB तक

कलर पिकर

आईड्रॉपर का उपयोग करें

हस्ताक्षर पैड

साफ़ करेंहस्ताक्षर सहेजें

तारीख, समय और स्थानीयकरण

DateTimeDateTime

रेंज, अपारदर्शिता और स्लाइडर

Size Opacity

Preview

टैग, चिप्स, और मल्टी-सेलेक्ट

चॉइस पैटर्न्स

चयन नियंत्रण

सिंगल, मल्टीपल, हायार्किकल, भौगोलिक, विजुअल और विज़ार्ड‑स्टाइल चयन नियंत्रण।

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

Account
Permissions
Review

Tabs and accordion

UsageAPIA11Y

Advanced options

Expandable panels support keyboard access and nested content.

संरचना

नेविगेशन और संरचना

रेस्पॉन्सिव साइडबार, टॉपबार, ड्रॉअर, मेनू, ब्रेडक्रंब, पेजिनेशन, बॉटम शीट्स और स्टिकी रीजन।

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.

Open bottom sheet

आर्किटेक्चर

फ़ॉर्म आर्किटेक्चर

समूह, ऐरे, नेस्टेड कंट्रोल, निर्भरताएँ, असिंक्रोन मान्यकरण और अनुकूली लेआउट के साथ रिएक्टिव और डायनेमिक फ़ॉर्म।

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

इंटरैक्शन

बटन और क्रियाएँ

मानक क्रियाएँ, सबमिट/रीसेट, आइकन बटन, हाइपरलिंक, लोडिंग, निष्क्रिय, दबाए गए, एक्शन समूह और FAB स्पीड डायल।

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

स्थिति

फ़ीडबैक और इंडिकेटर

प्रोग्रेस, स्पिनर, स्केलेटन, टोस्ट, स्नैकबार, अलर्ट, नोटिफ़िकेशन, बैज, मोडल, पॉपओवर और टूलटिप।

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

एंटरप्राइज़ डेटा

डिस्प्ले और डेटा नियंत्रण

टेबल, ग्रिड, इनलाइन संपादन, सॉर्टिंग, फ़िल्टरिंग, लेज़ी लोडिंग, कार्ड, सूची, पेजिनेशन, कैरोसेल, गैलरी और मीडिया प्लेयर।

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

संसाधन

उन्नत मीडिया और फ़ाइल सुविधाएँ

फ़ाइल मैनेजर, फ़ोल्डर नेविगेशन, ड्रैग-एंड-ड्रॉप क्रम, छवि/ऑडियो/वीडियो/PDF प्रीव्यूअर, संपीड़न, और कन्वर्ज़न वर्कफ़्लो।

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

संरचना

लेआउट और कंटेनर

फ्लेक्स, ग्रिड, संकुचित पैनल, कैरोसेल, रेस्पॉन्सिव कॉलम, ऑटो-लेआउट, स्टिकी एलिमेंट और ओवरफ़्लो नियंत्रण।

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.

सेटिंग्स

उपयोगिताएँ और सेटिंग्स

जियोलोकेशन, मैप्स, QR/बारकोड स्कैनर, मौसम विजेट, थीम स्विचर, फ़ॉन्ट/बैकग्राउंड/बॉर्डर/शैडो नियंत्रण, और अनुकूली रंग मोड्स।

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

रनटाइम मॉडल

फॉर्म्स — इवेंट्स और स्टेट मैनेजमेंट

लाइफ़साइकल हुक्स, वेलिडेशन इवेंट्स, डिपेंडेंसीज़, असिन्क डेटा बाइंडिंग, अनडू/रीडू, ऑटो‑सेव, रिकवरी, स्टेट ट्रैकिंग और ऐनिमेशन।

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

A11Y

सुगम्यता और उपयोगिता

कीबोर्ड, स्क्रीन रीडर, कंट्रास्ट, फ़ोकस इंडिकेटर, कम गति और क्रॉस‑डिवाइस उपयोगिता के लिए WCAG 2.1 AA प्रथाएँ।

Checklist

Live region

Announce status

Contrast AA7.8:1

अनुकूलनीय

रेस्पॉन्सिव और अनुकूलनीय डिज़ाइन

मोबाइल‑प्रथम लेआउट्स, अनुकूलनीय ब्रेकपॉइंट्स, टच टार्गेट्स, स्वाइपेबल टैब्स, कीबोर्ड‑अनुकूल ओवरलेज़ और रेस्पॉन्सिव डेंसिटी।

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

डेवलपर अनुभव

TypeScript सपोर्ट, फ़्रेमवर्क इंटीग्रेशन, Storybook प्लेग्राउंड, टोकन एक्सपोर्ट, थीमिंग API, मॉड्यूलर इम्पोर्ट, CLI स्कैफोल्डिंग और नेमिंग कन्वेंशन।

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