centoui 1.0.0-alpha.29 → 1.0.0-alpha.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -19
- package/package.json +19 -10
package/README.md
CHANGED
|
@@ -1,36 +1,88 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<h1>centoui</h1>
|
|
3
|
+
<p><strong>Vue components for elegant interfaces</strong></p>
|
|
4
|
+
<p>
|
|
5
|
+
<a href="https://npmx.dev/package/centoui"><img src="https://img.shields.io/npm/v/centoui.svg?style=plastic&label=NPM Version&color=blue" alt="npm version"></a>
|
|
6
|
+
<a href="https://npmx.dev/package/centoui"><img src="https://img.shields.io/npm/dw/centoui.svg?style=plastic&label=NPM Downloads&color=blue" alt="npm downloads"></a>
|
|
7
|
+
<a href="https://npmx.dev/package/centoui"><img src="https://img.shields.io/npm/unpacked-size/centoui?style=plastic&label=NPM Unpacked Size&color=blue" alt="NPM Unpacked Size"></a>
|
|
8
|
+
</p>
|
|
9
|
+
</div>
|
|
2
10
|
|
|
3
|
-
|
|
4
|
-
[](https://npmx.dev/package/centoui)
|
|
5
|
-
[](https://npmx.dev/package/centoui)
|
|
11
|
+
<br>
|
|
6
12
|
|
|
13
|
+
`centoui` is the core package of the CentoUI ecosystem. It contains every component's source code, the theme CSS, the component registry, and the `defineConfig` helper used by `centoui.config.ts`.
|
|
7
14
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
`centoui` is the core Vue component library that powers the CentoUI ecosystem. It provides highly customizable, accessible, and design-driven components built with Vue 3, Tailwind CSS v4, and Reka UI.
|
|
15
|
+
When you run `centoui add button`, the CLI fetches the button source files from this package's registry and copies them into your project. You get the full `.vue` file and its variant definitions — no black-box imports.
|
|
11
16
|
|
|
12
17
|
## Installation
|
|
13
18
|
|
|
14
19
|
```bash
|
|
15
|
-
# Using pnpm
|
|
16
20
|
pnpm add centoui
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## How It Works
|
|
24
|
+
|
|
25
|
+
CentoUI follows a **copy-paste** model. Components are not consumed as runtime imports from `node_modules`. Instead, they are copied directly into your project by the [CLI](../cli), giving you full ownership and the freedom to customize.
|
|
26
|
+
|
|
27
|
+
Each component consists of:
|
|
28
|
+
|
|
29
|
+
- A **`.vue` file** — the template and script, built on [Reka UI](https://reka-ui.com/) primitives for accessibility and behavior.
|
|
30
|
+
- An **`index.ts` file** — variant definitions using [Tailwind Variants](https://www.tailwind-variants.org/), TypeScript prop types, and the component export.
|
|
31
|
+
|
|
32
|
+
### Version-Locked Fetching
|
|
33
|
+
|
|
34
|
+
The CLI fetches all component files, the registry index, and the theme CSS from the **exact tagged release of this package** that matches the installed `centoui-cli` version. The source base URL is pinned to `refs/tags/v<VERSION>` — never to `main` or a floating ref.
|
|
17
35
|
|
|
18
|
-
|
|
19
|
-
|
|
36
|
+
This guarantees that the files copied into your project always correspond to the same release as the CLI you ran, so there is no risk of getting a component from a newer or older version of this package.
|
|
37
|
+
|
|
38
|
+
### Theming
|
|
39
|
+
|
|
40
|
+
A single `centoui.css` file controls the entire visual identity. It defines semantic color tokens using `oklch` for both light and dark modes — `--primary`, `--secondary`, `--error`, `--surface`, and more. Changing your palette is one file edit.
|
|
41
|
+
|
|
42
|
+
```css
|
|
43
|
+
:root {
|
|
44
|
+
--primary: oklch(0.09 0 0);
|
|
45
|
+
--primary-foreground: oklch(0.98 0 0);
|
|
46
|
+
/* ... */
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.dark {
|
|
50
|
+
--primary: oklch(0.98 0 0);
|
|
51
|
+
--primary-foreground: oklch(0.08 0 0);
|
|
52
|
+
}
|
|
20
53
|
```
|
|
21
54
|
|
|
22
|
-
##
|
|
55
|
+
## Configuration
|
|
56
|
+
|
|
57
|
+
The `defineConfig` helper is re-exported from this package for use in `centoui.config.ts`:
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
import { defineConfig } from "centoui"
|
|
61
|
+
|
|
62
|
+
export default defineConfig({
|
|
63
|
+
componentsDir: "./src/components/centoui",
|
|
64
|
+
themeFilePath: "./src/assets/css/centoui.css",
|
|
65
|
+
icons: {
|
|
66
|
+
check: "lucide:check",
|
|
67
|
+
close: "lucide:x",
|
|
68
|
+
chevronDown: "lucide:chevron-down",
|
|
69
|
+
},
|
|
70
|
+
})
|
|
71
|
+
```
|
|
23
72
|
|
|
24
|
-
|
|
73
|
+
## Peer Dependencies
|
|
25
74
|
|
|
26
|
-
|
|
75
|
+
CentoUI components rely on these runtime packages (automatically installed when you use the CLI):
|
|
27
76
|
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
-
|
|
77
|
+
- [`vue`](https://vuejs.org/) — Vue 3
|
|
78
|
+
- [`reka-ui`](https://reka-ui.com/) — Accessible headless primitives
|
|
79
|
+
- [`tailwindcss`](https://tailwindcss.com/) + [`@tailwindcss/vite`](https://tailwindcss.com/) — Styling engine
|
|
80
|
+
- [`tailwind-variants`](https://www.tailwind-variants.org/) — Variant-driven class composition
|
|
81
|
+
- [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) — Class conflict resolution
|
|
82
|
+
- [`@vueuse/core`](https://vueuse.org/) — Composition utilities
|
|
83
|
+
- [`@iconify/vue`](https://iconify.design/) — Icon rendering (optional)
|
|
84
|
+
- [`tw-animate-css`](https://github.com/Wombosvideo/tw-animate-css) — Animation utilities
|
|
33
85
|
|
|
34
86
|
## License
|
|
35
87
|
|
|
36
|
-
[MIT](../../LICENSE) © [Favour Emeka](https://github.com/favorodera)
|
|
88
|
+
[MIT](../../LICENSE) © [Favour Emeka](https://github.com/favorodera)
|
package/package.json
CHANGED
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "centoui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"description": "Vue components for
|
|
4
|
+
"description": "Vue components for elegant interfaces",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"vue",
|
|
7
|
+
"ui",
|
|
8
|
+
"components",
|
|
9
|
+
"tailwindcss",
|
|
10
|
+
"tailwind",
|
|
11
|
+
"design-system",
|
|
12
|
+
"accessibility"
|
|
13
|
+
],
|
|
5
14
|
"private": false,
|
|
6
|
-
"version": "1.0.0-alpha.
|
|
15
|
+
"version": "1.0.0-alpha.30",
|
|
7
16
|
"author": "Favour Emeka <favorodera@gmail.com>",
|
|
8
17
|
"license": "MIT",
|
|
9
18
|
"homepage": "https://centoui.vercel.app",
|
|
@@ -28,13 +37,13 @@
|
|
|
28
37
|
"centoui": "./bin/centoui.js"
|
|
29
38
|
},
|
|
30
39
|
"dependencies": {
|
|
31
|
-
"centoui-cli": "1.0.0-alpha.
|
|
40
|
+
"centoui-cli": "1.0.0-alpha.30"
|
|
32
41
|
},
|
|
33
42
|
"devDependencies": {
|
|
34
43
|
"@clack/prompts": "^1.2.0",
|
|
35
44
|
"@nuxt/icon": "2.2.2",
|
|
36
45
|
"@types/fs-extra": "^11.0.4",
|
|
37
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
46
|
+
"@vitejs/plugin-vue": "^6.0.6",
|
|
38
47
|
"@vitest/ui": "^4.1.5",
|
|
39
48
|
"@vue/test-utils": "^2.4.8",
|
|
40
49
|
"fs-extra": "^11.3.4",
|
|
@@ -42,19 +51,19 @@
|
|
|
42
51
|
"pathe": "^2.0.3",
|
|
43
52
|
"tsdown": "^0.21.7",
|
|
44
53
|
"tsx": "^4.21.0",
|
|
45
|
-
"vite": "^8.0.
|
|
54
|
+
"vite": "^8.0.8",
|
|
46
55
|
"vitest": "^4.1.2",
|
|
47
56
|
"vitest-axe": "^0.1.0",
|
|
48
|
-
"vue": "^3.5.
|
|
57
|
+
"vue": "^3.5.34",
|
|
49
58
|
"vue-tsc": "^3.2.6",
|
|
50
|
-
"@iconify/vue": "^5.0.
|
|
59
|
+
"@iconify/vue": "^5.0.1",
|
|
51
60
|
"@tailwindcss/vite": "^4.3.0",
|
|
52
61
|
"tailwind-variants": "^3.2.2",
|
|
53
|
-
"tailwind-merge": "^3.
|
|
62
|
+
"tailwind-merge": "^3.6.0",
|
|
54
63
|
"tw-animate-css": "^1.4.0",
|
|
55
64
|
"tailwindcss": "^4.3.0",
|
|
56
|
-
"reka-ui": "^2.9.
|
|
57
|
-
"@vueuse/core": "^14.
|
|
65
|
+
"reka-ui": "^2.9.8",
|
|
66
|
+
"@vueuse/core": "^14.3.0"
|
|
58
67
|
},
|
|
59
68
|
"peerDependencies": {
|
|
60
69
|
"vue": "^3.5.0",
|