Petra is a free Nuxt.js and Tailwind CSS landing page template from Smuice.com, designed to showcase SaaS businesses and online services. It runs on the Nuxt.js framework and outputs a static, deployable site via the generate command.
What is Petra?
Petra is a single-page landing page template built with Nuxt.js and styled with Tailwind CSS. It takes a standard Nuxt.js project structure as input and produces a static, production-ready website in the dist folder when you run the generate command. The template is created and maintained by Smuice.com, and a live demo is available at smuice.com/demos/petra.
Key Features
- Nuxt.js framework — Built on Nuxt.js, enabling server-side rendering and static site generation through the included generate command.
- Tailwind CSS styling — Uses Tailwind CSS for utility-first styling, letting you customize the landing page design by editing classes directly.
- RTL support — Includes right-to-left layout support: add the dir="rtl" attribute to the main wrapper to serve Arabic, Hebrew, or other RTL languages.
- Free to use — Released for free, with the creators stating you can use it for whatever you want, including commercial projects.
- Simple setup — Requires npm install to install dependencies, npm run dev for local development, and npm run generate to build a static version into the dist folder.
- Live demo — A working demo is hosted at smuice.com/demos/petra for previewing the layout before installation.
- SaaS-focused design — The template is specifically designed for SaaS businesses and online services, with sections suited to feature highlights and calls to action.
Who is it for?
Petra suits developers, founders, and designers who need a clean landing page without starting from scratch.
- Startup founders — Launch a marketing site for a new SaaS or online service quickly, using the pre-built sections and styling.
- Front-end developers — Customize the Nuxt.js and Tailwind CSS codebase to build a unique landing page with full control over markup and styles.
- Designers — Use Petra as a starting point for client projects, especially when RTL support is needed for Middle Eastern audiences.
What can you do with Petra?
- SaaS product launches: Create a landing page to announce a new software product, with sections for features and sign-up prompts.
- Online service showcases: Present a consulting, agency, or digital service with a professional, conversion-focused layout.
- RTL-friendly websites: Deploy a landing page in Arabic, Hebrew, or other right-to-left languages by toggling the dir attribute.
How does Petra work?
- Install dependencies with npm install.
- Run npm run dev to preview the site at http://localhost:3000.
- Edit the Nuxt.js components and Tailwind CSS classes to match your brand.
- Run npm run generate to build a static version into the dist folder, ready to deploy.
Pricing
Petra is completely free to download and use for personal or commercial projects. No license fees or attribution requirements are mentioned on the template page.
FAQ
Is Petra free to use?
Yes, Petra is a free landing page template. The creators state you can use it for whatever you want, and no payment or attribution is required.
Does Petra support RTL languages?
Yes, Petra includes built-in RTL support. To enable right-to-left layout, add the dir="rtl" attribute to the main wrapper of your application.
What tech stack does Petra use?
Petra is built on Nuxt.js, a Vue.js framework, and styled with Tailwind CSS. It supports static site generation via npm run generate, producing a dist folder for deployment.
How do I install Petra?
Run npm install to install dependencies, then npm run dev to start the development server at http://localhost:3000. For production, run npm run generate to build the static site to the dist folder.
Where can I see Petra in action?
A live demo is available at https://smuice.com/demos/petra.
