Mozhi

by dqnamo

An opinionated styled component library built on top of Base UI, with Tailwind CSS, Radix colors, Phosphor icons, and Motion.

dqnamo/atlas

Configuration

Choose your palette configuration for the project.

Brand Scales

Gray Scales

Button

<Button variant="primary">
  <p>Button</p>
</Button>

Switch

<Switch client:load />

GithubStarCounter

dqnamo/atlas

<GithubStarCounter className="mt-4" client:load />

TextLink

Made with Atlas

<TextLink text="Atlas" arrow={true} />

CodeBlock

const greeting = "Hello Atlas";
console.log(greeting);

const highlightedHtml = await highlightCode('const greeting = "Hello Atlas";', "ts");

<CodeBlock html={highlightedHtml} />

Toast

<Toast client:load />

Tabs

Tabs handles keyboard navigation, selection state, and panel pairing.

import { Tabs, TabsPanel } from "mozhi-ui";

<Tabs
  tabs={[
    { label: "Preview", value: "preview" },
    { label: "Code", value: "code" },
  ]}
>
  <TabsPanel value="preview">Preview content</TabsPanel>
  <TabsPanel value="code">Code content</TabsPanel>
</Tabs>