Accelya UI

Support Tailwindcss V4

This is an npm package that exports all shadcn/ui components without the need for a CLI, designed for ease of use.

It simply provides all useful files along with type declarations.

Weekly publish latest version components to npm.

Pre work

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

Install

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

Configuation

For nextjs user, next.config.js

const nextConfig = {
  // ...
  transpilePackages: ["accelya-ui"],
};

export default nextConfig;

For vite user, vite.config.js

export default defineConfig({
  optimizeDeps: {
    include: ['accelya-ui/**/*.{js,jsx,ts,tsx}'],
  },
})

Usage

Import default style

If you have a fully customized style in global entry css file, see Custom Theme.

The global entry css file, index.css | global.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";

Import code

import { Button } from 'accelya-ui/ui/button';
import { cn } from 'accelya-ui/lib/utils';
import { useMobile } from 'accelya-ui/hooks/use-mobile';

Package Struct

• accelya-ui/ui/*: components
• accelya-ui/hooks/*: hooks
• accelya-ui/lib/utils: utils

Refresh a single component

To update or add one component from the shadcn registry into your local sources (~accelya-ui):

npm run refresh:one -- card
npm run build

Notes:

• The component is generated under ~accelya-ui/ui/card.tsx (editable).
• modify.mjs rewrites imports to relative paths.
• npm run build compiles to ui/card.jsx + ui/card.d.ts for consumers.

Type declaration and IDE auto import

This package supports VS Code auto import.

If the automatic code import does not take effect, please try the following methods.

1. add below code to project main.tsx or root layout.tsx in NextJS.

/// <reference types="accelya-ui" />

2. change tsconig.json

{
  "compilerOptions": {
    // append to exist types
    "types": ["...", "./node_modules/accelya-ui/**/*.ts"] 
  }
}

Custom Theme

The global entry css file, index.css | global.css, more detail see shadcn theme

/* "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 {
  ...
}

.dark {
  ...
}

@theme inline {
  ...
}

@layer base {
  ...
}

License

MIT accelya-ui