@velix-ui/react

Styled, accessible React components built on @velix-ui/primitives + @velix-ui/styles + @velix-ui/theme + @velix-ui/motion. Compile-time CSS (Vanilla Extract, zero-runtime) + headless logic. Enterprise, data-dense, AI-native.

Install

npm install @velix-ui/react
# hoặc: pnpm add @velix-ui/react / yarn add @velix-ui/react

Yêu cầu peer: react >=18, react-dom >=18.

CSS bắt buộc

CSS không tự inject. Import ba file một lần ở root app (đúng thứ tự):

import "@velix-ui/styles/index.css"; // reset + surfaces + sprinkles
import "@velix-ui/theme/index.css"; // semantic tokens + light/dark layers
import "@velix-ui/react/index.css"; // component-level CSS

Dùng nhanh

import { VelixProvider, Button } from "@velix-ui/react";

export default function App() {
  return (
    <VelixProvider>
      <Button color="accent">Xin chào Velix</Button>
    </VelixProvider>
  );
}

Import lẻ từng component để tối ưu tree-shaking:

import { Button } from "@velix-ui/react/button";

Next.js

Cần @vanilla-extract/next-plugin và liệt kê mọi @velix-ui/* trong transpilePackages. Xem README gốc của repo để biết cấu hình đầy đủ.

License

MIT © Velix UI