Getting started

An open-source library of stunning, accessible components in qwik.js.

Onwo-ui provides open-source qwik.js components to use in any of your projects, this section will describe the setup procedure you will need to follow to get started.

If you wish to see an example setup please check the github example section: https://github.com/onwo-cloud/onwo-ui/tree/main/examples

Prerequisites

To start using onwo-ui, you will need:

Node.js ^20.3
A Qwik project: setup guide
Tailwindcss v4: setup guide

Setup with qwik

Add onwo-ui dependencies to your project

npm install @onwo/ui @onwo/tailwindcss

Optionally you can also install onwo-ui icons library

npm install @onwo/icons

Choose a theme from this list and add the following to your global.css. Make sure to preserve the order!

@import '@onwo/tailwindcss/themes/moon.css';

@import "tailwindcss";

@plugin '@onwo/tailwindcss';
@source '@onwo/ui';

html,
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  text-size-adjust: none; /* Prevent automatic zooming of fonts on some mobile devices. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Add your theme specific class to the body element or the element where you want the theme applied:

<body class="theme-onwo-light">...</body>

You are good to go!