https://github.com/trendmicro-frontend/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.
https://github.com/trendmicro-frontend/tonic-ui

color-mode design-patterns design-system emotion react react-components react-hooks styled-system theme

Last synced: 2 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/trendmicro-frontend/tonic-ui
• Owner: trendmicro-frontend
• License: mit
• Created: 2020-01-18T01:12:04.000Z (over 6 years ago)
• Default Branch: v2
• Last Pushed: 2026-06-21T03:50:14.000Z (8 days ago)
• Last Synced: 2026-06-21T05:18:01.529Z (8 days ago)
• Topics: color-mode, design-patterns, design-system, emotion, react, react-components, react-hooks, styled-system, theme
• Language: JavaScript
• Homepage: https://trendmicro-frontend.github.io/tonic-ui
• Size: 187 MB
• Stars: 133
• Watchers: 13
• Forks: 39
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Tonic UI

[![contributors](https://img.shields.io/github/contributors/trendmicro-frontend/tonic-ui)](https://img.shields.io/github/contributors/trendmicro-frontend/tonic-ui)

[![circleci](https://circleci.com/gh/trendmicro-frontend/tonic-ui.svg?style=svg)](https://circleci.com/gh/trendmicro-frontend/tonic-ui)

[![codecov](https://codecov.io/gh/trendmicro-frontend/tonic-ui/branch/v2/graph/badge.svg?token=4HP1CSU87C)](https://codecov.io/gh/trendmicro-frontend/tonic-ui)

[![downloads](https://img.shields.io/npm/dm/@tonic-ui/react.svg?style=flat)](https://img.shields.io/npm/dm/@tonic-ui/react.svg?style=flat)

[![last commit](https://badgen.net/github/last-commit/trendmicro-frontend/tonic-ui)](https://badgen.net/github/last-commit/trendmicro-frontend/tonic-ui)

[![stars](https://badgen.net/github/stars/trendmicro-frontend/tonic-ui)](https://badgen.net/github/stars/trendmicro-frontend/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

:-- | :--

v2 (current) | https://trendmicro-frontend.github.io/tonic-ui/react/v2/

v1 | https://trendmicro-frontend.github.io/tonic-ui/react/v1/

v0 | https://trendmicro-frontend.github.io/tonic-ui/react/v0/

## Features

* 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](https://github.com/trendmicro-frontend/tonic-ui/tree/v2/packages/styled-system) and [theme](https://github.com/trendmicro-frontend/tonic-ui/tree/v2/packages/theme)

## Contributing

If you're interested in contributing to Tonic UI, check out the [contribution guide](https://trendmicro-frontend.github.io/tonic-ui/react/v2/contributing).

## License

MIT