npm package: @ramme-io/ui
Description: The structural component library for the Ramme Framework.
Latest version: 2.0.2

# @ramme-io/ui

[![NPM Version](https://img.shields.io/npm/v/@ramme-io/ui.svg)](https://www.npmjs.com/package/@ramme-io/ui) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

**Heavy-duty, hardware-accelerated components for the edge.**

Ramme UI is a zero-jank component library built for high-frequency telemetry dashboards and physical hardware interfaces. Every component is purely declarative, GPU-composited, and designed to never block the main thread.

---

## Installation

```bash
npm install @ramme-io/ui
# or
pnpm add @ramme-io/ui
# or
yarn add @ramme-io/ui
```

---

## Tailwind CSS Setup

Ramme UI ships a Tailwind preset that provides the full design token system: colors, border radii, font families, and semantic aliases (e.g., `bg-primary`, `text-muted-foreground`, `border-border`).

Add it to your `tailwind.config.js` (or `.cjs`):

```javascript
module.exports = {
  // 1. Load the Ramme UI Preset (colors, animations, keyframes)
  presets: [require('@ramme-io/ui/tailwind.preset.js')],

  // 2. Tell Tailwind to scan the package for class names
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@ramme-io/ui/dist/**/*.{js,ts,jsx,tsx}",
  ],

  theme: {
    extend: {},
  },
  plugins: [],
};
```

This gives your project access to all Ramme theme tokens (`primary`, `secondary`, `destructive`, `success`, `warning`, `card`, `muted`, `accent`, `chart-1` through `chart-5`) without any additional CSS.

---

## Basic Usage

```tsx
import { Button, Card, PageHeader } from '@ramme-io/ui';
import { ArrowRight } from 'lucide-react';

export default function Dashboard() {
  return (
    <div className="p-8 max-w-4xl mx-auto">
      <PageHeader
        title="System Online."
        description="All sensors reporting nominal."
      />
      <Card className="mt-8 p-6">
        <Button variant="default" onClick={() => console.log('Engaged')}>
          Initialize <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
      </Card>
    </div>
  );
}
```

---

## Tech Stack

This library is built on a modern, accessible foundation:

- **Radix UI** — Unstyled, WAI-ARIA compliant primitives for dialogs, dropdowns, tooltips, and more.
- **Framer Motion** — GPU-accelerated animations using `transform` and `opacity` only. Zero layout thrashing.
- **Tailwind CSS** — Utility-first styling bound to Ramme CSS variable tokens.
- **Lucide React** — Consistent, tree-shakable icon set.

---

## Contributing & Storybook

To develop components locally and view the full interactive catalog:

```bash
cd packages/ui
pnpm install
pnpm run storybook
```

Storybook will start at `http://localhost:6006` with all component variants, states, and documentation.

When contributing a new component, you must complete the full supply chain:

1. **Component** — React code with typed props and JSDoc comments.
2. **Story** — A corresponding `[ComponentName].stories.tsx` file.
3. **Styleguide** — Inject into the appropriate section in the internal styleguide.
4. **Registry** — Run `npm run generate:registry` to update the dynamic manifests.

---

## Documentation

For full documentation, visit [https://ramme.io/docs](https://ramme.io/docs).

---

## License

MIT License — Copyright © 2026 Ramme Framework.

See [LICENSE](LICENSE) for details.