Templates

Templates give you a head start. Instead of building from scratch, begin with a pre-configured app that has the framework, dependencies, and boilerplate already set up.

Starting from a template

When you create a new project, you can choose from several starting points:

Blank project

A minimal React + Tailwind CSS app with:

Vite or Next.js as the bundler
TypeScript configured
Tailwind CSS 4 installed
A basic file structure ready to go

Choose this when you want full control over the setup.

Pre-built templates

Lyna provides templates for common project types:

Landing page: Hero section, features, pricing, and footer
Dashboard: Sidebar navigation, data tables, and charts
Blog: Post listings, individual posts, and categories
E-commerce: Product catalog, cart, checkout, and Stripe integration
Portfolio: Project gallery, about section, and contact form
SaaS starter: Auth, billing, and user management scaffold

Each template comes with shadcn/ui components, responsive layouts, and sensible defaults.

Importing from the Explore gallery

The Explore gallery is a community collection of projects built with Lyna. Browse published projects and clone them as your starting point.

How to import

Go to Explore from the main navigation
Browse by category, popularity, or recency
Click a project to preview it
Click Clone to copy it to your workspace

Cloned projects include all source code, assets, and config. It's a fully independent copy you can modify freely.

To add your project to the Explore gallery:

Open project settings
Set visibility to Public
Your project appears in the gallery for others to discover and clone

See Project Visibility for details.

Describing your project to AI

Don't want a template? Describe your app to the AI and it'll scaffold it:

Create a new blank project
Describe what you want to build: app type, key features, tech preferences
The AI creates the file structure, installs dependencies, and builds the initial UI

This works well when your project doesn't fit an existing template.

Template anatomy

All templates share a common structure:

├── src/
│   ├── app/           # Pages and layouts (Next.js) or routes (Vite)
│   ├── components/    # Reusable UI components
│   │   └── ui/        # shadcn/ui component files
│   ├── lib/           # Utility functions and helpers
│   └── styles/        # Global CSS and Tailwind configuration
├── public/            # Static assets (images, fonts, icons)
├── package.json       # Dependencies and scripts
├── tailwind.config.*  # Tailwind CSS configuration
└── tsconfig.json      # TypeScript configuration

Templates are standard web projects. No proprietary format, no lock-in. Export and continue in any editor or IDE.

Tips

Browse Explore first: Someone may have already built something similar you can clone and customize.
Template for boilerplate, AI for the rest: Start from a template, then use the chat to add your specific features.
Clone instead of copying: Cloning preserves structure and dependencies, which is more reliable than recreating manually.

On this page