@markui/core

v0.1.1

Published

2 months ago

Motion-first React component library — 18 animated components, 15 live themes, powered by Framer Motion

0High
0Medium
0Low

react components ui animation framer-motion motion typescript design-system themes component-library animated accessible

███╗   ███╗ █████╗ ██████╗ ██╗  ██╗    ██╗   ██╗██╗
████╗ ████║██╔══██╗██╔══██╗██║ ██╔╝    ██║   ██║██║
██╔████╔██║███████║██████╔╝█████╔╝     ██║   ██║██║
██║╚██╔╝██║██╔══██║██╔══██╗██╔═██╗     ██║   ██║██║
██║ ╚═╝ ██║██║  ██║██║  ██║██║  ██╗    ╚██████╔╝██║
╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝    ╚═════╝ ╚═╝

Motion is not decoration. It is the message.

Documentation · Live Themes · GitHub

What is MARK UI?

A motion-first React component library where every component is designed from the ground up with animation as a first-class citizen. 18 production-ready components, 15 live themes, powered by Framer Motion.

🎬 Motion-first — Every interaction has intention, every transition has weight
🎨 15 live themes — Switch personality with a single attribute, not just colors
♿ Accessible — Keyboard navigation, ARIA roles, prefers-reduced-motion support
📦 Zero config — Import styles once, no Tailwind setup required
🔷 Full TypeScript — Every component, prop, and type ships with declarations

Installation

npm install @markui/core framer-motion

Peer dependencies: react >= 18, react-dom >= 18, framer-motion >= 11

Quick Start

1. Import the stylesheet

// app/layout.tsx (Next.js) or main.tsx (Vite)
import '@markui/core/styles';

2. Pick a theme

<html data-markui-theme="obsidian">

3. Use components

import { Button, Card, Badge } from '@markui/core';

export default function App() {
  return (
    <Card>
      <Badge variant="subtle">New</Badge>
      <Button>Get started</Button>
    </Card>
  );
}

That's it. No provider wrapping. No config files. No theme setup beyond a single attribute.

Components

| Category | Components | |---|---| | Inputs | Button · Input · Checkbox · Select · Toggle | | Display | Avatar · Badge · Card · Tag | | Feedback | Alert · Skeleton · Spinner | | Overlay | Modal · Drawer · Toast · Tooltip | | Layout | Container · Divider |

Themes

| Professional | Fun | |---|---| | monochrome · arctic · obsidian · ivory · slate · sage · carbon | cyberpunk · shinigami · titan · nebula · matrixx · gotham · akira · hobbit |

Switch themes at runtime with a single attribute:

document.documentElement.setAttribute('data-markui-theme', 'cyberpunk');

Framework Support

Works with Next.js (App Router), Vite, and any React 18+ project. Components ship with 'use client' directives — they work in server component trees out of the box.

Documentation

Full docs, interactive playgrounds, and theme previews at markui.vercel.app

License

MIT — free for personal and commercial use.