Export · React
React, Tailwind v4, shadcn/ui: the design as components
The React export delivers every section as a TSX component and the design tokens as a Tailwind v4 theme. The shadcn/ui variables point at the same tokens, so shadcn buttons, dialogs and forms appear in the look of the design straight away.
It suits you if you already work in Next.js or Vite, or keep building with tools like v0, Bolt or Lovable: the components also come as a shadcn registry.
See the designsOne design €59 one-off, every export included.
Designs with this export
20 designs were built with the React export before going into the gallery. The licence covers every export of the same design.
-
10 pagesLCP 1.6 sBFSG check, no errors
-
10 pagesLCP 2.2 sBFSG check, no errors
-
10 pagesLCP 2.0 sBFSG check, no errors
-
12 pagesLCP 1.9 sBFSG check, no errors
-
10 pagesLCP 1.9 sBFSG check, no errors
-
10 pagesLCP 1.6 sBFSG check, no errors
-
10 pagesLCP 2.0 sBFSG check, no errors
-
9 pagesLCP 2.4 s
-
9 pagesLCP 1.6 sBFSG check, no errors
What you get
- Components
- TSX per section, pages composed from those components.
- Tailwind v4
- An @theme built from the tokens, Tailwind defaults reset.
- shadcn/ui
- shadcn variables as aliases of the tokens, plus registry.json for the components.
- Preview
- npm run preview renders the pages so you can check them.
How it goes live
- Unpack the React export.
- For Next.js, move the components and the theme into your app directory; for Vite, start the project as it is.
- Check with npm run preview that everything looks like the original.
- Fill content through props or your CMS and deploy as usual.
What is not included
Routing, data fetching and the form backend come from your framework; the export supplies the interface and tokens.
One design, your stack
- AstroSection components with typed props, content collections, a base layout with CSP. Builds as a static site.
- HTMLEvery page as HTML and CSS, legal page stubs, 404, sitemap and security headers. No build step.
- WordPresstheme.json v3, one pattern per section with core blocks, templates and parts, as a ZIP to upload.
- ElementorHello Elementor child theme with self-hosted fonts and tokens, a kit with global colours and fonts. Design layer only.
Related
Questions
Is it a finished Next.js project?
No, a React package you use in Next.js, Vite or another setup. For Next.js you take the components into your app directory.
Do I have to use shadcn/ui?
No. The variables do no harm if you do not use shadcn.