Getting Started

Life may already be boring; don't let your website follow suit.
Installation

Add these tags in the <head> section to use Tocas UI, or download it from GitHub for offline use.

<!-- Core: Tocas UI -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.js"></script>

<!-- Fonts: Noto Sans TC -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet" />

<!-- Enable: Responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Configuration

Tocas UI uses light and dark themes based on the user's system settings, but you can override this setting.

Description
Force using the light theme.
Force using the dark theme.
<!-- Add `is-dark` to apply the dark theme to the page -->
<html class="is-dark">

Adjust the border radius of the components.

Description
No rounded corners.
The default setting in Tocas UI.
A more modern, rounded corner look.
<!-- Add `is-sharp` to remove border radius from all components -->
<html class="is-sharp">

Change font size for all components.

Description
For mobile or handheld device apps.
Default size, suitable for general web pages.
For text-focused websites.
<!-- Add `is-large` for 16px font base -->
<html class="is-large">
Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.
Translators: Yami Odymel
Trademark of the owner of Tocas UI