defuss-shadcn 0.2.0
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 +64 -0
- package/dist/index.cjs +5019 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +409 -0
- package/dist/index.d.mts +409 -0
- package/dist/index.mjs +4904 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +61 -0
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<h1 align="center">
|
|
2
|
+
|
|
3
|
+
<img src="https://github.com/kyr0/defuss/blob/main/assets/defuss_mascott.png?raw=true" width="100px" />
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
|
|
7
|
+
<code>defuss-shadcn</code>
|
|
8
|
+
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<sup align="center">
|
|
12
|
+
|
|
13
|
+
A modern Shadcn-like component library for defuss that build on Tailwind 4 and Basecoat UI.
|
|
14
|
+
|
|
15
|
+
</sup>
|
|
16
|
+
|
|
17
|
+
</h1>
|
|
18
|
+
|
|
19
|
+
<h3 align="center">
|
|
20
|
+
Overview
|
|
21
|
+
</h3>
|
|
22
|
+
|
|
23
|
+
`defuss-shadcn` is a modern UI component library for web apps that suits defuss perfectly. It builds on Tailwind CSS 4 and Basecoat UI. It provides a set of reusable, customizable, and accessible UI components that can be easily integrated into your defuss projects.
|
|
24
|
+
|
|
25
|
+
<h3 align="center">
|
|
26
|
+
Installation
|
|
27
|
+
</h3>
|
|
28
|
+
|
|
29
|
+
As a prerequisite, you need to set-up Tailwind CSS and Franken UI in your defuss project. Please refer to the official documentation of Tailwind CSS and [Basecoat](https://basecoatui.com).
|
|
30
|
+
|
|
31
|
+
Install `defuss-shadcn` via npm or yarn:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
pnpm install defuss-shadcn
|
|
35
|
+
# or
|
|
36
|
+
npm install defuss-shadcn
|
|
37
|
+
# or
|
|
38
|
+
yarn add defuss-shadcn
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
<h3 align="center">
|
|
42
|
+
Usage
|
|
43
|
+
</h3>
|
|
44
|
+
|
|
45
|
+
You can import and use the components from `defuss-shadcn` in your defuss project as follows:
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import { Button } from "defuss-shadcn";
|
|
49
|
+
|
|
50
|
+
function App() {
|
|
51
|
+
return (
|
|
52
|
+
<Button onClick={() => alert("Button clicked!")}>Click Me</Button>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
<p align="center">
|
|
58
|
+
|
|
59
|
+
<img src="https://raw.githubusercontent.com/kyr0/defuss/refs/heads/main/assets/defuss_comic.png" width="400px" />
|
|
60
|
+
|
|
61
|
+
</p>
|
|
62
|
+
|
|
63
|
+
<p align="center">
|
|
64
|
+
<i><b>Come visit us on <code>defuss</code>
|