@asd14/gruvbox-react

💻 Terminal/Gruvbox inspired React UI kit ✨

• 🎨 Gruvbox color scheme
• ⚡ Postcss is all you need

Table of contents

• Design Principles
• Installation
  • Peer dependencies
• Usage
• Changelog
• License

Design Principles

• Terminal-inspired: Clean, high-contrast design with consistent spacing and typography
• No transparencies or derivative colors: Only colors from the Gruvbox palette

Installation

npm install @asd14/gruvbox-react

Peer dependencies

This package requires and assumes you already installed:

  "peerDependencies": {
    "react": "^18 || ^19",
    "react-dom": "^18 || ^19",
    "lucide-react": "^0.544",
  },

Usage

// src/index.tsx
import { DarkModeProvider, useDarkMode } from "@asd14/gruvbox-react/hooks"
import { Button, Header1, Callout } from "@asd14/gruvbox-react/ui"
import { Sun, Moon } from "@asd14/gruvbox-react/icons-lucide"

const MyComponent = () => {
  const [isDark, { toggleDarkMode }] = useDarkMode()

  return (
    <div>
      <Header1>Terminal UI</Header1>

      <Button onClick={toggleDarkMode} variant="outline">
        {isDark ? <Sun /> : <Moon />}
        Toggle Theme
      </Button>

      <Callout variant="tip">
        This uses Gruvbox colors and terminal-style design
      </Callout>
    </div>
  )
}

const App = () => {
  return (
    <DarkModeProvider>
      <MyComponent />
    </DarkModeProvider>
  )
}

Changelog

See the releases section for details.

License

MIT