Welcome to Lexington Themes

At Lexington, you’ll find premium themes crafted with Astro JS and Tailwind CSS to support your design, development, business, blog, or personal projects. These themes are flexible, functional, and easy to customize, regardless of your experience level.

Our themes are regularly updated to stay aligned with the latest versions and best practices of Astro JS and Tailwind CSS. They use Alpine JS for interactivity and vanilla JavaScript for more complex components. All themes can also be exported as static HTML files for maximum flexibility.

Quick Start Guide

1. Choose Your Theme or Bundle

Browse our collection to find a theme that suits your needs. Each theme includes detailed descriptions and live demos to help you make an informed choice.

2. Access Your Purchase

After purchasing a theme or bundle, you can access it through:

• Polar.sh library (recommended)
• Dashboard (for Lemon Squeezy purchases only)

Purchase Options:

• Individual Theme: Download directly after purchase
• Bundle: Download and fork themes with full GitHub access

From your library or dashboard, request access to the themes you want to use and start building.

3. Setup Requirements

Before getting started, ensure you have:

• Node.js v16.12.0 or higher
• Text editor (VS Code with the official Astro extension recommended)
• Terminal access for Astro CLI commands

4. Installation

1. Fork or download your chosen theme
2. Open the included README.md file for specific setup instructions
3. Install dependencies: npm install
4. Start development server: npm run dev

5. Deploy Your Site

Deploy your theme using popular hosting services:

• Netlify: Flexible deployment with seamless CI/CD integration
• Vercel: Quick, free deployment optimized for Astro sites

Theme Architecture

All themes follow a consistent structure and are updated to Tailwind CSS V4.

Note: Bundle purchasers have access to individual theme repositories, including Tailwind CSS V3 versions via commit history.

File Structure (Tailwind V4)

├── public/                 # Static assets
├── src/
│   ├── components/         # Reusable components
│   ├── layouts/           # Page layouts
│   ├── pages/             # Route pages
│   ├── content/           # Content collections
│   │   ├── folders/       # Collection folders
│   │   └── config.ts      # Collection configuration
│   ├── data/              # Data files
│   ├── scripts/           # JavaScript utilities
│   ├── styles/
│   │   └── global.css     # Global styles with Tailwind
│   └── env.d.ts          # TypeScript definitions
├── astro.config.mjs       # Astro configuration
├── package.json
├── README.md
└── tsconfig.json

Key Changes in Tailwind V4:

• No tailwind.config.js file needed
• Styles and plugins imported directly in CSS
• No @astrojs/tailwind integration required

Components System

Modular Block Components

Themes are built using modular, reusable components that can be mixed and matched across pages. Each block component can be easily imported and customized.

Data-Driven Components

For sections like cards, pricing tables, or feature lists, components accept data arrays while preserving customization options:

const included = [
  {
    title: "No subscription required",
    description: "One-time purchase with lifetime access to updates.",
  },
  {
    title: "Full source code",
    description: "Complete access to all theme files and components.",
  },
  // More items...
];

<ul
  class="pt-6 mt-6 border-t grid grid-cols-1 gap-4 lg:gap-12 border-base-50 lg:grid-cols-3"
>
  {included.map((item) => (
  <li class="space-y-2">
    <h3 class="font-medium text-base-900">{item.title}</h3>
    <p class="text-base-600 text-sm">{item.description}</p>
  </li>
  ))}
</ul>

Core Components

Most Lexington themes include a set of flexible, reusable components that maintain consistent styling while allowing customization. The specific styling may vary between themes, but the core functionality remains the same.

Button Component

The button component adapts to render either <button> or <a> elements based on usage:

<!-- Basic button usage -->
<Button variant="accent" size="lg">
  Get Started
</Button>

<!-- Button with icons -->
<Button variant="default" size="base" gap="sm">
  <Icon name="arrow-left" slot="left-icon" />
  Back to Home
  <Icon name="external-link" slot="right-icon" />
</Button>

<!-- Icon-only button -->
<Button variant="muted" size="sm" iconOnly={true}>
  <Icon name="menu" slot="icon" />
</Button>

Common Props (specific variants may differ between themes):

• variant: default, accent, muted, alternative, none
• size: xxs, xs, sm, base, md, lg, xl
• gap: xs, sm, base, md, lg
• iconOnly: Boolean for icon-only buttons
• isLink: Boolean to render as <a> tag instead of <button>

Link Component

For link-specific styling, themes may include a dedicated link component:

<!-- Standard link button -->
<LinkButton href="/about" variant="accent" size="base">
  Learn More
</LinkButton>

<!-- Link with custom styling -->
<LinkButton href="/contact" variant="link" class="underline hover:no-underline">
  Contact Us
</LinkButton>

<!-- Link with icons -->
<LinkButton href="/download" variant="default" size="lg">
  <Icon name="download" slot="left-icon" />
  Download Now
</LinkButton>

Link-Specific Props:

• href: URL destination (required)
• variant: Includes link for unstyled text links
• target: _blank, _self, etc.
• rel: Relationship attributes

Text Component

A flexible text component for consistent typography across your site:

<!-- Heading with display variant -->
<Text tag="h1" variant="display2XL" class="font-bold text-center">
  Welcome to Our Site
</Text>

<!-- Paragraph with custom styling -->
<Text tag="p" variant="textLG" class="text-gray-600">
  This is a large paragraph with custom color.
</Text>

<!-- Link text -->
<Text tag="a" href="/about" variant="textBase" class="hover:underline">
  Learn more about us
</Text>

<!-- Text with icons -->
<Text tag="span" variant="textSM" class="flex items-center gap-2">
  <Icon name="check" slot="left-icon" />
  Verified Account
  <Icon name="star" slot="right-icon" />
</Text>

Text Variants (responsive by default):

• Display Sizes: display6XL, display5XL, display4XL, display3XL, display2XL, displayXL, displayLG, displayMD, displaySM, displayXS
• Text Sizes: textXL, textLG, textBase, textSM, textXS

Text Props:

• tag: h1, h2, h3, h4, h5, h6, p, span, a, em, strong, small, blockquote
• variant: Typography scale variant
• href: For anchor tags
• target, rel, title: Standard HTML attributes

Share Buttons Component

Social sharing functionality with platform-specific handling:

<!-- Basic sharing (uses current page) -->
<ShareButtons />

<!-- Custom sharing content -->
<ShareButtons
  url="https://example.com/article"
  title="Amazing Article Title"
  description="Brief description of the content"
  contentType="blog"
/>

<!-- Generic content sharing -->
<ShareButtons
  url={Astro.url.href}
  title={frontmatter.title}
  contentType="generic"
/>

ShareButtons Props:

• url: Custom URL (defaults to current page)
• title: Custom title (defaults to page title)
• description: Additional description for sharing
• contentType: blog or generic (affects share text format)

Supported Platforms:

• X (Twitter): Includes title and description in tweet
• Facebook: Direct URL sharing
• LinkedIn: Professional network sharing
• Copy Link: Clipboard functionality with visual feedback

Wrapper Component

This wrapper component provides flexible container styling for your content, allowing you to control padding and apply prose-specific styles. It’s designed to ensure consistent layout across different screen sizes and for various content types.

---
interface Props {
  variant?: "standard" | "paddinglessDesktop" | "prose"; // Define any variants you need
  class?: string; // Optional prop for additional classes
  id?: string; // Optional prop for additional classes
}
const { variant = "standard", class: extraClass = "" } = Astro.props;
// Map each variant to its specific classes
const variantClasses = {
  // Standard wrapper
  standard: " 2xl:px-12 w-full px-8   overflow-hidden xl:overflow-visible",
  paddinglessDesktop:
    "mx-auto max-w-6xl px-4 xl:px-0  overflow-hidden xl:overflow-visible",

  // Prose styles
  prose:
    "prose text-base-400 prose-blockquote:border-l-accent prose-a:border-white prose-a:border-b prose-a:no-underline prose-a:text-white   prose-a:transition-colors prose-a:duration-200 prose-a:hover:border-solid   prose-a:hover:text-accent-500 prose-headings:font-medium prose-headings:text-white prose-pre:border prose-li:marker:text-accent-400  max-w-none  prose-pre:rounded-xl w-full prose-blockquote:text-base-500  prose-pre:border-base-300 prose-ul:[list-style-type:'///'] prose-pre:scrollbar-hide prose-tr:border-base-800 prose-thead:border-base-800 prose-strong:text-white",
};
// Combine the classes for the specified variant with any extra classes
const classes = `${variantClasses[variant]} ${extraClass}`.trim();
---

<div class={classes}>
  <slot />
</div>

Usage:

To use the wrapper, import it into your Astro component or page and wrap your content with it. You can specify a variant to apply different styling presets, and add extra CSS classes using the class prop.

---
import Wrapper from '../components/Wrapper.astro'; // Adjust path as needed
---

<Wrapper variant="standard">
  <h1>My Page Title</h1>
  <p>This content is wrapped with standard padding.</p>
</Wrapper>

<Wrapper variant="prose" class="my-custom-class">
  <article>
    <h2>Blog Post Content</h2>
    <p>This content will have prose-specific styling.</p>
    <blockquote>A blockquote example.</blockquote>
  </article>
</Wrapper>

<Wrapper variant="paddinglessDesktop">
  <img src="/path/to/image.jpg" alt="Example Image" />
  <p>This content has no horizontal padding on desktop.</p>
</Wrapper>

Props:

• variant: (Optional) Defines the styling preset for the wrapper. Accepts "standard", "paddinglessDesktop", or "prose". Defaults to "standard".
• class: (Optional) A string of additional CSS classes to apply to the wrapper div.
• id: (Optional) An ID for the wrapper div.

Icon Component

This component provides a flexible way to include SVG icons in your Astro project, allowing for easy customization of size and the application of additional CSS classes. It leverages Tabler Icons as an example, but the pattern can be adapted for any SVG icon set.

---
const { variant, size, class: className, ...rest } = Astro.props;
const xs = ["size-3"];
const sm = ["size-4"];
const base = ["size-5"];
const md = ["size-6"];
const lg = ["size-7"];
const xl = ["size-8"];
---

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class:list={[
    "icon",
    "icon-tabler",
    "icons-tabler-outline",
    "icon-tabler-accessibility", // This specific icon can be replaced dynamically
    size === "xs" && xs,
    size === "sm" && sm,
    size === "base" && base,
    size === "md" && md,
    size === "lg" && lg,
    size === "xl" && xl,
    className,
  ]}
  {...rest}
>
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
    d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path
    d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1"></path><circle
    cx="12"
    cy="7.5"
    r=".5"
    fill="currentColor"></circle>
</svg>

Usage:

To use an icon, import the Icon.astro component (or whatever you name it) and pass the desired size and any additional class names. The actual SVG path data for the icon would typically be dynamically loaded based on a name prop (e.g., <Icon name="home" />), but for this example, a static icon is shown.

---
import Icon from "../components/Icon.astro"; // Adjust path as needed
---

<div>
  <p>Small icon:</p>
  <Icon size="sm" />

  <p>Large icon with custom color:</p>
  <Icon size="lg" class="text-blue-500" />

  <p>Extra large icon:</p>
  <Icon size="xl" />
</div>

Props:

• size: (Optional) Defines the size of the icon. Accepts "xs", "sm", "base", "md", "lg", or "xl". These correspond to predefined Tailwind CSS size-* classes.
• class: (Optional) A string of additional CSS classes to apply to the SVG element.
• ...rest: Any other standard HTML attributes for an SVG element (e.g., id, aria-label).

Note on dynamic icons:

In a real-world scenario, you would likely have a mechanism to dynamically load different SVG paths based on an icon or name prop. For example, you might have a mapping of icon names to their SVG content, or use a library that provides this functionality. The provided code snippet is a simplified example showing how to handle sizing and class application for a single icon.

Universal Component Patterns

Slot System

All components use Astro’s slot system for flexible content:

<!-- Standard content slot -->
<Button>Click Me</Button>

<!-- Named slots for icons -->
<Button>
  <Icon name="star" slot="left-icon" />
  Rate This
  <Icon name="arrow-right" slot="right-icon" />
</Button>

<!-- Icon-only with dedicated slot -->
<Button iconOnly={true}>
  <Icon name="menu" slot="icon" />
</Button>

Style Customization

Components accept additional classes while preserving base functionality:

<!-- Add custom classes -->
<Button class="shadow-lg border-2 border-blue-500" variant="accent">
  Custom Styled Button
</Button>

<!-- Override with variant="none" for complete control -->
<Button variant="none" class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-lg">
  Completely Custom
</Button>

Theme Variations

While component APIs remain consistent, visual styles vary between themes:

• Minimal themes: Clean, simple styling with subtle hover effects
• Bold themes: Vibrant colors, pronounced shadows, animated interactions
• Corporate themes: Professional styling with conservative color palettes
• Creative themes: Unique styling with custom animations and effects

Note: Always check your specific theme’s README for any unique component variations or additional props available.

Content Collections

Every theme leverages Astro Content Collections for content-focused pages:

• Blog posts and articles
• Changelog entries
• Team members and authors
• Customer testimonials
• Help center documentation
• Product showcases

Content collections provide type safety, automatic routing, and seamless content management.

Plugins and Integrations

Each theme includes carefully selected plugins as needed. Check the astro.config.mjs file for the complete list of integrations used in your specific theme.

Common Integrations:

• @astrojs/alpinejs
• @astrolib/seo
• @astrojs/mdx (for content-rich themes)

Themes are kept lightweight with only 2-3 essential integrations to avoid bloat and give you control over additional features.

SEO Configuration

All themes include built-in SEO features using the @astrolib/seo integration with comprehensive meta tag support.

Basic Usage

---
import { AstroSeo } from '@astrolib/seo';
---

<AstroSeo
  title="Your Page Title"
  description="Your page description for search results"
  canonical="https://yourdomain.com/current-page"
  openGraph={{
    url: "https://yourdomain.com/current-page",
    title: "Your Page Title",
    description: "Your page description",
    images: [
      {
        url: "https://yourdomain.com/og-image.png",
        width: 1200,
        height: 630,
        alt: "Page preview image",
        type: "image/png",
      }
    ],
    site_name: "Your Site Name",
  }}
  twitter={{
    handle: "@yourhandle",
    site: "@yoursite",
    cardType: "summary_large_image",
  }}
/>

Dynamic SEO

Create dynamic SEO configurations for content collections:

---
const seoConfig = {
  title: `${post.title} | Your Site`,
  description: post.excerpt,
  canonical: `https://yourdomain.com/blog/${post.slug}`,
  // ... additional config
};
---

<AstroSeo {...seoConfig} />

Assets and Resources

Images

Theme images are sourced from free, open-source platforms. You’re welcome to reuse them in your projects:

• Lummi - AI-generated stock photos

Icons

All icons are free and open-source:

• Icones - Icon collection aggregator
• Remix Icons - Neutral-style icon system
• Tabler Icons - SVG icons for web interfaces
• Phosphor Icons - Flexible icon family

Typography

Fonts are delivered via CDN from:

• Fontshare - Quality fonts for digital products
• Google Fonts - Web font library

Theme Updates

Free Updates Policy

When you purchase any Lexington product, all future improvements are free.

Individual Themes

• Updates are always free
• Download-only access (no GitHub repository)
• Updated files replace previous versions in your library

Bundles

• Access to all current themes plus future releases at no additional cost
• GitHub repository access for advanced customization
• Fork themes for custom modifications

Update Management

• Download: Updated files automatically replace older versions
• GitHub: Themes are updated to the latest version on the main branch
• Legacy Versions: Major redesigns keep old versions accessible via Git history

Important: You’re responsible for downloading updated files and managing any custom changes in your forked versions.

Support

What’s Included

Your theme support includes:

• General questions about theme functionality
• Help with feature configuration
• Bug fixes and issue resolution
• Guidance on theme customization

What’s Not Included

Support does not cover:

• HTML, CSS, JavaScript tutorials
• Astro JS, Tailwind CSS, or Alpine JS lessons
• Custom development work
• Third-party integration setup

Support Channels

• Email: Direct support via michael@andreuzza.com
• Discord: Lifetime access for individual and team bundle purchasers (link provided in your bundle package)

Platform Notice

Important: Due to Stripe’s acquisition of Lemon Squeezy, we’ve transitioned to Polar.sh for all new purchases. Lemon Squeezy purchases remain supported, but we recommend using Polar.sh for the best experience.

Learning Resources

While we provide theme support, mastering the underlying technologies is your responsibility. These resources will help you get started:

• HTML: W3Schools HTML Tutorial
• Astro: Official Astro Documentation
• Tailwind CSS: Official Tailwind Documentation
• Alpine JS: Alpine.js Documentation

Need Help?

If you have questions not covered in this documentation, don’t hesitate to reach out through our support channels. We’re here to help you make the most of your Lexington themes!