Spectra UI
ShowcaseGetting Started

Installation

Install and configure for React.js

Information

This project and all components are written in TypeScript. We recommend using TypeScript for your project as well.

Prerequisites

These are the main dependencies you will need to get started.
npm install tailwindcss@latest clsx tailwind-merge framer-motion
Copy and paste the following code into your project.
// lib/utils.ts
import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Install components

That's it! Now you can go to any component page and follow the instructions there
You only need to copy + paste the components you need! No bloat or third-party dependencies.

Previous

Showcase

Next

Introduction

On this page

InformationThis project and all components are written in TypeScript. We recommend using TypeScript for your project as well.PrerequisitesThese are the main dependencies you will need to get started.Copy and paste the following code into your project.Install componentsThat's it! Now you can go to any component page and follow the instructions thereYou only need to copy + paste the components you need! No bloat or third-party dependencies.