@yarcl/react

Yet another react component library. Your config file is the design system: every key becomes a typed prop and a rendered style.

From an existing React project using Vite, webpack, Rspack, Rollup or esbuild, run:

npx @yarcl/react init

This installs the package, adds the detected build plugin and TypeScript path mapping, and creates src/yarcl.config.ts. The equivalent commands are pnpm dlx @yarcl/react init, yarn dlx @yarcl/react init and bunx @yarcl/react init.

For manual setup:

npm install @yarcl/react

// vite.config.ts
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import yarcl from '@yarcl/react/vite';

export default defineConfig({ plugins: [react(), yarcl({ config: 'src/yarcl.config.ts' })] });

For webpack, Rspack, Rollup or esbuild, import the plugin from the matching @yarcl/react/<build-tool> entry point.

Every build plugin also emits yarcl.tokens.css in the build output directory for server templates and other pages outside the React app. It contains only CSS variables and color-scheme, without component styles or font loading. Set emitTokens: false or emitTokens: '' to disable it, or pass a filename such as emitTokens: 'styles/tokens.css' to customize its output-relative path.

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@yarcl/config": ["./src/yarcl.config.ts", "./node_modules/@yarcl/react/dist/yarcl.config.d.ts"]
    }
  }
}

// src/yarcl.config.ts
import { defineConfig } from '@yarcl/react/define';
import defaults from '@yarcl/react/defaults';

export default defineConfig({
  ...defaults,
  colors: {
    ...defaults.colors,
    brand: { light: '#4f46e5', dark: '#a5b4fc' },
  },
});

import { Button } from '@yarcl/react';

<Button color="brand">Save</Button>;

Documentation: yarcl.dev

For coding agents working in an installed project, read node_modules/@yarcl/react/llms.txt. The package copies this guide from the docs site during its build, so it matches the installed version. The package also includes a short AGENTS.md pointer for agents that inspect dependency directories.

License

MIT