{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"complete-shelf-landing-page","type":"registry:item","title":"Complete Shelf","description":"The complete Working Volumes bookshelf page with all seven tools, its responsive editorial interface, and authored Three.js presentation.","files":[{"path":"snippets/complete-shelf-landing-page.tsx","content":"import { CompleteShelfLandingPage } from \"@designcodeio/threeui\";\nimport \"@designcodeio/threeui/style.css\";\n\n// The component fills its parent, so the parent is what gives it a size.\nexport function CompleteShelfLandingPageExample() {\n  return (\n    <div style={{ width: \"100%\", height: 720 }}>\n      <CompleteShelfLandingPage />\n    </div>\n  );\n}\n","type":"registry:file","target":"~/snippets/complete-shelf-landing-page.tsx"}],"docs":"## Files to copy\n\nThe page is loaded from `/landing-pages/complete-shelf-v2.html` on your own domain, so\nthat file has to be somewhere the app serves static files from: `public/` in Vite and\nNext, `static/` in SvelteKit.\n\n```bash\ncp -R node_modules/@designcodeio/threeui/lib-dist/assets/landing-pages public/\n```\n\nWithout it the component renders an empty box.\n\n## Size\n\nThe component is 100% of its parent's width and height and has no size of its own, so a\nparent with no height renders nothing. A box around 720px tall suits a full page like\nthis one.\n\n## Props\n\nAll optional. The defaults below are what the snippet renders.\n\n| Prop                   | Values                                                       | Default           |\n| ---------------------- | ------------------------------------------------------------ | ----------------- |\n| `headingFont`          | `iowan-old-style`, `instrument-serif`, `newsreader`, `geist` | `iowan-old-style` |\n| `bodyFont`             | `inter`, `geist`, `newsreader`, `instrument-serif`           | `inter`           |\n| `headingWeight`        | `400`, `500`, `600`                                          | `400`             |\n| `bodyWeight`           | `400`, `500`, `600`                                          | `400`             |\n| `primaryColor`         | a hex color                                                  | `#c87046`         |\n| `headingSize`          | 32 to 88                                                     | `60`              |\n| `bodySize`             | 10 to 18                                                     | `12`              |\n| `headingLetterSpacing` | -0.1 to 0.08                                                 | `-0.055`          |\n\n`className` and `style` pass through to the root element.\n","author":"mengto","dependencies":["@designcodeio/threeui"]}