kolibri icon indicating copy to clipboard operation
kolibri copied to clipboard

Published 20 hours ago • verified publisher icon public-ui

📖 Docs: Following Getting started Steps for Vite + React does not load Styles

Open borgfriend opened this issue 1 year ago • 2 comments

What is the update you wish to see?

I followed the documentation. However the css for the components does not load. What step am I missing?

Is there any context that might help us understand?

Steps to reproduce:

  1. Init project
npm create vite@latest react-ts
npm i @public-ui/components @public-ui/themes @public-ui/react
  1. Adjust main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";


import { register } from "@public-ui/components";
import { defineCustomElements } from "@public-ui/components/dist/loader";
import { DEFAULT } from "@public-ui/themes";

register(DEFAULT, defineCustomElements)
  .then(() => {
    ReactDOM.createRoot(document.getElementById("root")!).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  })
  .catch(console.warn);
  1. Adjust index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
    <script
      type="module"
      src="/node_modules/@public-ui/components/dist/kolibri/kolibri.esm.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
  1. Adjust App.tsx
import { KolAlert, KolButton, KolSpin } from "@public-ui/react";

const ARGS = {
  _on: {
    onClick: (_event, _value) => alert("Klick!"),
  },
};

function App() {
  return (
    <>
      <h1>Vite + React</h1>

      <div>
        <KolSpin _show={true} _variant="cycle" />
      </div>
      <div>
        <KolAlert
          _heading="Ausgabe von HTML-Code im Alert"
          _type="info"
        ></KolAlert>
      </div>
      <div>
        <KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
        <KolButton
          _label="Secondary"
          _variant="secondary"
          {...ARGS}
        ></KolButton>
        <KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
        <KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
        <KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
      </div>
    </>
  );
}

export default App;

Note: Examples copied from Spin, Alert and Button React example code

Result: Screenshot 2024-07-19 at 13 35 38

Does the docs page already exist? Please link to it.

https://public-ui.github.io/en/docs/get-started/first-steps

borgfriend avatar Jul 19 '24 11:07 borgfriend