Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Guides
  3. Vite & React

Vite starter & React

The Vite + static HTML starter in the VelinStyle repo plus the experimental @velinstyle/react package — one workflow for plain sites and React apps.

Vite Starter Template

Path: templates/vite-velinstyle. It pins VelinStyle with "velinstyle": "file:../.." so you can edit the framework and see changes immediately.

git clone https://github.com/SkyliteDesign/velinstyle
cd velinstyle/templates/vite-velinstyle
npm install
npm run dev

Use npm run build when you want a production bundle.

Use this template as the reference for loading core CSS, optional theme stylesheets, and the components bundle.

React integration

Package: @velinstyle/react (packages/react). The React package is a thin wrapper around native Web Components — no re-implementation, no duplicated logic; you get typed props and JSX ergonomics on top of the same elements as in HTML.

Build locally (from the repository root, after git clone; peer react):

cd packages/react
npm install
npm run build

Usage — import VelinStyle CSS and the components bundle once; use wrappers like any native element. Props map to attributes on the custom element; handlers and refs attach to the underlying DOM node.

import { useRef } from 'react';
import { VelinDialog, VelinThemeToggle } from '@velinstyle/react';
import '@birdapi/velinstyle/dist/velinstyle.css';
import '@birdapi/velinstyle/dist/velinstyle-components.js';

export function App() {
  const dialogRef = useRef(null);
  return (
    <>
      <VelinThemeToggle target="html" />
      <VelinDialog ref={dialogRef} />
      <button type="button" onClick={() => dialogRef.current?.confirm('Continue?', { title: 'Settings' })}>
        Open dialog
      </button>
    </>
  );
}

React notes:

See also