Getting Started

Welcome to the LearningHubz Design System UI Kit. Learn how to use these components in your projects.

Overview

This UI Kit contains the production-ready components used across the LearningHubz platform. Each component is documented with a live preview and the corresponding code, so you can find what you need and add it to your project.

How to Use

1

Browse Components

Use the sidebar navigation to explore all available components organized by category.

2

Preview Live

See how each component looks and behaves with interactive previews on the right.

3

View Code

Click the "Code" button to expand the code snippet for any component.

4

Copy & Use

Click the "Copy" button to copy the code to your clipboard and paste it into your project.

Installation

All components are already installed. Import them in your files.

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"

Color Palette Reference

Primary Orange

#ffae10

Primary Purple

#371e4d

Primary Teal

#218e8a

Primary Pink

#e12a62

Primary Dark

#313131

White

#ffffff

Design Principles

Tokens over values

Spacing, radius, and color always resolve to a design token (slate-*, lhz-*, text-titlePage). No hardcoded hex or px.

Accessible by default

Built on Radix primitives with semantic HTML, keyboard navigation, and visible focus rings out of the box.

Mobile-first

Every layout is built for small screens first, then extended with sm/md/lg/xl breakpoints.

Copy, don't rebuild

Every component ships with the exact code shown in its preview — copy it as-is instead of recreating it from scratch.

Quick Copy Templates

Common component combinations ready to copy:

Search + Filter Pattern

Card with Header + Actions

Status Badge Set

Before you build

  • →Every component is typed in TypeScript — props are self-documenting in your editor
  • →Check the Code tab for available variants and sizes before adding custom classes
  • →Extend with Tailwind utilities, but keep colors and spacing on the existing token scale