sve-ui 0.2.0 → 0.2.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 +126 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# Sve·UI
|
|
4
|
+
|
|
5
|
+
**Styled, accessible Svelte 5 components — zero config.**
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/sve-ui)
|
|
8
|
+
[](https://github.com/rodriabregu/sve-ui/blob/main/LICENSE)
|
|
9
|
+
[](https://svelte.dev)
|
|
10
|
+
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
A library of ready-made, fully **styled** and fully **accessible** Svelte 5
|
|
14
|
+
components, built on [Bits UI](https://bits-ui.com). The wedge: it needs **no
|
|
15
|
+
Tailwind and no config** in your project. Install, import the stylesheet once,
|
|
16
|
+
and use — then theme everything with CSS custom properties.
|
|
17
|
+
|
|
18
|
+
```sh
|
|
19
|
+
pnpm add sve-ui
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Why Sve·UI
|
|
23
|
+
|
|
24
|
+
- **No Tailwind, no config** — styles ship with the package. No `tailwind.config`,
|
|
25
|
+
no PostCSS, no utility classes in your app.
|
|
26
|
+
- **Accessible by default** — overlays are built on Bits UI: WAI-ARIA, focus traps,
|
|
27
|
+
keyboard navigation.
|
|
28
|
+
- **Themeable** — every color, radius and spacing value is a `--sve-*` CSS variable.
|
|
29
|
+
Light and dark out of the box.
|
|
30
|
+
- **Svelte 5 + runes** — modern, typed, tree-shakeable, ships with provenance.
|
|
31
|
+
|
|
32
|
+
## Quick start
|
|
33
|
+
|
|
34
|
+
Import the stylesheet once (e.g. in your root layout), then use the components:
|
|
35
|
+
|
|
36
|
+
```svelte
|
|
37
|
+
<script>
|
|
38
|
+
import 'sve-ui/theme.css';
|
|
39
|
+
import { Button } from 'sve-ui';
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<Button color="primary">Ship it</Button>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Wrap your app in `ThemeProvider` to control light/dark (optional — components work
|
|
46
|
+
without it):
|
|
47
|
+
|
|
48
|
+
```svelte
|
|
49
|
+
<script>
|
|
50
|
+
import { ThemeProvider, Button, Dialog } from 'sve-ui';
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<ThemeProvider colorScheme="dark">
|
|
54
|
+
<Dialog.Root>
|
|
55
|
+
<Dialog.Trigger>
|
|
56
|
+
{#snippet child({ props })}
|
|
57
|
+
<Button {...props}>Open dialog</Button>
|
|
58
|
+
{/snippet}
|
|
59
|
+
</Dialog.Trigger>
|
|
60
|
+
<Dialog.Overlay />
|
|
61
|
+
<Dialog.Content>
|
|
62
|
+
<Dialog.Title>Delete project?</Dialog.Title>
|
|
63
|
+
<Dialog.Description>This action can't be undone.</Dialog.Description>
|
|
64
|
+
</Dialog.Content>
|
|
65
|
+
</Dialog.Root>
|
|
66
|
+
</ThemeProvider>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Components
|
|
70
|
+
|
|
71
|
+
**Display & form** — `Button`, `Input`, `Card`, `Badge`, `Avatar`, `Spinner`,
|
|
72
|
+
`Text`, `Heading`, `Alert`.
|
|
73
|
+
|
|
74
|
+
**Overlays** (on Bits UI) — `Dialog`, `DropdownMenu`, `Tooltip`, `Popover`.
|
|
75
|
+
|
|
76
|
+
Most components take `variant`, `color` and `size` props, e.g.:
|
|
77
|
+
|
|
78
|
+
```svelte
|
|
79
|
+
<Button variant="solid" color="primary">Primary</Button>
|
|
80
|
+
<Button variant="outline" color="danger">Danger</Button>
|
|
81
|
+
<Badge variant="subtle" color="success">Active</Badge>
|
|
82
|
+
<Input variant="outline" size="md" placeholder="you@example.com" bind:value />
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Overlays (`Dialog`, `DropdownMenu`, `Tooltip`, `Popover`, plus `Avatar`, `Card`,
|
|
86
|
+
`Alert`) are **namespaced** compositions — import the namespace and compose its
|
|
87
|
+
parts (`Dialog.Root`, `Dialog.Trigger`, `Dialog.Content`, …).
|
|
88
|
+
|
|
89
|
+
## Theming
|
|
90
|
+
|
|
91
|
+
All design tokens are CSS custom properties under `:root`, established by
|
|
92
|
+
`sve-ui/theme.css`. Override any of them to retheme — no rebuild, no config:
|
|
93
|
+
|
|
94
|
+
```css
|
|
95
|
+
:root {
|
|
96
|
+
--sve-color-primary: #8b5cf6;
|
|
97
|
+
--sve-radius-md: 0.5rem;
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Semantic color roles (`primary`, `secondary`, `success`, `warning`, `danger`,
|
|
102
|
+
`default`) each expose `…-foreground`, `…-surface`, `…-border`, `…-hover` and
|
|
103
|
+
`…-active` variants. Light and dark are both included; `ThemeProvider` toggles
|
|
104
|
+
the scheme via a `colorScheme` prop (`"light" | "dark" | "system"`) and can apply
|
|
105
|
+
per-subtree token overrides via its `theme` prop.
|
|
106
|
+
|
|
107
|
+
## Package exports
|
|
108
|
+
|
|
109
|
+
| Import | What |
|
|
110
|
+
| ------------------ | ------------------------------------------------------------------ |
|
|
111
|
+
| `sve-ui` | All components, `ThemeProvider`, variant helpers and types |
|
|
112
|
+
| `sve-ui/theme` | Token maps and theming utilities (`lightTokens`, `themeToVars`, …) |
|
|
113
|
+
| `sve-ui/theme.css` | The stylesheet that registers all `--sve-*` variables |
|
|
114
|
+
|
|
115
|
+
## Requirements
|
|
116
|
+
|
|
117
|
+
- Svelte `^5` (peer dependency)
|
|
118
|
+
|
|
119
|
+
## Links
|
|
120
|
+
|
|
121
|
+
- Docs: [sveui.org](https://sveui.org)
|
|
122
|
+
- Source: [github.com/rodriabregu/sve-ui](https://github.com/rodriabregu/sve-ui)
|
|
123
|
+
|
|
124
|
+
## License
|
|
125
|
+
|
|
126
|
+
[MIT](https://github.com/rodriabregu/sve-ui/blob/main/LICENSE) © Rodrigo Abregu
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sve-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"description": "
|
|
5
|
+
"description": "Styled, accessible Svelte 5 components built on Bits UI. No Tailwind, no config — install, import, and theme with CSS variables. Light and dark out of the box.",
|
|
6
6
|
"author": "Rodrigo Abregu <me@rodriab.io> (https://rodriab.io/)",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"homepage": "https://sveui.org/",
|