Get started

Starting a new project

If you are starting a new project, you can use the dashboard example right away with the following command:

npx gitpick https://github.com/ailab-core/uilab/tree/main/examples/template-vite-tanstack-router [your_project_name]
cd [your_project_name]
npm install
npm run dev

Every example here uses Tanstack Router so make sure to follow the guide.

Examples

• Vite Template - Tanstack Router App
• Vite Template - Tanstack Start App

Manual Setup

Install these packages for your project.

npm install uilab-core tw-animate-css lucide-react

Import the component styles in your application entry point:

@import "tailwindcss";
@import "tw-animate-css";
@import "uilab-core/styles.css";
@import "uilab-core/theme.css";

/* Make sure to add this too for themes */
@custom-variant dark (&:is(.dark *));

Note that tailwindcss needs to be installed in your project! See how

Registry setup

Our custom shadcn registry is deployed through GitLab pages and due to it's privacy, you will need your personal access token to add our custom components to your project

PAT_TOKEN={YOUR_GITLAB_PAT_TOKEN}

{
  "$schema": "https://ui.shadcn.com/schema.json",
  ...
  "registries": {
    "@uilab": {
      "url": "https://ailabmn.gitlab.io/frontend/uilab/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${PAT_TOKEN}"
      }
    }
  }
}

TypeScript Support

All components are written in TypeScript and include complete type definitions. You'll get full IntelliSense support in your IDE:

import { Button, type ButtonProps } from "uilab-core"

// Full type support for props
function MyButton(props: ButtonProps) {
  return <Button {...props} />
}

Framework Compatibility

uilab-core works with anything that's on client component.

Server component however, is on experimental. There is a known issue of when using the function cn on server component. It errors out on console that cn function needs to be called in client component. A separate development will be done in near future.