yaxa-svelte 1.0.0 → 1.0.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 +40 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,17 +31,43 @@ _Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2.7+ & Svelte 5 with Built-in
|
|
|
31
31
|
|
|
32
32
|
---
|
|
33
33
|
|
|
34
|
-
## 📦 Quickstart
|
|
34
|
+
## 📦 Quickstart
|
|
35
35
|
|
|
36
|
-
### 1. Install
|
|
36
|
+
### 1. Install Dependencies
|
|
37
|
+
|
|
38
|
+
Install `yaxa-svelte` along with Tailwind CSS v4 and icon tooling:
|
|
37
39
|
|
|
38
40
|
```bash
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
# Core package
|
|
42
|
+
pnpm add yaxa-svelte
|
|
43
|
+
|
|
44
|
+
# Tailwind CSS v4 & Icon tooling (Dev Dependencies)
|
|
45
|
+
pnpm add -D tailwindcss @tailwindcss/vite @tailwindcss/typography unplugin-icons @iconify/json
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
_(Optional full-stack SaaS features: `pnpm add better-auth drizzle-orm @polar-sh/sdk resend`)_
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
### 2. Configure `vite.config.ts`
|
|
53
|
+
|
|
54
|
+
Add Tailwind CSS and Unplugin Icons to your Vite plugins:
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
// vite.config.ts
|
|
58
|
+
import { sveltekit } from '@sveltejs/kit/vite';
|
|
59
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
60
|
+
import Icons from 'unplugin-icons/vite';
|
|
61
|
+
import { defineConfig } from 'vite';
|
|
62
|
+
|
|
63
|
+
export default defineConfig({
|
|
64
|
+
plugins: [tailwindcss(), Icons({ compiler: 'svelte', autoInstall: false }), sveltekit()]
|
|
65
|
+
});
|
|
42
66
|
```
|
|
43
67
|
|
|
44
|
-
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
### 3. Define Your Site Configuration
|
|
45
71
|
|
|
46
72
|
Create `src/site.config.ts` — your single source of truth for branding, metadata, and SEO:
|
|
47
73
|
|
|
@@ -55,7 +81,8 @@ export const siteConfig = defineSiteConfig({
|
|
|
55
81
|
description: 'Fast, beautiful, accessible web applications.',
|
|
56
82
|
url: 'https://my-app.com',
|
|
57
83
|
theme: {
|
|
58
|
-
|
|
84
|
+
accent: 'svelte', // 'svelte' | 'emerald' | 'amber' | 'sky' | 'violet' | 'rose' | 'indigo'
|
|
85
|
+
neutral: 'zinc', // 'zinc' | 'slate' | 'stone' | 'neutral'
|
|
59
86
|
defaultMode: 'dark'
|
|
60
87
|
},
|
|
61
88
|
socials: {
|
|
@@ -65,11 +92,16 @@ export const siteConfig = defineSiteConfig({
|
|
|
65
92
|
});
|
|
66
93
|
```
|
|
67
94
|
|
|
68
|
-
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
### 4. Import CSS & Wrap Root Layout
|
|
98
|
+
|
|
99
|
+
Import `yaxa-svelte/yaxa.css` and wrap your app in `<YaxaApp>`:
|
|
69
100
|
|
|
70
101
|
```svelte
|
|
71
102
|
<!-- src/routes/+layout.svelte -->
|
|
72
103
|
<script lang="ts">
|
|
104
|
+
import 'yaxa-svelte/yaxa.css';
|
|
73
105
|
import { YaxaApp } from 'yaxa-svelte';
|
|
74
106
|
import { siteConfig } from '../site.config';
|
|
75
107
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "yaxa-svelte",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "The Intuitive Svelte UI Library — Nuxt UI v4 equivalent for SvelteKit 2.7+ & Svelte 5 with automated SEO, dynamic OpenGraph cards, sitemaps, robots.txt, and Tailwind CSS v4.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://yaxa.vercel.app",
|