Getting started

Welcome to LibDev UI – a lightweight, flexible and fully themeable component library built with Emotion, Framer Motion, and native HTML elements. Perfect for rapid UI development with full design control.

---

Installation

To use LibDev UI, simply install the package:

pnpm add @libdev-ui/base

or

npm install @libdev-ui/base

---

Import components

You can import any component directly from the library:

import { Button } from "@libdev-ui/base";

export default function Example() {
  return <Button>Click me</Button>;
}

Each component is tree-shakable and independently importable.

---

Global styles

To apply theming and variables, include the following in your global CSS file (e.g. global.css or _app.css):

:root {
  --color-primary: #4f46e5;
  --color-secondary: #9333ea;
  --color-danger: #ef4444;
  --color-success: #22c55e;
  --color-warning: #f59e0b;

  --text-color: #111827;
  --bg-color: #ffffff;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
}

These variables are used across all components for consistent theming.

---

Usage example

import { Button } from "@libdev-ui/base";

export default function Demo() {
  return (
    <Button variant="primary" size="md" radius="md">
      Primary Button
    </Button>
  );
}

You can pass animation props from Framer Motion like:

<Button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
  Animated
</Button>

---

Component list

Component	Description
Button	Themeable button with motion support
AutoSuggest	Custom autocomplete with keyboard nav
Input	Basic styled input (coming soon)
Checkbox	Themeable checkbox (coming soon)

---

Roadmap

• ✅ Base styling via CSS variables
• ✅ Buttons, AutoSuggest
• 🚧 Inputs, Selects, Switches
• 🚀 Fully customizable themes
• 🎨 Dark mode support

---

Feedback & Contributions

If you'd like to request a component or suggest a feature, feel free to open an issue or contribute directly via pull request.

---