@syidax/core

Syidax Core Community

Small components. A consistent experience. Your next great interface.

Visit Syidax · Live components & docs · Try the button · Plans & licensing

Buttons, inputs, navigation, overlays, and shared themes — the building blocks for an interface that feels like one product. Use the same custom elements across React, Angular, Vue, and plain JavaScript.

Explore first, then build. Open a live example, change its properties, and bring the component into your own screen.

Quick start · React · Angular · Vue · License · Explore Syidax

Quick start

npm install @syidax/core

Start with the Community component set. Install one edition of each product in an application; Community and Pro use the same element names.

In a Vite app (or another bundler that supports CSS imports), create src/syidax.ts. Import the styles and register only the elements used by this example:

import '@syidax/core/css/core';
import { defineCustomElement as defineButton } from '@syidax/core/components/sy-button.js';

defineButton();

For a plain HTML app, add the markup to index.html and the entry code to src/main.ts:

<main class="sy-theme">
  <sy-button variant="primary">Make it yours</sy-button>
</main>
<script type="module" src="/src/main.ts"></script>

import './syidax';

Keep the sy-theme class on the application container so the shared theme styles apply.

Choose your framework

The examples below use the published Web Components directly. You do not need a separate Syidax framework wrapper. The React and Vue examples reuse src/syidax.ts above; Angular has its own global-style setup below.

React

For a React 19 + TypeScript app, use src/App.tsx. The JSX declaration gives custom tags their element types and lets you use refs and component properties without any.

// src/App.tsx — React 19 + TypeScript
import { useState } from 'react';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
import type { Components } from '@syidax/core';
import './syidax';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'sy-button': DetailedHTMLProps<HTMLAttributes<HTMLSyButtonElement>, HTMLSyButtonElement> & Partial<Components.SyButton>;
    }
  }
}

export default function App() {
  const [saved, setSaved] = useState(0);
  return (
    <main className="sy-theme">
      <sy-button variant="primary" onClick={() => setSaved(n => n + 1)}>
        Save changes
      </sy-button>
      <p role="status">Saved {saved} times</p>
    </main>
  );
}

The standard click event works with React’s onClick. For component-specific custom events, use addEventListener in an effect and remove the listener in its cleanup.

Angular

For an Angular 20.2+ standalone application, add the package styles to your project’s angular.json → build.options.styles array, before your application styles. Keep any styles your app already uses:

{
  "styles": [
    "node_modules/@syidax/core/dist/syidax/syidax.css",
    "src/styles.css"
  ]
}

Use CUSTOM_ELEMENTS_SCHEMA in each standalone component whose template contains Syidax elements. Bind arrays and objects with Angular property bindings, and events with (eventName).

// src/app/app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { defineCustomElement as defineButton } from '@syidax/core/components/sy-button.js';

defineButton();

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <main class="sy-theme">
      <sy-button variant="primary" (click)="saved = saved + 1">Save changes</sy-button>
      <p role="status">Saved {{ saved }} times</p>
    </main>
  `,
})
export class AppComponent {
  saved = 0;
}

In src/main.ts, bootstrap the component:

import { provideZonelessChangeDetection } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()],
}).catch(console.error);

For an existing application, keep its providers and bootstrap configuration and apply the component/schema changes to the appropriate screen. Restart ng serve after changing global styles.

Vue

For Vue 3 + Vite, tell the template compiler that sy-* tags are custom elements. Merge this into vite.config.ts and restart the dev server:

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: { isCustomElement: tag => tag.startsWith('sy-') },
    },
  })],
});

Then use src/App.vue:

<script setup lang="ts">
import { ref } from 'vue';
import './syidax';

const saved = ref(0);
</script>

<template>
  <main class="sy-theme">
    <sy-button variant="primary" @click="saved++">Save changes</sy-button>
    <p role="status">Saved {{ saved }} times</p>
  </main>
</template>

Use @eventName for DOM events. Component-specific events carry their payload in event.detail; check the component API for the exact event name.

Client rendering, themes, and events

• These examples target browser-rendered applications. With Next.js, Nuxt, or Angular SSR, load element registration on the client and avoid accessing window, document, or element refs during server rendering.
• Import a product’s CSS once and retain the sy-theme application container. Add your own layout and theme customization around it.
• Register each element once. Keep one version and edition of a product per page, including in micro-frontends.
• Custom event names are case-sensitive. Use the event names and detail payloads documented in the component API.

Explore Syidax

Ready to build your next screen? Browse the live components, try the examples, and choose the pieces your product needs. Prefer Korean? 한국어 사이트에서 제품과 문서를 살펴보세요.

License

Public npm access does not grant unrestricted or free commercial use. Community is for personal, non-commercial use under the included license. Commercial use and Pro features require the applicable license and product rights. See LICENSE.md for the complete terms and NOTICE.md for third-party attributions.

Package version: 6.0.4 · Website · Live components & docs · Try the button