Installation

Get UI Lab up and running in your project with these simple steps.

Package Manager Installation

UI Lab is available through npm, yarn, and pnpm:

npm

npm install @ui-lab/core

yarn

yarn add @ui-lab/core

pnpm

pnpm add @ui-lab/core

CDN Installation

For quick prototyping or simple projects, you can use our CDN:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.ui-lab.dev/css/core.min.css">

<!-- JavaScript -->
<script src="https://cdn.ui-lab.dev/js/core.min.js"></script>

Framework Integration

React

import { Button, Card } from '@ui-lab/react';
import '@ui-lab/core/dist/styles.css';

function App() {
  return (
    <Card>
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}

Vue

<template>
  <ui-card>
    <ui-button variant="primary">Get Started</ui-button>
  </ui-card>
</template>

<script>
import { UiButton, UiCard } from '@ui-lab/vue';
import '@ui-lab/core/dist/styles.css';

export default {
  components: {
    UiButton,
    UiCard
  }
}
</script>

Astro

---
import { Button, Card } from '@ui-lab/astro';
import '@ui-lab/core/dist/styles.css';
---

<Card>
  <Button variant="primary">Get Started</Button>
</Card>

Verification

Test your installation by creating a simple button:

<button class="ui-btn ui-btn--primary">
  Hello UI Lab!
</button>

If you see a styled button, you’re all set! Next, learn about configuration.