rocksolidjs 0.1.0 → 0.1.1
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 +90 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# RockSolid
|
|
2
|
+
|
|
3
|
+
RockSolid is a modern UI component library built with **SolidJS** and **Tailwind CSS**
|
|
4
|
+
|
|
5
|
+
It provides accessible, customizable, and reusable components for building modern web applications.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- Built with SolidJS
|
|
10
|
+
- Styled with Tailwind CSS
|
|
11
|
+
- Accessible components
|
|
12
|
+
- Themeable design system
|
|
13
|
+
- Dark mode support
|
|
14
|
+
- TypeScript support
|
|
15
|
+
- Customizable theme tokens
|
|
16
|
+
|
|
17
|
+
## Prerequisites
|
|
18
|
+
|
|
19
|
+
Before installing RockSolid, make sure your project has the following dependencies installed:
|
|
20
|
+
|
|
21
|
+
- SolidJS
|
|
22
|
+
- Tailwind CSS
|
|
23
|
+
- Tailwind Variants
|
|
24
|
+
|
|
25
|
+
If you are starting a new SolidJS project, set up SolidJS and Tailwind CSS first.
|
|
26
|
+
|
|
27
|
+
Install the required dependencies:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install solid-js tailwindcss tailwind-variants
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Installation
|
|
34
|
+
|
|
35
|
+
Once the prerequisites are installed, install RockSolid:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install rocksolidjs
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Setup
|
|
42
|
+
|
|
43
|
+
Import the RockSolid stylesheet into your application's global CSS file:
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
@import "tailwindcss";
|
|
47
|
+
@import "rocksolidjs/index.css";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Make sure Tailwind CSS is configured in your project.
|
|
51
|
+
|
|
52
|
+
## Usage
|
|
53
|
+
|
|
54
|
+
Import components from RockSolid and use them in your SolidJS application:
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import Button from "rocksolidjs/Button";
|
|
58
|
+
|
|
59
|
+
export default function App() {
|
|
60
|
+
return (
|
|
61
|
+
<Button>
|
|
62
|
+
Click me
|
|
63
|
+
</Button>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Accessibility
|
|
69
|
+
|
|
70
|
+
RockSolid is designed with accessibility in mind.
|
|
71
|
+
|
|
72
|
+
Components follow common accessibility practices, including:
|
|
73
|
+
|
|
74
|
+
- Semantic HTML
|
|
75
|
+
- Keyboard navigation
|
|
76
|
+
- Visible focus states
|
|
77
|
+
- Accessible interaction patterns
|
|
78
|
+
- Appropriate ARIA attributes where required
|
|
79
|
+
|
|
80
|
+
## TypeScript
|
|
81
|
+
|
|
82
|
+
RockSolid is written in TypeScript and provides type definitions for components, theme configuration, and APIs.
|
|
83
|
+
|
|
84
|
+
## Documentation
|
|
85
|
+
|
|
86
|
+
For detailed information about components, theming, accessibility, and customization, see the RockSolid documentation.
|
|
87
|
+
|
|
88
|
+
## License
|
|
89
|
+
|
|
90
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rocksolidjs",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.1",
|
|
5
5
|
"description": "A modern, accessible component library built with SolidJS and Tailwind CSS.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"solid",
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"release": "npm run build && changeset publish"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
+
"@changesets/changelog-github": "^1.0.1",
|
|
40
41
|
"@changesets/cli": "^3.0.2",
|
|
41
42
|
"@tailwindcss/vite": "^4.3.3",
|
|
42
43
|
"@types/node": "^24.13.3",
|