optoolco / Components
Licence: mit
Example Components (Built with Tonic)
Stars: ✭ 42
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Components
components
Example Components (Built with Tonic)
Stars: ✭ 62 (+47.62%)
Mutual labels: ui-design, minimal, web-components, minimalist, component-library, jamstack
Tonic
A Low Profile Component Framework. Stable, Minimal, Auditable, and Build-Tool-Free.
Stars: ✭ 265 (+530.95%)
Mutual labels: jamstack, minimalist, ui-components, components
Webrix
Powerful building blocks for React-based web applications
Stars: ✭ 41 (-2.38%)
Mutual labels: ui-components, components, web-components
fast-blazor
Blazor component library for FluentUI. Microsoft's official lightweight wrapper around the FluentUI Web Components for use with .NET 6.0 Blazor applications
Stars: ✭ 928 (+2109.52%)
Mutual labels: components, web-components, component-library
Clarity
Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
Stars: ✭ 6,398 (+15133.33%)
Mutual labels: component-library, components, web-components
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (+1571.43%)
Mutual labels: ui-components, components, component-library
Storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Stars: ✭ 67,445 (+160483.33%)
Mutual labels: ui-components, components, web-components
taiga-ui
Angular UI Kit and components library for awesome people
Stars: ✭ 2,251 (+5259.52%)
Mutual labels: components, component-library, ui-components
Taiga Ui
Angular UI Kit and components library for awesome people
Stars: ✭ 1,353 (+3121.43%)
Mutual labels: ui-components, components, component-library
sodium-ui
Sodium is a simple, modular and customizable web component library to build elegant and accessible UI pieces for your React Application.
Stars: ✭ 23 (-45.24%)
Mutual labels: web-components, component-library, ui-components
tailwind-ui-components
Free Tailwind CSS UI Components - Crafted for modern websites, landing pages and web apps. TailGrids Core is free and open-source so, feel free to use with your personal or commercial projects. If you would like to show your support and love, don't forget to give us a star 🌟
Stars: ✭ 49 (+16.67%)
Mutual labels: components, component-library, ui-components
Elm Ui
UI library for making web applications with Elm
Stars: ✭ 878 (+1990.48%)
Mutual labels: ui-components, components, component-library
Fast
The adaptive interface system for modern web experiences.
Stars: ✭ 6,532 (+15452.38%)
Mutual labels: components, web-components, component-library
Precise Ui
📐 React UI Component Library powered by ZEISS.
Stars: ✭ 192 (+357.14%)
Mutual labels: ui-components, components, component-library
Zent
A collection of essential UI components written with React.
Stars: ✭ 2,133 (+4978.57%)
Mutual labels: ui-components, components, component-library
wlui
wl-ui 精美易用的前端复杂组件解决方案。Beautiful and easy-to-use front-end complex component solution
Stars: ✭ 32 (-23.81%)
Mutual labels: components, component-library, ui-components
Tail Kit
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
Stars: ✭ 997 (+2273.81%)
Mutual labels: ui-components, components, component-library
elements
Lovingly crafted ui components based on web components. Works well with all Frameworks - including Angular, React and Vue.
Stars: ✭ 42 (+0%)
Mutual labels: components, web-components, ui-components
React Weui
weui for react
Stars: ✭ 2,793 (+6550%)
Mutual labels: ui-components, components, component-library
Kpc
A UI Components Library for Intact, Vue, React and Angular.
Stars: ✭ 266 (+533.33%)
Mutual labels: ui-design, ui-components, web-components
SYNOPSIS
A bundle of example components built with Tonic.
USAGE
To use this example component library, install the following dependencies, Then, either register the components you want to bundle.
npm install @optoolco/tonic
npm install @optoolco/components
INCLUDE INDIVIDUAL COMPONENTS
inport Tonic from '@optoolco/tonic'
import { TonicInput } from '@optoolco/components/input'
import { TonicIcon } from '@optoolco/components/icon'
Tonic.add(TonicInput)
Tonic.add(TonicIcon)
INCLUDE COMPONENT COLLECTION
import Tonic from '@optoolco/tonic'
import bundle from '@optoolco/components'
bundle(Tonic) // attach everything
THEME
Tonic uses CSS variables (which work in all major browsers) to theme components. So you can use any css framework you want. The following variables are observed but are not required.
FONTS
body {
--tonic-body: 'Inter', sans-serif;
--tonic-header: 'Inter Black', sans-serif;
--tonic-subheader: 'Inter Medium', sans-serif;
--tonic-monospace: 'FiraMono', monospace;
}
LIGHT THEME (DEFAULT)
body, *[theme="light"] {
--tonic-background: rgba(245, 245, 245, 1);
--tonic-window: rgba(255, 255, 255, 1);
--tonic-accent: rgba(56, 185, 255, 1);
--tonic-primary: rgba(54, 57, 61, 1);
--tonic-secondary: rgba(232, 232, 228, 1);
--tonic-light: rgba(153, 157, 160, 1);
--tonic-medium: rgba(153, 157, 160, 1);
--tonic-shadow: rgba(150, 150, 150, 0.25);
--tonic-dark: rgba(54, 57, 61, 1);
--tonic-disabled: rgba(152, 161, 175, 1);
--tonic-button-text: rgba(54, 57, 61, 1);
--tonic-button-shadow: rgba(0, 0, 0, 33%);
--tonic-button-background: rgba(245, 245, 245, 1);
--tonic-button-background-hover: rgba(230, 230, 230, 1);
--tonic-button-background-focus: rgba(237, 237, 237, 1);
--tonic-input-text: rgba(54, 57, 61, 1);
--tonic-input-text-hover: rgba(228, 228, 228, 1);
--tonic-input-border: rgba(201, 201, 201, 1);
--tonic-input-border-hover: rgba(54, 57, 61, 1);
--tonic-input-background: rgba(248, 248, 248, 1);
--tonic-input-background-focus: rgba(238, 238, 238, 1);
--tonic-border: rgba(224, 224, 224, 1);
--tonic-border-accent: rgba(206, 206, 206, 1);
--tonic-error: rgba(240, 102, 83, 1);
--tonic-notification: rgba(240, 102, 83, 1);
--tonic-danger: rgba(240, 102, 83, 1);
--tonic-success: rgba(133, 178, 116, 1);
--tonic-warning: rgba(249, 169, 103, 1);
--tonic-info: rgba(153, 157, 160, 1);
--tonic-overlay: rgba(255, 255, 255, 0.75);
}
DARK THEME
*[theme="dark"] {
--tonic-background: rgba(40, 40, 40, 1);
--tonic-window: rgba(49, 49, 49, 1);
--tonic-accent: rgba(56, 185, 255, 1);
--tonic-primary: rgba(255, 255, 255, 1);
--tonic-secondary: rgba(195, 195, 195, 1);
--tonic-medium: rgba(153, 157, 160, 1);
--tonic-dark: rgba(41, 41, 41, 1);
--tonic-shadow: rgba(0, 0, 0, 0.3);
--tonic-disabled: rgba(170, 170, 170, 1);
--tonic-button-text: rgba(255, 255, 255, 1);
--tonic-button-shadow: rgba(0, 0, 0, 1);
--tonic-button-background: rgba(74, 74, 74, 1);
--tonic-button-background-hover: rgba(94, 94, 94, 1);
--tonic-button-background-focus: rgba(84, 84, 84, 1);
--tonic-input-text: rgba(255, 255, 255, 1);
--tonic-input-text-hover: rgba(255, 255, 255, 1);
--tonic-input-background: rgba(45, 45, 45, 1);
--tonic-input-background-focus: rgba(30, 30, 30, 1);
--tonic-input-border: rgba(80, 80, 80, 1);
--tonic-input-border-hover: rgba(105, 105, 105, 1);
--tonic-border: rgba(72, 72, 72, 1);
--tonic-border-accent: rgba(90, 90, 90, 1);
--tonic-error: rgba(240, 102, 83, 1);
--tonic-notification: rgba(240, 102, 83, 1);
--tonic-caution: rgba(240, 102, 83, 1);
--tonic-success: rgba(133, 178, 116, 1);
--tonic-warn: rgba(249, 169, 103, 1);
--tonic-overlay: rgba(0, 0, 0, 0.40);
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].