Mozhi

Mozhi

By dqnamo

An opinionated design language and UI Library for building beautiful web applications.

A work in progress

Configuration

Configure the theme by tuning grayscale, accent, and radius.

Grayscale

Accent

Roundness

Button

<Button variant="primary">
  <RocketLaunchIcon size={14} weight="fill" className="mr-2 shrink-0" />
  Quick Start
</Button>

Switch

Disabled

function Example() {
  const [checked, setChecked] = useState(false)

  return (
    <Switch
      checked={checked}
      onCheckedChange={setChecked}
      aria-label="Toggle switch"
    />
  )
}

TextLink

Learn more
<Text variant="small">
  By{" "}
  <TextLink href="https://dqnamo.com" target="_blank" variant="arrow">
    dqnamo
  </TextLink>
</Text>

GithubStarCount

dqnamo/mozhi

126,000

<GithubStarCount repoPath="dqnamo/mozhi" count={126000} />

CodeBlock

applyMozhiTheme(document.documentElement, {
  grayscale: 'slate',
  accent: 'blue',
  radius: 'rounded',
})
const code = "const greeting = 'Hello Mozhi'"

<CodeBlock code={code} lang="ts" />

Tabs

Overview content

import Tabs, { TabsPanel } from "../components/ui/Tabs"

<Tabs
  tabs={[
    { label: "Overview", value: "overview" },
    { label: "Projects", value: "projects" },
    { label: "Account", value: "account" },
  ]}
  defaultValue="overview"
>
  <TabsPanel value="overview">Overview content</TabsPanel>
  <TabsPanel value="projects">Projects content</TabsPanel>
  <TabsPanel value="account">Account content</TabsPanel>
</Tabs>

ToggleGroup

import { ToggleGroup, ToggleGroupItem } from "../components/ui/ToggleGroup"

function Example() {
  const [value, setValue] = useState(["rounded"])

  return (
    <ToggleGroup value={value} onValueChange={setValue}>
      <ToggleGroupItem value="sharp">Sharp</ToggleGroupItem>
      <ToggleGroupItem value="subtle">Subtle</ToggleGroupItem>
      <ToggleGroupItem value="rounded">Rounded</ToggleGroupItem>
      <ToggleGroupItem value="pill">Pill</ToggleGroupItem>
    </ToggleGroup>
  )
}