@dendelion/mojo-ui

Retro styled React component library with nature-themed design tokens and glassmorphism.

Features

• 28 Components — Buttons, forms, layout, navigation, feedback, data display
• Tailwind CSS Preset — Reusable mojoPreset with nature-themed color tokens
• Glassmorphism — Shared style utilities for glass card patterns
• TypeScript — Full TypeScript support with strict typing
• SCSS Modules — Scoped styling with SCSS modules
• Accessible — ARIA labels and keyboard navigation
• Animated — Smooth transitions powered by framer-motion

Installation

npm install @dendelion/mojo-ui
# or
yarn add @dendelion/mojo-ui
# or
pnpm add @dendelion/mojo-ui

Peer Dependencies

npm install react react-dom framer-motion tailwindcss

Quick Start

1. Configure Tailwind CSS

// tailwind.config.js
import { mojoPreset } from '@dendelion/mojo-ui/tailwind';

export default {
  presets: [mojoPreset],
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
};

2. Import Global Styles

// In your app entry (e.g., main.scss)
@import '@dendelion/mojo-ui/src/globals.scss';

3. Use Components

import { Button, Card, Input } from '@dendelion/mojo-ui';

function App() {
  return (
    <Card title="Welcome">
      <Input placeholder="Enter your name" />
      <Button variant="green" title="Submit" />
    </Card>
  );
}

Components

Basic Input

• Button — Retro-styled 3D buttons (green, yellow, gray, red)
• IconButton — Circular icon buttons
• Input — Text input with label support
• Checkbox — Toggle checkbox
• Select — Dropdown select
• Textarea — Multi-line text input
• Switch — Toggle switch with variants
• Radio — Radio button group (horizontal/vertical)
• Slider — Range slider with analog feel

Layout

• Card — Container with header and footer
• Panel — Multi-section container
• PageLayout — Standard page structure
• StatsGrid — Statistics grid layout

Navigation

• Tabs — Tab navigation
• VinylTabs — Themed tab navigation
• NavigationIsland — Floating navigation bar

Feedback

• ProgressBar — Segmented progress bar
• CircularProgress — Circular progress indicator
• StatsCard — Single statistic display
• StatusIndicator — Color-coded status badge
• Skeleton — Loading placeholder
• Badge — Status/label badge with dot indicators
• Alert — Alert banner with variants
• Toast — Notification toasts with auto-dismiss

Overlay

• Modal — Animated dialog overlay
• Popup — Dropdown menu
• Tooltip — Hover information tooltip

Data Display

• DataTable — Table with retro styling

Icons

import {
  CheckIcon, CloseIcon, PlusIcon, SearchIcon,
  MenuIcon, SettingsIcon, ArrowUpIcon, ArrowDownIcon,
  SortIcon, FilterIcon,
} from '@dendelion/mojo-ui';

Shared Styles

Reusable glassmorphism and layout utilities:

import {
  container, content, title,
  statsCard, statsTitle, statsValue,
  statsGrid, serviceGrid, actionsGrid, recentList,
  glassmorphism, layout, grids, sharedStyles,
} from '@dendelion/mojo-ui/styles';

Design Tokens

Nature Colors

| Color | Shades | Usage | |-------|--------|-------| | moss | fog, calm, DEFAULT, deep, relic, accent | Success, growth | | bark | fog, calm, DEFAULT, deep, relic | Structure, wood | | coal | fog, calm, DEFAULT, deep, relic | Backgrounds, dark surfaces | | clay | fog, calm, DEFAULT, deep, relic | Warm accents | | river | fog, calm, DEFAULT, deep, relic | Info, water elements | | paper | fog, calm, DEFAULT, deep, relic, accent | Light surfaces | | sun | fog, calm, DEFAULT, deep, relic | Highlights, warnings | | ember | fog, calm, DEFAULT, deep, relic | Errors, danger |

Typography

| Family | Usage | |--------|-------| | Tiny5 | Display text, headings | | KyivType Sans | UI elements, form inputs | | KyivType Serif | Body text | | JetBrains Mono | Code, monospace |

Development

# Install dependencies
npm install

# Start showcase
npm run dev

# Build library
npm run build

# Type check
npm run check-types

License

MIT