Introduction

Next

accelya-ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.

What is accelya-ui?

accelya-ui is a modern React UI kit built on top of Radix primitives and Tailwind v4. It ships ready-to-use components with sensible defaults, first‑class dark mode, and a distribution that makes it easy to customize or extend.

  • Accessible and themeable: Built with accessibility and theming in mind.
  • Composable APIs: Consistent component interfaces that work well together.
  • Production‑ready styles: Beautiful defaults you can ship or override.
  • AI‑friendly code: Clear, open code that’s easy to read and refactor.

Install

1) Add the package

npm i class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
npm i accelya-ui

2) Configure your framework

Next.js (next.config.mjs):

next.config.mjs
const nextConfig = {
  transpilePackages: ["accelya-ui"],
}
 
export default nextConfig

3) Import styles

Add to your global CSS (e.g. app/globals.css):

globals.css
@import "accelya-ui/index.css";
@source "../../node_modules/accelya-ui";

Quick start

example.tsx
import { Button } from "accelya-ui/ui/button"
 
export default function Example() {
  return <Button>Get started</Button>
}

Theming

accelya-ui supports light and dark out‑of‑the‑box. You can override tokens in your global CSS or build a fully custom theme when you’re ready.

globals.css
@import "accelya-ui/index.css";
@source "../../node_modules/accelya-ui";
 
@custom-variant dark (&:is(.dark *));
 
:root {
  /* your CSS variables */
}
 
.dark {
  /* your dark mode variables */
}

Next steps