@capitaltg/vero 1.4.2 → 1.4.3
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 +72 -43
- package/dist/index.cjs +45 -40
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1959 -1939
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,54 +1,83 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Vero - React Component Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Accessible, modern, open source React component library inspired by USWDS built with Radix UI.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
7
|
+
- 🎨 **Modern Design**: Clean, professional components inspired by USWDS
|
|
8
|
+
- ♿ **Accessible**: Built with accessibility in mind using Radix UI primitives
|
|
9
|
+
- 🎯 **TypeScript**: Full TypeScript support with comprehensive type definitions
|
|
10
|
+
- 🎨 **Customizable**: Easily themeable with CSS custom properties
|
|
11
|
+
- 📱 **Responsive**: Mobile-first design approach
|
|
12
|
+
- ⚡ **Performance**: Optimized for speed and bundle size
|
|
9
13
|
|
|
10
|
-
##
|
|
14
|
+
## React Compatibility
|
|
11
15
|
|
|
12
|
-
|
|
16
|
+
Vero supports both React 18 and React 19:
|
|
13
17
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
// other options...
|
|
26
|
-
parserOptions: {
|
|
27
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
28
|
-
tsconfigRootDir: import.meta.dirname,
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
});
|
|
18
|
+
- **React 18.2.0+**: Full support with all features
|
|
19
|
+
- **React 19.0.0+**: Full support with all features
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @capitaltg/vero
|
|
25
|
+
# or
|
|
26
|
+
yarn add @capitaltg/vero
|
|
27
|
+
# or
|
|
28
|
+
pnpm add @capitaltg/vero
|
|
32
29
|
```
|
|
33
30
|
|
|
34
|
-
|
|
31
|
+
## Quick Start
|
|
32
|
+
|
|
33
|
+
1. Install the package and its peer dependencies:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm install @capitaltg/vero react react-dom tailwindcss tailwindcss-animate
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
2. Import the CSS in your main CSS file:
|
|
40
|
+
|
|
41
|
+
```css
|
|
42
|
+
@import '@capitaltg/vero/index.css';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
3. Configure Tailwind CSS by extending your `tailwind.config.js`:
|
|
35
46
|
|
|
36
47
|
```js
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
// Add the react-x and react-dom plugins
|
|
44
|
-
'react-x': reactX,
|
|
45
|
-
'react-dom': reactDom,
|
|
46
|
-
},
|
|
47
|
-
rules: {
|
|
48
|
-
// other rules...
|
|
49
|
-
// Enable its recommended typescript rules
|
|
50
|
-
...reactX.configs['recommended-typescript'].rules,
|
|
51
|
-
...reactDom.configs.recommended.rules,
|
|
52
|
-
},
|
|
53
|
-
});
|
|
48
|
+
import veroConfig from '@capitaltg/vero/tailwind.config.js';
|
|
49
|
+
|
|
50
|
+
export default {
|
|
51
|
+
...veroConfig,
|
|
52
|
+
content: [...veroConfig.content, './src/**/*.{js,ts,jsx,tsx}'],
|
|
53
|
+
};
|
|
54
54
|
```
|
|
55
|
+
|
|
56
|
+
4. Start using components:
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { Button, Input, FormItem } from '@capitaltg/vero';
|
|
60
|
+
|
|
61
|
+
function App() {
|
|
62
|
+
return (
|
|
63
|
+
<div>
|
|
64
|
+
<FormItem label="Email" hintText="Enter your email address">
|
|
65
|
+
<Input type="email" placeholder="you@example.com" />
|
|
66
|
+
</FormItem>
|
|
67
|
+
<Button variant="primary">Submit</Button>
|
|
68
|
+
</div>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Documentation
|
|
74
|
+
|
|
75
|
+
Visit our [Storybook documentation](https://capitaltg.github.io/vero/) to explore all available components and their usage examples.
|
|
76
|
+
|
|
77
|
+
## Contributing
|
|
78
|
+
|
|
79
|
+
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
80
|
+
|
|
81
|
+
## License
|
|
82
|
+
|
|
83
|
+
MIT © [Capital Technology Group](https://github.com/capitaltg)
|