Rimelight UI (@rimelight/ui)

Rimelight UI is a comprehensive component library for Astro websites used and maintained by Rimelight Entertainment. It offers a suite of accessible and highly performant components as Astro Components and Vue Components, and is available as a free and open source project for any to use.

Features

• Multiple Frameworks: Astro, Vue, and more with a unified usage pattern - use what suits your project best.
• Intuitive: Simple APIs, comprehensive documentation, and convenient integrations.
• Accessible: All components are WAI-ARIA compliant and include keyboard navigation, focus management, and screen reader support.
• Customizable: Create your own design system by overriding styles and variants globally or per instance.
• Performant: Fully type-safe, SEO-friendly, modern and lean dependencies, and blazing fast.

For a complete list of available components, refer to the documentation.

Installation

To use Rimelight UI in an Astro project, you need to install the package and add the integration.

1. Install the package into your project:

# vp
vp install @rimelight/ui

# npm
npm install @rimelight/ui

# pnpm
pnpm add @rimelight/ui

# yarn
yarn add @rimelight/ui

# deno
deno add npm:@rimelight/ui

# bun
bun add @rimelight/ui

2. Add the Rimelight UI Astro integration to your Astro configuration:

// astro.config.ts
import { ui } from "@rimelight/ui/integrations"
import { defineConfig } from "astro/config"

export default defineConfig({
  integrations: [
    ui({
      // Optional: Provide global UI overrides
      ui: {
        button: {
          defaultVariants: { variant: "primary" }
        }
      }
    })
  ]
})

Usage

Astro Components

// component.astro

---
import { RLAButton } from '@rimelight/ui/components/astro/RLAButton.astro';
---

<RLAButton label="Click Me" />

Vue Components

// component.vue

<script setup lang="ts">
import { RLVButton } from "@rimelight/ui/components/vue/RLVButton.vue"
</script>

<template>
  <RLVButton label="Click Me" />
</template>

For mixed usage please refer to the Astro documentation on using front-end frameworks.

You can add the FAQ section right toward the bottom of your README, typically just before the Contributing or Support sections.

Since GitHub and most Markdown viewers natively support the and HTML tags, they will render as interactive accordion dropdowns, keeping your README clean and compact.

Here is the exact code block to drop into your Repository README:

Markdown

Frequently Asked Questions

Useful Links

• Starter Project
• Playground
• Documentation
• Changelog

Contributing

We welcome contributions to this project and its documentation. If you are interested in contributing, please refer to our contribution guidelines.

If you would like to financially support this project, please consider sponsoring us.

Support

If you have any questions or need assistance, please feel free to reach out to us at [email protected].

License

MIT