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
ย
-
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.
ย
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.1.0/tocas.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.1.0/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.
ย
<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
ย
See the official site: [v4.tocas-ui.com/en-us โ๏ธ]
ย
ูฉ(หแห*)ู Designed by Yami Odymel from ๐น๐ผ Taiwan with the love of the contributors โค๏ธ
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.