@hintoric/ui 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 +62 -0
- package/package.json +8 -1
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.hintoric.com/assets/logo/ui/white.svg" />
|
|
4
|
+
<source media="(prefers-color-scheme: light)" srcset="https://cdn.hintoric.com/assets/logo/ui/black.svg" />
|
|
5
|
+
<img src="https://cdn.hintoric.com/assets/logo/ui/black.svg" alt="hintoric/ui" width="360" />
|
|
6
|
+
</picture>
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
A React component library. It uses <a href="https://base-ui.com">Base UI</a> for behavior and Tailwind CSS for styling.
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
## What this is
|
|
14
|
+
|
|
15
|
+
`@hintoric/ui` is a set of production-ready React components: buttons, inputs, cards, tables,
|
|
16
|
+
tabs, and more. Every component uses the same `variant`, `color`, and `size` system.
|
|
17
|
+
|
|
18
|
+
[Base UI](https://base-ui.com) provides behavior and accessibility. Tailwind CSS v4 provides the
|
|
19
|
+
styles. The library has no CSS-in-JS runtime.
|
|
20
|
+
|
|
21
|
+
Users of [MUI Joy UI](https://mui.com/joy-ui/) will find familiar names and props: `variant`,
|
|
22
|
+
`color`, `size`, `startDecorator`, `endDecorator`, and `component`. Existing Joy UI code needs only
|
|
23
|
+
small changes to work with this library. This library is not a copy of Joy UI — the internal code
|
|
24
|
+
is entirely our own.
|
|
25
|
+
|
|
26
|
+
## Install
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install @hintoric/ui
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
The package ships a pre-built stylesheet — no Tailwind setup is required in your app. Import it
|
|
33
|
+
once, near the root of your project:
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import '@hintoric/ui/styles.css';
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import { Button, Input, Card } from '@hintoric/ui';
|
|
43
|
+
|
|
44
|
+
function Example() {
|
|
45
|
+
return (
|
|
46
|
+
<Card variant="outlined" color="neutral">
|
|
47
|
+
<Input placeholder="Name" />
|
|
48
|
+
<Button variant="solid" color="primary">
|
|
49
|
+
Submit
|
|
50
|
+
</Button>
|
|
51
|
+
</Card>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Docs
|
|
57
|
+
|
|
58
|
+
Full component reference, live examples, and the roadmap: [ui.hintoric.dev](https://ui.hintoric.dev)
|
|
59
|
+
|
|
60
|
+
## License
|
|
61
|
+
|
|
62
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hintoric/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Joy UI's look and API, built on Base UI and Tailwind CSS.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
|
+
"homepage": "https://ui.hintoric.dev",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/hintoric/ui.git",
|
|
11
|
+
"directory": "packages/ui"
|
|
12
|
+
},
|
|
13
|
+
"bugs": "https://github.com/hintoric/ui/issues",
|
|
7
14
|
"sideEffects": [
|
|
8
15
|
"**/*.css"
|
|
9
16
|
],
|