Installation

PreviousNext

Install accelya-ui in any React app.

Pre work

  1. Create a new React project.
  2. Get started with Tailwind CSS.

Install dependencies

Add the required dependencies and accelya-ui.

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

Framework configuration

Configure your bundler for the package.

  • Next.js (next.config.js | next.config.mjs)
next.config.mjs
const nextConfig = {
  // ...
  transpilePackages: ["accelya-ui"],
};
 
export default nextConfig;
  • Vite (vite.config.ts | vite.config.js)
vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: ['accelya-ui/**/*.{js,jsx,ts,tsx}'],
  },
})

Add styles

Import the default styles in your global CSS (e.g. src/styles/globals.css, index.css, or app/globals.css).

globals.css
/* "accelya-ui/index.css" includes `@import "tailwindcss"` */
@import "accelya-ui/index.css";
/* source detection, adjust the path according to your setup */
@source "../../node_modules/accelya-ui";

If you have a fully customized theme in your global CSS, see the Custom Theme section below.

Import and use components

example.tsx
import { Button } from 'accelya-ui/ui/button'
import { cn } from 'accelya-ui/lib/utils'
import { useMobile } from 'accelya-ui/hooks/use-mobile'
 
export function Example() {
  const isMobile = useMobile()
  return <Button className={cn(isMobile && 'w-full')}>Hello</Button>
}

Type declarations and IDE auto‑import

VS Code auto‑import should work out of the box. If it does not, try one of the following:

  1. Add a reference in your app entry (e.g. app/layout.tsx in Next.js):
app/layout.tsx
/// <reference types="accelya-ui" />
  1. Update tsconfig.json to include accelya-ui types:
tsconfig.json
{
  "compilerOptions": {
    "types": ["...", "./node_modules/accelya-ui/**/*.ts"]
  }
}

Custom Theme (optional)

You can customize the theme in your global CSS. Refer to shadcn theme for details.

globals.css
/* "accelya-ui/index.css" includes `@import "tailwindcss"` */
@import "accelya-ui/index.css";
/* source detection, according to the actual path specified */
@source "../../node_modules/accelya-ui";
 
@custom-variant dark (&:is(.dark *));
 
:root {
  /* your CSS variables */
}
 
.dark {
  /* your dark mode variables */
}
 
@theme inline {
  /* your theme tokens */
}
 
@layer base {
  /* your base styles */
}

That's it

You can now start adding and using components from accelya-ui.