nextjs-slides 0.1.0 → 0.1.3

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.
Files changed (3) hide show
  1. package/README.md +65 -4
  2. package/dist/slides.css +2 -0
  3. package/package.json +8 -2
package/README.md CHANGED
@@ -10,8 +10,32 @@ Build full presentations from React components with URL-based routing, keyboard
10
10
  npm install nextjs-slides
11
11
  ```
12
12
 
13
+ ## Demo
14
+
15
+ **[Live demo →](https://nextjs-slides.vercel.app/)**
16
+
17
+ A minimal demo app lives in `examples/demo`. From the repo root:
18
+
19
+ ```bash
20
+ npm run build && cd examples/demo && npm install && npm run dev
21
+ ```
22
+
23
+ Open http://localhost:3000 and click "Open slides".
24
+
13
25
  Peer dependencies: `next >=15`, `react >=19`, `tailwindcss >=4`.
14
26
 
27
+ ### Enable View Transitions
28
+
29
+ Add to your `next.config.ts` (merge with existing config) for slide transition animations:
30
+
31
+ ```ts
32
+ const nextConfig = {
33
+ experimental: {
34
+ viewTransition: true,
35
+ },
36
+ };
37
+ ```
38
+
15
39
  ## Quick Start
16
40
 
17
41
  ### 1. Import the stylesheet
@@ -19,9 +43,14 @@ Peer dependencies: `next >=15`, `react >=19`, `tailwindcss >=4`.
19
43
  In your root layout or global CSS:
20
44
 
21
45
  ```css
46
+ @import "tailwindcss";
22
47
  @import "nextjs-slides/styles.css";
48
+
49
+ @source "../node_modules/nextjs-slides/dist";
23
50
  ```
24
51
 
52
+ The `@source` directive tells Tailwind v4 to scan the library for class names — without it, slide styles won't apply.
53
+
25
54
  ### 2. Define your slides
26
55
 
27
56
  ```tsx
@@ -53,8 +82,6 @@ console.log(greeting);`}</SlideCode>
53
82
 
54
83
  ```tsx
55
84
  // app/slides/layout.tsx
56
- "use client";
57
-
58
85
  import { SlideDeck } from "nextjs-slides";
59
86
  import { slides } from "./slides";
60
87
 
@@ -67,6 +94,8 @@ export default function SlidesLayout({
67
94
  }
68
95
  ```
69
96
 
97
+ `SlideDeck` is a client component, so your layout can stay a server component — no `"use client"` needed.
98
+
70
99
  ### 4. Add the routes
71
100
 
72
101
  ```tsx
@@ -171,14 +200,46 @@ app/slides/
171
200
  demo/page.tsx ← Breakout page (no deck chrome)
172
201
  ```
173
202
 
174
- ## Tailwind CSS
203
+ ## Styling & CSS
204
+
205
+ The library **inherits** your app's theme. Primitives use Tailwind utilities that resolve to CSS variables: `--foreground`, `--background`, `--muted-foreground`, `--primary`, `--primary-foreground`, `--border`, `--muted`. Compatible with shadcn/ui and any Tailwind v4 setup that defines these.
206
+
207
+ `nextjs-slides/styles.css` adds only code syntax highlighting (`--sh-*`) and slide transition animations. No scoping — slides inherit your global styles.
208
+
209
+ ### Geist fonts (optional)
175
210
 
176
- The primitives use Tailwind utility classes with standard CSS variable tokens (`--foreground`, `--background`, `--muted-foreground`, `--primary`, etc.). These are compatible with shadcn/ui themes or any Tailwind v4 setup that defines these variables.
211
+ Install `geist`, wire the fonts in your layout, and add the theme variables:
212
+
213
+ ```tsx
214
+ // app/layout.tsx
215
+ import { GeistSans } from "geist/font/sans";
216
+ import { GeistMono } from "geist/font/mono";
217
+ import { GeistPixelSquare } from "geist/font/pixel";
218
+
219
+ export default function RootLayout({ children }) {
220
+ return (
221
+ <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable}`}>
222
+ <body className={GeistSans.className}>{children}</body>
223
+ </html>
224
+ );
225
+ }
226
+ ```
227
+
228
+ ```css
229
+ /* globals.css @theme inline */
230
+ --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
231
+ --font-mono: var(--font-geist-mono), ui-monospace, monospace;
232
+ --font-pixel: var(--font-geist-pixel-square), var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
233
+ ```
234
+
235
+ Use `className="font-pixel"` on primitives where you want the pixel display font.
177
236
 
178
237
  ## Animations
179
238
 
180
239
  Slide transitions use the React 19 `<ViewTransition>` component with `addTransitionType()`. The CSS in `nextjs-slides/styles.css` defines the `::view-transition-*` animations. Override them in your own CSS to customize.
181
240
 
241
+ **Required:** Enable `experimental.viewTransition: true` in your Next.js config (see Install section above). Without it, transitions may not animate correctly.
242
+
182
243
  ## License
183
244
 
184
245
  MIT
package/dist/slides.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --sh-jsxliterals: #171717;
12
12
  --sh-sign: #666;
13
13
  --sh-comment: #666666;
14
+ --sh-space: #171717;
14
15
  }
15
16
 
16
17
  /* sugar-high code theme — dark */
@@ -24,6 +25,7 @@
24
25
  --sh-jsxliterals: #ededed;
25
26
  --sh-sign: #a1a1a1;
26
27
  --sh-comment: #a1a1a1;
28
+ --sh-space: #ededed;
27
29
  }
28
30
 
29
31
  /* Slide transition keyframes */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nextjs-slides",
3
- "version": "0.1.0",
3
+ "version": "0.1.3",
4
4
  "description": "Composable slide deck primitives for Next.js — powered by React 19 ViewTransitions, Tailwind CSS, and sugar-high syntax highlighting.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -20,6 +20,8 @@
20
20
  "scripts": {
21
21
  "build": "tsup",
22
22
  "dev": "tsup --watch",
23
+ "test": "vitest run",
24
+ "test:watch": "vitest",
23
25
  "typecheck": "tsc --noEmit",
24
26
  "prepublishOnly": "npm run build"
25
27
  },
@@ -35,13 +37,17 @@
35
37
  "tailwind-merge": "^3.5.0"
36
38
  },
37
39
  "devDependencies": {
40
+ "@testing-library/jest-dom": "^6.6.0",
41
+ "@testing-library/react": "^16.0.0",
38
42
  "@types/react": "^19",
39
43
  "@types/react-dom": "^19",
44
+ "jsdom": "^25.0.0",
40
45
  "next": "^16.0.0",
41
46
  "react": "^19.0.0",
42
47
  "react-dom": "^19.0.0",
43
48
  "tsup": "^8.4.0",
44
- "typescript": "^5"
49
+ "typescript": "^5",
50
+ "vitest": "^2.0.0"
45
51
  },
46
52
  "keywords": [
47
53
  "nextjs",