Templates

All template generate a styleguide file, with the same structure of native html elements. For Vuejs, React and Svelte those file are generated as components to make it easier to use them directly in your app without any configuration.

Html

Add the styleguide.html file to your project.

• Install the Html template using: uisg

Vue

Add the Styleguide.vue component to the components directory in your Vuejs application.

• Install the Vue template using: uisg

<script setup>
  import Styleguide from "./components/Styleguide.vue";
</script>

<template>
  <Styleguide>
</template>

<style>
#app {
  font-family: "Courier New", Courier, monospace;
}
</stlye>

Learn more about Vueopen in new window

React

Add the Styleguide.jsx component to the components directory in your React application.

• Install the React template using: uisg

import React from 'react'
import ReactDOM from 'react-dom'
import Styleguide from './Styleguide'

ReactDOM.render(
  <React.StrictMode>
    <Styleguide />
  </React.StrictMode>,
  document.getElementById('root')
)

Learn more about Reactopen in new window

Svelte

Add the Styleguide.svelte component to the components directory in your Svelte application.

• Install the Svelte template using: uisg

<script>
  import Styleguide from "./lib/Styleguide.svelte";
</script>

<main>
  <Styleguide />
</main>

Learn more about Svelteopen in new window