@ramme-io/ui

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

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):

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

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:

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.

License

MIT License — Copyright © 2026 Ramme Framework.

See LICENSE for details.