Syidax Design System
A design system built on Web Components.
Input, navigation, data display, and feedback components are standard HTML elements, so the same UI works in HTML, React, Vue, and Angular.
Built on Web Components
Write it once. Use it in any framework.
Every component is a standard custom element registered with the browser. The same <sy-button> runs in a plain HTML page and inside React, Vue, and Angular apps, so teams on different stacks share one UI.
<sy-button variant="primary">Save</sy-button><sy-button variant="primary">Save</sy-button><sy-button variant="primary">Save</sy-button><sy-button variant="primary">Save</sy-button>- A web standardBuilt on the Custom Elements standard that every modern browser supports.
- No framework lock-inComponents don't depend on a framework, so upgrading or switching frameworks doesn't mean rebuilding your UI.
- Familiar APIsSet properties and attributes, and handle standard DOM events with
addEventListeneror your framework's event binding. - Themed with CSS variablesDesign tokens are CSS custom properties, so light and dark themes and brand colors apply the same way in every framework.
Explore the guides#
Key features#
- 53
Component families
Buttons, inputs, forms, navigation, and layouts.
Standard HTML elements
Build your UI with custom elements such as
<sy-button>.Properties and events
Set state through properties and connect application logic with standard DOM events.
One consistent theme
Shared design tokens keep your UI consistent in light and dark themes.
Community & Pro
Browse both tiers in the menu. The 6 Pro-only families carry a PRO badge.
Environments#
Install the npm package and connect its CSS and Web Components to your app. Use the same custom elements in HTML/JavaScript, React, Vue, and Angular. The example below uses an app build tool that resolves npm imports.
Getting started#
Install @syidax/core · npm, then add the following code to your JavaScript entry file and HTML.
npm install @syidax/core@latestimport '@syidax/core/css/core';
import { defineCustomElement } from '@syidax/core/components/sy-button.js';
defineCustomElement();<div class="sy-theme sy-theme-light">
<sy-button variant="primary">Save</sy-button>
</div>For the file layout and startup steps, see Installation. For properties and events, see Basic usage.
Component families#
Components are grouped by their role in an interface. Select a name to open its documentation.