Components | Lexington Themes Docs

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

Wrapper

The Wrapper component is a layout utility that standardizes spacing and typography for sections across your site. It ensures consistent width and styling without having to repeat long Tailwind class strings.

Location: src/components/fundations/containers/Wrapper.astro

Basic usage

astro

---
import Wrapper from "@/components/fundations/containers/Wrapper.astro";
---

<Wrapper>
  <h2>About Ælen</h2>
  <p>This is a simple section wrapped in the standard layout container.</p>
</Wrapper>

Variants

The component supports a variant prop to switch between different styles:

default: max-width container with padding. Used when no variant is set.
prose: Tailwind Typography styles for rich text, like blog posts or docs.

astro

<Wrapper variant="default">
  <h2>Default Section</h2>
  <p>This uses the default layout wrapper with spacing applied.</p>
</Wrapper>

<Wrapper variant="prose">
  <h2>Prose Section</h2>
  <p>This section uses typography utilities for styled content like <strong>headings</strong>, <a href="#">links</a>, and lists.</p>
</Wrapper>

Additional props

class: extra classes to customize spacing or background.
id: an ID for anchor links or section navigation.

astro

<Wrapper id="features" class="bg-muted py-12">
  <h2>Features</h2>
  <p>Extend the wrapper with your own utilities.</p>
</Wrapper>

Use the Wrapper whenever you want consistent section layouts, typography, or spacing across your theme.

Button

The Button component provides a flexible, accessible button with support for multiple variants, sizes, icons, and custom styling. It maintains consistency across your theme while offering extensive customization options.

Location: src/components/fundations/elements/Button.astro

Basic usage

astro

---
import Button from "@/components/fundations/elements/Button.astro";
---

<Button>Click Me</Button>

Props reference

Prop	Type	Default	Description
`variant`	`'default'` \| `'muted'` \| `'none'`	`'default'`	Button style variant
`size`	`'xs'` \| `'sm'` \| `'base'` \| `'md'` \| `'lg'` \| `'xl'`	`'base'`	Button size
`gap`	`'xs'` \| `'sm'` \| `'base'` \| `'md'` \| `'lg'`	-	Spacing between icons and text
`onlyIconSize`	`string`	-	Special sizing for icon-only buttons
`isLink`	`boolean`	`false`	Renders an `<a>` instead of a button
`href`	`string`	-	Link URL, used with `isLink`
`class`	`string`	-	Additional CSS classes

Variant names differ slightly between themes. Check the theme’s /system pages for the exact list.

Links

Set isLink and an href to render the same styles as a link:

astro

<Button isLink href="/contact">Contact</Button>

Variants

Choose from three pre-built visual styles:

astro

<!-- Default: Black background, white text -->
<Button variant="default">Default Button</Button>

<!-- Muted: White background, black text -->
<Button variant="muted">Muted Button</Button>

<!-- None: No predefined styles (completely customizable) -->
<Button variant="none" class="bg-foreground text-background px-4 py-2">
  Custom Styled
</Button>

Sizes

Six size options provide flexible button scaling:

astro

<Button size="xs">Extra Small (h-8)</Button>
<Button size="sm">Small (h-9)</Button>
<Button size="base">Base (h-10)</Button>
<Button size="md">Medium (h-11)</Button>
<Button size="lg">Large (h-12)</Button>
<Button size="xl">Extra Large (h-14)</Button>

Size Details:

xs: 32px height, text-xs, px-4 py-2
sm: 36px height, text-sm, px-4 py-2
base: 40px height, text-base, px-6 py-3
md: 44px height, text-base, px-6 py-3
lg: 48px height, text-lg, px-6 py-3
xl: 56px height, text-xl, px-6 py-3

Using icons

Add icons before or after button text using named slots:

astro

---
import { ChevronRight, Download, Plus } from "lucide-astro";
---

<!-- Left icon -->
<Button variant="default" size="base" gap="sm">
  <Plus slot="left-icon" size={16} />
  Add Item
</Button>

<!-- Right icon -->
<Button variant="muted" size="md" gap="sm">
  Download
  <Download slot="right-icon" size={18} />
</Button>

<!-- Both icons -->
<Button variant="default" size="lg" gap="base">
  <Plus slot="left-icon" size={20} />
  Create New
  <ChevronRight slot="right-icon" size={20} />
</Button>

Icon spacing

Control the gap between icons and text with the gap prop:

astro

<Button gap="xs">Tight spacing</Button>    <!-- gap-2 -->
<Button gap="sm">Small spacing</Button>    <!-- gap-4 -->
<Button gap="base">Base spacing</Button>   <!-- gap-8 -->
<Button gap="md">Medium spacing</Button>   <!-- gap-10 -->
<Button gap="lg">Large spacing</Button>    <!-- gap-12 -->

Icon-only buttons

For buttons containing only icons, use the onlyIconSize prop:

astro

<Button variant="default" onlyIconSize="w-10 h-10">
  <Plus slot="left-icon" size={20} />
</Button>

Custom styling

Extend or completely customize button appearance:

astro

<!-- Adding custom classes -->
<Button variant="default" class="shadow-lg hover:shadow-xl">
  Enhanced Button
</Button>

<!-- Complete custom styling with variant="none" -->

<!-- Custom focus styles -->
<Button
  variant="default"
  class="focus:ring-foreground/20 focus:ring-4"
>
  Custom Focus
</Button>

Full HTML button attributes

The component passes through all standard button attributes:

astro

<Button
  variant="default"
  size="md"
  type="submit"
  disabled={isLoading}
  onclick="handleClick()"
  aria-label="Submit form"
>
  Submit
</Button>

Usage examples

Call-to-action buttons:

astro

<Button variant="default" size="lg" gap="sm">
  <ChevronRight slot="right-icon" size={20} />
  Get Started
</Button>

Form buttons:

astro

<div class="flex gap-4">
  <Button variant="muted" size="md" type="button">
    Cancel
  </Button>
  <Button variant="default" size="md" type="submit">
    Save Changes
  </Button>
</div>

Icon buttons:

astro

<Button variant="none" class="p-2 hover:bg-muted rounded-full">
  <Heart slot="left-icon" size={20} />
</Button>

Accessibility notes

The Button component includes built-in accessibility features:

Proper focus management with focus:ring-2 and focus:outline-none
Keyboard navigation support
Screen reader compatibility
All standard button ARIA attributes are supported

Always provide meaningful text or aria-label attributes for icon-only buttons to ensure accessibility.

Text

The Text component is a versatile typography utility that provides consistent text styling across your site. It supports multiple HTML tags, responsive font sizes, and semantic markup while maintaining design consistency.

Location: src/components/fundations/elements/Text.astro

Basic usage

astro

---
import Text from "@/components/fundations/elements/Text.astro";
---

<Text>This is a basic paragraph with default styling.</Text>
<Text variant="textLG">This is larger text.</Text>
<Text tag="h2" variant="displayMD">This is a heading.</Text>

Props reference

Prop	Type	Default	Description
`tag`	`'a'` \| `'p'` \| `'em'` \| `'span'` \| `'small'` \| `'strong'` \| `'blockquote'` \| `'h1'` \| `'h2'` \| `'h3'` \| `'h4'` \| `'h5'` \| `'h6'`	`'p'`	HTML element to render
`variant`	See Variants below	`'textBase'`	Typography style variant
`class`	`string`	-	Additional CSS classes
`id`	`string`	-	Element ID attribute
`href`	`string`	-	Link URL (only when `tag="a"`)
`title`	`string`	-	Title attribute (primarily for links)
`ariaLabel`	`string`	-	Aria-label for accessibility
`style`	`string`	-	Inline CSS styles

Variants

The Text component offers two categories of variants: Display (large, responsive sizes) and Text (standard body text sizes).

Display variants (large, responsive typography)

Perfect for headlines, hero text, and major section titles:

astro

<!-- Extra large displays (responsive scaling) -->
<Text tag="h1" variant="display6XL">Hero Title</Text>
<Text tag="h1" variant="display5XL">Main Headline</Text>
<Text tag="h2" variant="display4XL">Section Hero</Text>

<!-- Large displays -->
<Text tag="h2" variant="display3XL">Page Title</Text>
<Text tag="h2" variant="display2XL">Major Heading</Text>
<Text tag="h3" variant="displayXL">Section Title</Text>

<!-- Medium displays -->
<Text tag="h3" variant="displayLG">Subsection Title</Text>
<Text tag="h4" variant="displayMD">Card Title</Text>

<!-- Small displays -->
<Text tag="h4" variant="displaySM">Component Title</Text>
<Text tag="h5" variant="displayXS">Small Heading</Text>

Display Variant Sizes:

display6XL: text-6xl sm:text-7xl md:text-9xl lg:text-[12rem]
display5XL: text-5xl sm:text-7xl md:text-8xl lg:text-[10rem]
display4XL: text-4xl sm:text-7xl md:text-8xl lg:text-9xl
display3XL: text-4xl sm:text-6xl md:text-7xl lg:text-8xl
display2XL: text-5xl sm:text-5xl md:text-6xl lg:text-7xl
displayXL: text-4xl sm:text-4xl md:text-5xl lg:text-6xl
displayLG: text-3xl sm:text-3xl md:text-4xl lg:text-5xl
displayMD: text-2xl sm:text-2xl md:text-3xl lg:text-4xl
displaySM: text-lg sm:text-xl md:text-2xl lg:text-3xl
displayXS: text-base sm:text-lg md:text-xl lg:text-2xl

Text variants (standard body text)

Ideal for body content, UI text, and smaller elements:

astro

<!-- Standard body text -->
<Text variant="textXL">Large body text</Text>
<Text variant="textLG">Medium-large body text</Text>
<Text variant="textBase">Standard body text</Text>

<!-- Smaller text -->
<Text variant="textSM">Small text</Text>
<Text variant="textXS">Extra small text</Text>

Text Variant Sizes:

textXL: text-lg sm:text-xl md:text-2xl (responsive)
textLG: text-base sm:text-lg md:text-xl (responsive)
textBase: text-base (16px baseline)
textSM: text-sm (14px)
textXS: text-xs (12px)

HTML tag options

Choose the appropriate semantic HTML element:

astro

<!-- Headings -->
<Text tag="h1" variant="display4XL">Page Title</Text>
<Text tag="h2" variant="display2XL">Section Title</Text>
<Text tag="h3" variant="displayMD">Subsection</Text>

<!-- Body text -->
<Text tag="p" variant="textBase">Paragraph content</Text>
<Text tag="span" variant="textSM">Inline text</Text>

<!-- Semantic text -->
<Text tag="strong" variant="textBase">Important text</Text>
<Text tag="em" variant="textBase">Emphasized text</Text>
<Text tag="small" variant="textXS">Fine print</Text>

<!-- Quotes -->
<Text tag="blockquote" variant="textLG" class="border-l-4 border-muted pl-4">
  "This is a styled blockquote with proper semantic markup."
</Text>

<!-- Links -->
<Text tag="a" variant="textBase" href="/about" class="text-foreground hover:underline">
  About Us
</Text>

Using icons

The Text component supports icons just like Button and Link components:

astro

---
import IconName from "@/components/fundations/icons/IconName.astro";
---

<!-- Text with left icon -->
<Text variant="textLG" class="flex items-center gap-2">
  <Star  size={20} />
  Featured content
</Text>

<!-- Text with right icon -->
<Text tag="a" variant="textBase" href="/learn-more" class="inline-flex items-center gap-1">
  Learn more
  <ArrowRight slot="right-icon" size={16} />
</Text>

<!-- Text with both icons -->
<Text variant="displaySM" class="flex items-center justify-center gap-3">
  <Info size={24} />
  Important Notice
  <Info  size={24} />
</Text>

Responsive typography examples

Leverage the responsive variants for optimal reading experience:

astro

<!-- Hero section -->
<Text tag="h1" variant="display5XL" class="font-bold text-center">
  Welcome to Our Platform
</Text>
<Text tag="p" variant="textXL" class="text-center text-muted-foreground mt-4">
  Building amazing experiences for everyone
</Text>

<!-- Article content -->
<Text tag="h2" variant="display2XL" class="font-medium mb-6">
  Article Title
</Text>
<Text tag="p" variant="textLG" class="mb-4">
  This paragraph uses responsive text sizing that adapts beautifully
  across different screen sizes.
</Text>

Custom styling

Combine variants with additional classes for enhanced styling:

astro

<!-- Styled headings -->
<Text
  tag="h1"
  variant="display3XL"
  class="font-medium text-foreground text-balance"
>
  Styled Heading
</Text>

<!-- Styled body text -->
<Text
  variant="textBase"
  class="text-muted-foreground leading-relaxed max-w-prose"
>
  Optimized reading experience with custom line height and max width.
</Text>

<!-- Custom link styling -->
<Text
  tag="a"
  variant="textLG"
  href="/contact"
  class="text-foreground hover:text-muted-foreground underline decoration-2 underline-offset-4"
>
  Contact Us
</Text>

Common use cases

Landing Page Hero:

astro

<Text tag="h1" variant="display6XL" class="font-bold text-center">
  Innovation
</Text>
<Text tag="p" variant="textXL" class="text-center text-muted-foreground mt-6">
  Transforming ideas into reality
</Text>

Article Layout:

astro

<Text tag="h1" variant="display3XL" class="font-bold mb-4">
  Article Title
</Text>
<Text tag="p" variant="textSM" class="text-muted-foreground mb-8">
  Published on March 15, 2024
</Text>
<Text tag="p" variant="textBase" class="mb-6">
  Article introduction paragraph...
</Text>

Card Components:

astro

<Text tag="h3" variant="displaySM" class="font-medium mb-2">
  Card Title
</Text>
<Text variant="textSM" class="text-muted-foreground">
  Card description text
</Text>

Navigation Items:

astro

<Text tag="a" variant="textBase" href="/services" class="hover:text-muted-foreground">
  Services
</Text>

Accessibility best practices

Use appropriate heading hierarchy (h1 → h2 → h3, etc.)
Provide ariaLabel for links when text alone isn’t descriptive enough
Use semantic HTML tags (strong, em, blockquote) for proper meaning
Ensure sufficient color contrast for all text variants
Test responsive text sizes across different devices

astro

<!-- Good heading hierarchy -->
<Text tag="h1" variant="display4XL">Page Title</Text>
<Text tag="h2" variant="display2XL">Main Section</Text>
<Text tag="h3" variant="displayLG">Subsection</Text>

<!-- Accessible link -->
<Text
  tag="a"
  variant="textBase"
  href="/download/report.pdf"
  ariaLabel="Download the annual report PDF"
>
  Download Report
</Text>

Data-driven components

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

javascript

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...
];

html

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