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.0/5.0
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

Installation

pnpm dlx 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