@ensolid/radix 0.0.1 → 0.0.2
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 +84 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# @ensolid/radix
|
|
2
|
+
|
|
3
|
+
A SolidJS port of [Radix UI Primitives](https://www.radix-ui.com/primitives).
|
|
4
|
+
|
|
5
|
+
Ensolid Radix is a library of unstyled, accessible UI primitives for SolidJS. It provides low-level components that handle the complex logic, accessibility, and state management of common UI patterns, allowing you to focus on your design and styles.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @ensolid/radix
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- ✅ **Accessibility**: Built-in support for ARIA attributes and keyboard interaction.
|
|
16
|
+
- ✅ **Unstyled**: Completely unstyled, giving you full control over the appearance.
|
|
17
|
+
- ✅ **Reactive**: Built with SolidJS's fine-grained reactivity.
|
|
18
|
+
- ✅ **SSR Support**: Fully compatible with server-side rendering.
|
|
19
|
+
- ✅ **Tree Shakeable**: Import only what you need to keep your bundle size small.
|
|
20
|
+
|
|
21
|
+
## Components
|
|
22
|
+
|
|
23
|
+
The following components are currently available:
|
|
24
|
+
|
|
25
|
+
- **Separator**
|
|
26
|
+
- **Label**
|
|
27
|
+
- **AspectRatio**
|
|
28
|
+
- **VisuallyHidden**
|
|
29
|
+
- **Checkbox**
|
|
30
|
+
- **Switch**
|
|
31
|
+
- **RadioGroup**
|
|
32
|
+
- **Select**
|
|
33
|
+
- **Slider**
|
|
34
|
+
- **Toggle**
|
|
35
|
+
- **ToggleGroup**
|
|
36
|
+
- **Tabs**
|
|
37
|
+
- **Accordion**
|
|
38
|
+
- **Collapsible**
|
|
39
|
+
- **ScrollArea**
|
|
40
|
+
- **Dialog**
|
|
41
|
+
- **AlertDialog**
|
|
42
|
+
- **Popover**
|
|
43
|
+
- **DropdownMenu**
|
|
44
|
+
- **Tooltip**
|
|
45
|
+
- **HoverCard**
|
|
46
|
+
- **ContextMenu**
|
|
47
|
+
- **Menubar**
|
|
48
|
+
- **Progress**
|
|
49
|
+
- **Avatar**
|
|
50
|
+
|
|
51
|
+
## Usage Example
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { Dialog } from "@ensolid/radix";
|
|
55
|
+
|
|
56
|
+
function App() {
|
|
57
|
+
return (
|
|
58
|
+
<Dialog>
|
|
59
|
+
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
|
|
60
|
+
<Dialog.Content>
|
|
61
|
+
<Dialog.Title>Title</Dialog.Title>
|
|
62
|
+
<Dialog.Description>Description</Dialog.Description>
|
|
63
|
+
<Dialog.Close>Close</Dialog.Close>
|
|
64
|
+
</Dialog.Content>
|
|
65
|
+
</Dialog>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### The `asChild` Property
|
|
71
|
+
|
|
72
|
+
Radix UI components use the `asChild` property to allow you to pass functionality to your own components.
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
<Dialog.Trigger asChild>
|
|
76
|
+
<button class="your-custom-class">Open</button>
|
|
77
|
+
</Dialog.Trigger>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
**Note**: Only Radix component `Trigger` subcomponents support `asChild`.
|
|
81
|
+
|
|
82
|
+
## License
|
|
83
|
+
|
|
84
|
+
MIT
|