RUI (@renglo/rui)

A modern React UI component library built with Tailwind CSS and React Aria UI primitives.

Installation (React + TypeScript)

npm install @renglo/rui
# or
yarn add @renglo/rui
# or
pnpm add @renglo/rui

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom
npm install @tailwindcss/typography
npm install tailwindcss-animate
npm tailwindcss-react-aria-components

CSS Setup

Import the CSS file in your application:

import '@renglo/rui/styles';

Or if you're using Tailwind CSS in your project, you can configure it to use the same design tokens by extending your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ... your content paths
    "./node_modules/@renglo/rui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ... other colors
      },
    },
  },
  plugins: [],
}

Usage (Components and Pages)

Example: Using a component (Button)

import { Button } from '@renglo/rui';
import '@renglo/rui/styles';

function App() {
  return (
    <div>
      <Button>Primary Button</Button>
      <Button color="secondary">Secondary</Button>
      <Button color="tertiary">Tertiary</Button>
    </div>
  );
}

Example: Using a page (prebuilt example)

// Import a namespaced group of example pages
import { ApplicationDashboards01 } from '@renglo/rui';
import '@renglo/rui/styles';

// Render a full dashboard page component
export default function DashboardRoute() {
  return <ApplicationDashboards01.Dashboard01 />;
}

Development

# Install dependencies
pnpm install

# Start Storybook
pnpm start:docs

# Run tests
pnpm test

# Build library
pnpm build

# Build Storybook
pnpm build:docs

Storybook

Explore components interactively in Storybook:

pnpm run start:docs

Visit http://localhost:6006 to see all components in action.

License

MIT License - see the LICENSE file for details.

Dependencies

This library depends on:

• React Aria UI for accessible primitives
• Tailwind CSS for styling
• Class Variance Authority for component variants
• Lucide React for icons (optional)

Installing Package locally (Test only)

pnpm add /Users/cid/Code/friendlyface/RENGLO-UI/renglo-rui-1.1.2.tgz