Tocas UI
The fastest and most intuitive way to build diverse websites and progressive web application interfaces.
-
👉 [See all components] -
📘 Documents: v4.tocas-ui.com/en-us -
🎲 Examples: Official examples -
📦 Source: GitHub | NPM | cdnjs -
🌎 Languages: 台灣正體 | English
🌼 Features
-
No jQuery dependency
No external JavaScript library dependencies.
-
Pure CSS
Tocas UI works well with all front-end frameworks. No built-in modules that take over the jobs from your favorite libraries.
-
No npm or Webpack
You don't need to install a bunch of packages via npm, nor setting up a bunch of loaders in Webpack.
-
Concise, semantic class names
Stlying colors with emphasises like
negativeandpositive, meaningful class names likeis-outlined. -
Dynamic color scheme that supports light/dark themes
Automatically switch the color schemes between light/dark themes.
-
Over 50 components with 100+ combinations
Take a look at the examples and see what you can create with Tocas UI.
📀 Install now!
Just copy the HTML tags to your <head>...</head> section and have a blast
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.4/tocas.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.4/tocas.min.js"></script>Or maybe you like npm
npm i tocasThen you should import the file from @tocas/dist/tocas.min.css and @tocas/dist/tocas.min.js.
🚀 Use
<button class="ts-button">Button</button><div class="ts-header">Header</div><div class="ts-input">
<input type="text" placeholder="Search…" />
</div>-
👉 [See all components] -
🎲 Examples: Official examples
📘 Documentation
See the official site: [v4.tocas-ui.com/en-us ↗︎]
❤️ Loves from Taiwan
٩(ˊᗜˋ*)و Designed by Yami Odymel from
The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co., Ltd.