មូលដ្ឋានគ្រឹះ

GitHub

Design Foundations

The core visual elements of the TCM design system. These foundations ensure a consistent brand experience across all enterprise applications.

Color System

Primary brand colors. Use 600 for primary actions, 50-100 for backgrounds.

Brand 50#f0f7ff

Brand 200#bae0fd

Brand 400#36abf9

Brand 600#006ebf

Brand 900#083f6a

Success

emerald-500

Warning

amber-500

Danger

red-500

Neutral

slate-500

Typography

text-4xl

Display Large

text-2xl

Heading Primary

text-lg

Subheading / Lead Text

text-base

The quick brown fox jumps over the lazy dog. Standard body text for paragraphs and generic content.

text-sm

Small text used for secondary labels, hints, and metadata.

Elevations & Shadows

Cardshadow-sm

Dropdownshadow-md

Modalshadow-lg

Popovershadow-2xl

Forms & Inputs

Interactive controls to collect data from users. Designed for clarity, accessibility, and fast data entry.

Buttons

Variants

Primary Button Secondary Button Outline Ghost Danger

Sizes

Small Medium Large

States

Disabled State Loading...

Inputs & Textareas

Email Address

Password *

Amount (with adornment)

Username (Error State)

Username cannot contain special characters.

Disabled Input

Notes (Textarea)

Selects & Selection Controls

Standard Select

Toggles / Switches

Enable feature (Active) Disable notifications

Checkboxes

I accept the terms and conditions Subscribe to newsletter

Radio Buttons

Enterprise Plan Startup Plan

Advanced Controls

Date Picker (Native)

Volume Level (Slider)

File Upload

Upload a file

or drag and drop

PNG, JPG, GIF up to 10MB

Specific Formats & Layouts

Currency Input

Percentage Input

Phone Number

IP Address

URL Input

Zip Code

Inline Edit Layout

Profile Name

Acme Corporation

Edit

Save Cancel

Advanced Forms

Complex inputs, editors, and pickers for specialized data entry.

Editors

B I U

Start typing your rich text content here...

main.js

const init = () => {
console.log('Hello World');
};

Pickers & Advanced Inputs

Color Picker

#006EBF

Rating Star

Date-Time Picker

Multi-select / Tags

React × Vue ×

Time Picker

Navigation

Components that help users move through the application and understand their current location.

Tabs

Tab content goes here...

Daily Weekly Monthly

Breadcrumbs & Pagination

Stepper

Feedback & Status

Inform users about the state of the system, success or failure of actions, and ongoing processes.

Alerts

A new software update is available. See what's new in version 2.4.

Details →

Order completed successfully

There were 2 errors with your submission

Your password must be at least 8 characters
Your password must include at least one pro wrestling finishing move

Toasts & Notifications

Show Success Toast Show Error Toast

Loaders & Empty States

Uploading database...45%

No projects

Get started by creating a new project.

New Project

Data Display

Displaying complex information in organized, scannable formats.

Badges & Avatars

Badges

Default New Feature Active Error Pending

Avatars

Data Table

Name	Title	Status	Role	Edit
Lindsay Walton [email protected]	Front-end Developer Optimization	Active	Member	Edit, Lindsay Walton
CW Courtney Henry [email protected]	Designer Brand	Away	Admin	Edit

Overlays

Components that overlay on top of the main content to focus the user's attention or provide contextual actions.

Modals / Dialogs

Open Standard Modal

Dropdown Menus

Options

Account settings Support License Sign out

Complex UI

Widgets, media players, and complex layouts.

Media Players

1:23 / 4:56

Podcast Episode 4214:05

Tree View & Widgets

src
- components
- App.js

San Francisco, CA

72°F

Partly Cloudy

Map Widget

Location Marker

Comment Box

Post Comment

ការត្រួតពិនិត្យទិន្នន័យជារូបភាព

Displaying complex metrics, network status, and usage analytics.