Tonic UI

Tonic UI is a UI component library for React, built with Emotion and Styled System. It is designed to be easy to use and easy to customize.

Documentation

Version	Link
v3 (current)	https://trendmicro-frontend.github.io/tonic-ui-docs/v3/
v2	https://trendmicro-frontend.github.io/tonic-ui/react/v2/
v1	https://trendmicro-frontend.github.io/tonic-ui/react/v1/

A unified color theme provider that can easily switch between dark and light mode
Low barriers to customize UI components using building block components
A standarized styled system and theme

If you're interested in contributing to Tonic UI, check out the contribution guide.

MIT

Name		Name	Last commit message	Last commit date
.agents/skills		.agents/skills
.changeset		.changeset
.claude/skills		.claude/skills
.codesandbox		.codesandbox
.github		.github
.husky		.husky
.states/_archive/migrate-styled-system-to-tonic-ui		.states/_archive/migrate-styled-system-to-tonic-ui
.yarn/releases		.yarn/releases
docs		docs
packages		packages
scripts		scripts
.gitattributes		.gitattributes
.gitignore		.gitignore
.mcp.json		.mcp.json
.yarnrc.yml		.yarnrc.yml
AGENTS.md		AGENTS.md
CONTEXT.md		CONTEXT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
codecov.yml		codecov.yml
commitlint.config.js		commitlint.config.js
lerna.json		lerna.json
package.json		package.json
tonic-ui-mcp.config.js		tonic-ui-mcp.config.js
tonic-ui-version.config.js		tonic-ui-version.config.js
tonic-ui.code-workspace		tonic-ui.code-workspace
tsconfig.base.json		tsconfig.base.json
yarn.lock		yarn.lock