--- title: "Build pages from blocks · Sanity × Nuxt UI" description: "A block-based website builder with Sanity Studio and Nuxt UI." canonical_url: "https://sanity-nuxtui.vercel.app/" meta: "og:description": "A block-based website builder with Sanity Studio and Nuxt UI." "og:image": "https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Build%2Bpages%2Bfrom%2Bblocks%2Cdescription_A%2Bblock-based%2Bwebsite%2Bbuilder%2Bwith%2BSanity%2BStudio%2Band%2BNuxt%2BUI.%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cs_DlhKPAG6l_-NxV6R.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Build pages from blocks · Sanity × Nuxt UI" "twitter:image": "https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Build%2Bpages%2Bfrom%2Bblocks%2Cdescription_A%2Bblock-based%2Bwebsite%2Bbuilder%2Bwith%2BSanity%2BStudio%2Band%2BNuxt%2BUI.%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cs_DlhKPAG6l_-NxV6R.png" --- > Index of every page on this site: [llms.txt](https://sanity-nuxtui.vercel.app/llms.txt) Sanity × Nuxt UI # Build pages from blocks, without touching code Editors arrange heroes, features, pricing and FAQs in Sanity Studio. Nuxt UI renders every block as an accessible, responsive component. [Read the guide](https://sanity-nuxtui.vercel.app/docs/introduction) [View on GitHub](https://github.com/narr07/sanity-nuxtui) ![Person working on a laptop](https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?w=1024&h=682&auto=format) ## **Built with** 03Features ## **One block in Sanity, one component in Nuxt** Every block has its own schema and maps to a Nuxt UI component through a typed registry. - 13 ready-made blocks Hero, features, cards, timeline, gallery, pricing, FAQ, collection lists and more. - Type-safe TypeGen generates types from your schema and GROQ queries. - Visual Editing Click text in the preview to open its field in Studio. - Dark mode Semantic Nuxt UI colors adapt to the theme automatically. - Responsive images srcset from the Sanity image CDN, with hotspot and crop. - SEO built in Sitemap, robots, social images and schema.org via Nuxt SEO. 04Content types ## **Pages and collections** Flexible pages for one-off layouts, collections for everything that repeats. Editors can create new collections in the Studio. Pages Compose any layout from blocks. The page with slug "home" is your homepage. [Pages](https://sanity-nuxtui.vercel.app/about) Blog A collection with the blog layout: dates, authors, tags and related posts. [Blog](https://sanity-nuxtui.vercel.app/blog) Projects A collection with the cards layout, manual order and key details per project. [Projects](https://sanity-nuxtui.vercel.app/projects) Gallery A collection with the gallery layout. Upload photos in bulk and get a lightbox. [Gallery](https://sanity-nuxtui.vercel.app/gallery) 05Work ## **Selected projects** Northwind rebrand A new identity and a block-based marketing site that the in-house team now updates on their own. brandingwebsite ![Photo by Joseph Barrientos](https://cdn.sanity.io/images/kdwtvkc2/production/5c12dc78fc3c8fcbaee72aeeeb0e7b7d50a3fa47-1600x1067.jpg?w=676&h=452&auto=format) [Northwind rebrand](https://sanity-nuxtui.vercel.app/projects/northwind-rebrand) Field notes app An offline-first notebook for researchers, with structured content synced to Sanity. appcontent-model ![Photo by Nadir Balcikli](https://cdn.sanity.io/images/kdwtvkc2/production/d3ff1682af8a342f78f482eaa0c4574dada7d3e0-1600x1067.jpg?w=676&h=452&auto=format) [Field notes app](https://sanity-nuxtui.vercel.app/projects/field-notes) Harbor photo archive Ten thousand historical photos, tagged and searchable, with a public gallery built from collections. archivewebsite ![Photo by Jay Ruzesky](https://cdn.sanity.io/images/kdwtvkc2/production/2c51e3a4cab7ddea412dc33f31fd253479bbba08-1600x1067.jpg?w=676&h=452&auto=format) [Harbor photo archive](https://sanity-nuxtui.vercel.app/projects/harbor-archive) [All projects](https://sanity-nuxtui.vercel.app/projects) 06Blog ## **Latest posts** This block always shows the newest entries of a collection. ![Laptop and notebook on a desk](https://cdn.sanity.io/images/kdwtvkc2/production/ae96f58c01fdb1cefac7d0aa96b01e36bde32af9-1600x1067.jpg?w=676&h=380&fit=crop&auto=format) guideOct 12, 2026 ## Create a new section without code Blog, Gallery and Projects are all collections. Editors can add new ones, such as Services or Team, straight from the Studio. **AM** **Ada Morgan** Editor ![Laptop on a desk](https://cdn.sanity.io/images/kdwtvkc2/production/968d3f7c1d70f1f84af4b4ee50ab9eef07803bea-1600x1067.jpg?w=676&h=380&fit=crop&auto=format) guideOct 10, 2026 ## Getting started with Sanity × Nuxt UI Connect the template to your Sanity project, import the example content and run Studio and the site side by side. **AM** **Ada Morgan** Editor ![Person working on a laptop](https://cdn.sanity.io/images/kdwtvkc2/production/3c5959bf9dc0555105bc0bcb466cd95a1608141a-1600x1067.jpg?w=676&h=380&fit=crop&auto=format) guideOct 6, 2026 ## How to add a new block Any Nuxt UI component can become a block. It takes a schema, one Vue component and one line in the registry. **LH** **Leo Hart** Frontend Engineer [All posts](https://sanity-nuxtui.vercel.app/blog) 07Gallery ## **Recent galleries** [![Photo by Go Wild](https://cdn.sanity.io/images/kdwtvkc2/production/79ff55390ca2ec8d47b4dff66cad28734d35fa4d-1600x1067.jpg?w=676&h=452&auto=format)](https://sanity-nuxtui.vercel.app/gallery/mountains) [![Photo by Alejandro Escamilla](https://cdn.sanity.io/images/kdwtvkc2/production/968d3f7c1d70f1f84af4b4ee50ab9eef07803bea-1600x1067.jpg?w=676&h=452&auto=format)](https://sanity-nuxtui.vercel.app/gallery/workspace) [![Photo by sergee bee](https://cdn.sanity.io/images/kdwtvkc2/production/f8dc2d70267d3b2753eefee9d7cb4a4029e32dea-1600x1067.jpg?w=676&h=452&auto=format)](https://sanity-nuxtui.vercel.app/gallery/on-the-road) [All galleries](https://sanity-nuxtui.vercel.app/gallery) 08Testimonials ## **What people say** Our content team now ships landing pages on their own. Developers only add a block when a new layout is needed. **MC** **Maya Chen** Head of Content Generated types mean a schema change shows up as a type error in the component, not a bug in production. **TB** **Tom Becker** Frontend Engineer The live preview in Presentation saves us a lot of back and forth. **SL** **Sara Lind** Product Designer 09FAQ ## **Frequently asked questions** ## **Ready to build your first page?** Open Studio, create a page and start adding blocks. [Open Studio](http://localhost:3333) [See pricing](https://sanity-nuxtui.vercel.app/pricing) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://sanity-nuxtui.vercel.app/#website","@type":"WebSite","name":"Sanity × Nuxt UI","url":"https://sanity-nuxtui.vercel.app/","publisher":{"@id":"https://sanity-nuxtui.vercel.app/#identity"}},{"@id":"https://sanity-nuxtui.vercel.app/#webpage","@type":"WebPage","description":"A block-based website builder with Sanity Studio and Nuxt UI.","name":"Build pages from blocks","url":"https://sanity-nuxtui.vercel.app/","about":{"@id":"https://sanity-nuxtui.vercel.app/#identity"},"isPartOf":{"@id":"https://sanity-nuxtui.vercel.app/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://sanity-nuxtui.vercel.app/"]}]},{"@id":"https://sanity-nuxtui.vercel.app/#identity","@type":"Organization","name":"Sanity × Nuxt UI","url":"https://sanity-nuxtui.vercel.app"}]} ``` ## Sitemap See the full [sitemap](https://sanity-nuxtui.vercel.app/sitemap.md) for all pages.