Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 at checkout.
Getting started with Lexington Themes
At Lexington, you will find themes crafted with Astro JS and Tailwind CSS themes to support your design, development, business, blog, or personal projects. These themes are flexible, functional, and easy to customize, regardless of your experience level.
The themes are regularly updated to stay aligned with the latest versions and best practices of Astro JS and Tailwind CSS, especially when major changes or improvements occur. They use Alpine JS for interactivity and vanilla JavaScript for more complex components.
The themes also let you extract plain HTML files by building the project. These files, located in the dist folder after the build, use Tailwind CSS classes, as the project is built with Tailwind CSS.
Choose your theme or bundle
Browse the collection on this page to find a theme that suits your needs. Each theme includes detailed descriptions and live demos to help you make an good choice.
Fork or download the theme
After purchasing a theme or bundle, you can access it through the Polar.sh library or the dashboard ( only available for purchases made via Lemon Squeezy ).
From the library or dashboard, request access to the themes you want to use and start building.
Follow the instructions in the README file
Once you’ve forked or downloaded the theme, open the README file included with it to get started. The README contains setup instructions and details about the latest updates to the theme.
Requirements:
Deploying your theme
Once your theme is ready, you can deploy it using a hosting service. Here are two popular options:
The themes follow a simple, consistent structure and all themes are updated to Tailwind CSS V4.
By now, Tailwind CSS v4 removes tailwind.config.js, moving styles and plugin imports directly to the CSS file, which may cause slight structural differences based on the Tailwind CSS version. So no need to use the @astrojs/tailwind integration anymore with the latest.
Tailwind v4
├── public
├── src
│ ├── components
│ ├── layouts
│ ├── pages
│ ├── content
│ │ ├── folders
│ │ └── config.ts
│ ├── data
│ ├── scripts
│ ├── styles
│ │ └── global.css
│ └── endv.d.ts
├── astro.config.mjs
├── package.json
├── README.md
├── tailwind.config.js
└── ts.config.jsonThe themes are built using modular block components, making it easy to mix and match sections. Each block is a reusable component that can be imported onto any page.
For sections like card layouts, pricing tables, or text-heavy areas like featuee sections, an array passes the data to the component while preserving customization options. This approach saves time, eliminates the need for hardcoding, and simplifies customization.
const included = [
{
title: " No subscription required",
description:
"The license is a one-time purchase. Lexington Themes will never charge you again after the initial payment.",
},
// More items...
];<ul class="grid grid-cols-1 gap-4 pt-6 mt-6 border-t lg:gap-12 border-base-50 lg:grid-cols-3">
{included.map((included) => (
<div>
<li>
<p>
{included.title}
</p>
<p>
{included.description}
</p>
</li>
</div>
))}
</ul>
Every themes uses content Astro Content Collections for content focus pages, like blogs, changelog, customers, help center, team, authors, and more.
Each theme includes plugins or integrations as needed. You can find the list of plugins for a specific theme in the astro.config.mjs file, located at the root of the project, towards the bottom of the file tree.
There’s also a README.md file in the root folder that provides more details about the plugins and integrations used.
Most of the time, these plugins come from Tailwind or Astro, and usually, there are only two or three included in a theme to avoid bloating the project and let you to decide what to use.
All themes come with built-in SEO features, using the @astrolib/seo integration, including meta tags for Open Graph. SEO in Astro works by adding it to the pages where you want SEO attributes. You just pass a configuration object with the page’s SEO properties.
This configuration can be created dynamically for each page or, in some cases, your API might return an SEO object ready to use.
Typical page example:
---
import { AstroSeo } from '@astrolib/seo';
---
<AstroSeo
title="..."
description="..."
canonical="h..."
openGraph={{
url: "...",
title: "...",
description:
"...",
images: [
{
url: "...",
width: 1200,
height: 630,
alt: "Social open graph",
type: "image/png",
},
{
url: "...",
width: 4096,
height: 4096,
alt: "Twitter open graph",
type: "image/png",
},
{ url: "..." },
{ url: "..." },
],
site_name: "...",
}}
twitter={{
handle: "...",
site: "...",
cardType: "...",
}}
/>The images used in the themes are either custom-designed for the theme or sourced from free and open-source platforms. You’re welcome to reuse them in your own projects. These images come from:
The icons included in the themes are free and open-source, sourced from:
The themes use fonts delivered via CDNs, sourced from:
When you purchase any Lexington product, all future improvements to that product will be free for you.
Individual Themes
Updates to any purchased theme are always free. However, these themes are not available on GitHub, only download. The bundle includes all themes, updates, future releases, and GitHub access.
Bundles
When you purchase a bundle, you gain access to all currently available themes and any future themes at no additional cost. This means that if a new theme is added to the bundle, you can access it as part of your original purchase without any upgrade fees.
Important Note
When a theme is updated, the downloadable files in your Polar.sh or Lemon library will be replaced with the new version. In the GitHub repository, the theme will simply be updated to the latest version.
There are cases where a theme has been fully redesigned. In such instances, the old version remains available on GitHub, while the main version will reflect the new design. You’ll have access to both versions at any time
You are responsible for downloading the updated files or managing your forked version if you’ve made custom changes.
Your theme support service includes assistance with general questions about theme functionality, help with feature configuration, and resolving bugs or issues.
However, support does not include lessons on how to use HTML, Astro JS, Tailwind CSS, Alpine JS, or other programming languages or frameworks.
All themes come with support provided via email. You can reach out to me directly by sending an email here. If you’ve purchased an individual or team bundle, you’ll also gain lifetime access to a dedicated Discord channel for support. The Discord link can be found in the Polar SH benefit list and included in your Bundle package on Lemon library.
Important: Lemon Squeezy has been acquired by Stripe, as a result I have completely to Polar.sh. and is not clear if they will keep Lemon Squeezy or if it will be discontinued therefore, I would not recommend to buy the themes through Lemon Squeezy.
Note: While I’m happy to help with any issues you encounter with the templates, it’s your responsibility to learn the basics of HTML, Astro, Tailwind CSS, and other tools. You can use the following resources to get started: