Earthling-ui NPM

Earthling UI

A modern, themeable React component library built with TypeScript, Tailwind CSS, and a suite of CLI tools to scaffold projects quickly.

⚠️ Alpha Status: This project is in active development. APIs and features may change between releases.

Features

🎨 Themeable Components: Switch between light and dark themes effortlessly.
🔧 Type-Safe: Built with TypeScript for an excellent developer experience.
📦 Modern Stack: React + Tailwind CSS + Radix UI primitives.
🎯 Flexible Templates: Create new projects from a variety of templates:
- ssr – Server-side rendered applications (scaffolded under apps/*)
- spa – Single-page applications (scaffolded under apps/*)
- db – Package projects (scaffolded under packages/*)
- cli – Package projects (scaffolded under packages/*)
- monorepo – Full repository setups at the root
🛠 CLI Tool: Quickly scaffold projects using our CLI commands.
💡 Additional Commands:
- Eject components to integrate them directly into your project.
- Copy component snippets directly to your clipboard.

Installation

Install Earthling UI via Bun:

bun add earthling-ui

Components

Current components:

Button: Versatile button with filled, outline, and ghost variants
Card: Container component for grouping related content
Input: Text input field with various states and validation
Textarea: Multi-line text input
ThemeSwitcher: Toggle between light and dark themes

Each component supports:

Variants: filled, outline, ghost
Sizes: sm, md, lg
Color schemes: default, primary, secondary, good, bad

Usage

import { Button } from "earthling-ui/button";

function App() {
  return (
    <div>
      <Button material="filled" scheme="primary" size="md">
        Click me
      </Button>
    </div>
  );
}

Theming

Earthling UI supports light, dark, and system themes through data attributes:

/* Import required styles */
@import "tailwindcss";
@import "earthling-ui";
@import "earthling-ui/theme/dark";

/* Apply themes based on data-theme attribute */
@layer base {
  :root[data-theme="dark"] {
    @apply theme-dark;
  }
  :root[data-theme="system"] {
    @media (prefers-color-scheme: dark) {
      @apply theme-dark;
    }
  }
}

// Manual theme control
document.documentElement.setAttribute("data-theme", "dark"); // or 'light' or 'system'

Development

This is a monorepo managed with Bun workspaces. Key packages:

packages/earthling-ui: The main UI component library
apps/pwa: Demo/documentation site (work in progress)

# Install dependencies
bun install

# Build the UI library and watch for changes
cd packages/earthling-ui
bun run dev

# Run the demo site
cd apps/pwa
bun run dev