LogoObsidian

Next.js + Tailwind

Install Obsidian in a Next.js + Tailwind environment

We use the shadcn/ui CLI to automate the installation process.

Open in
logomspaint
Groupbox
This is a toggle
This is a checkbox
This is a label
This is a label which wraps its text!
This is a label exposed to Labels
This is a label made with table options and an index
This is a label that doesn't wrap it's own text
This is my slider!
3/5
This is my custom display slider!
0/5
This is a textbox
Color
Keybind
MB2
Press Keybind
X
Groupbox #2
This label spans multiple lines! We're gonna run out of UI space... Just kidding! Scroll down! Hello from below!
Tab1 Toggle
Dropdowns
A dropdown
A searchable dropdown
A display formatted dropdown
A multi dropdown
A disabled dropdown
A dropdown with disabled value
A very long dropdown
A player dropdown
A team dropdown

version: example

import { useMemo } from "react";
import { Obsidian } from "@/components/obsidian/obsidian";
import UIData from "@/components/demo/ObsidianExtracted.json";

export default function DemoObsidian() {
    const memoizedObsidian = useMemo(
        () => (
            <Obsidian
                title="mspaint"
                icon="/mspaint.png"
                footer="version: example"
                uiData={UIData}
            />
        ),
        []
    );

    return (
      <div className="w-screen h-screen flex justify-center items-center">
        <div className="max-w-[720px] max-h-[600px] scale-[0.8] max-sm:scale-[0.5] md:scale-90 lg:scale-100">
          {memoizedObsidian}
        </div>
      </div>
    );
}

Installation

pnpm dlx shadcn@latest add "https://www.mspaint.cc/r/obsidian"
npx shadcn@latest add "https://www.mspaint.cc/r/obsidian"
yarn shadcn@latest add "https://www.mspaint.cc/r/obsidian"
bunx --bun shadcn@latest add "https://www.mspaint.cc/r/obsidian"

Then add the following lines of code in your global.css file.

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;            /* Chrome, Safari, Opera */
}

Usage

import {
  Obsidian,
  ObsidianTab,
  ObsidianLeft,
  ObsidianRight,
  ObsidianGroupbox,
  ObsidianTabWarning,
  ObsidianToggle,
  ObsidianSlider,
  ObsidianInput,
  ObsidianDropdown,
  ObsidianButton,
  ObsidianLabel,
  ObsidianDivider,
  ObsidianImage,
} from "@/components/obsidian/obsidian";
<Obsidian
  title="mspaint"
  icon="/mspaint.png"
  footer="version: example"
  //width={720}
  //height={600}
>
  <ObsidianTab name="General" order={0} icon="Settings">
    <ObsidianLeft>
      <ObsidianGroupbox name="Basics" order={0}>
        <ObsidianToggle text="Enable feature" defaultChecked />
        <ObsidianSlider
          text="Opacity"
          min={0}
          max={100}
          value={80}
          suffix="%"
        />
        <ObsidianInput text="Display name" placeholder="Type your name" />
        <ObsidianDivider />
        <ObsidianDropdown text="Mode" options={["Simple", "Advanced"]} />
        <ObsidianButton text="Apply" />
      </ObsidianGroupbox>
    </ObsidianLeft>

    <ObsidianRight>
      <ObsidianGroupbox name="Info" order={0}>
        <ObsidianLabel text="This is a label." />
        <ObsidianImage text="Logo" image="/next.svg" height={200} />
      </ObsidianGroupbox>
    </ObsidianRight>
  </ObsidianTab>
</Obsidian>

Extra Resources

If you want to automatically dump your obsidian UI to a JSON file, you can use the following script which will save a file named ObsidianExtracted.json in your executor's workspace folder:

loadstring(game:HttpGet("https://raw.githubusercontent.com/mspaint-cc/assets/refs/heads/main/uidata/extractor.lua"))()

This file can then be imported and put into the uiData prop of the Obsidian component:

import UIData from "@/data/ObsidianExtracted.json";

<Obsidian
  title="mspaint"
  icon="/mspaint.png"
  footer="version: example"
  uiData={UIData}
/>

On this page

InstallationUsageExtra Resources