CardGrid
Responsive grid layout for organizing card components. Supports 1-4 column layouts with automatic responsive behavior.
View showcase
UI Components - The Building Blocks
Reusable UI components that power your layouts. Cards, grids, navigation, and more—all theme-aware and responsive.
What Are UI Components?
UI components are the building blocks of your pages. While section components create complete page sections, UI components are smaller, reusable pieces: cards, grids, navigation elements, and content utilities.
Every UI component is theme-aware (adapts to your color scheme), responsive (works on all devices), and follows accessibility best practices.
Available UI Components
IconCard
Versatile card with icon, title, description, and optional link. Perfect for feature lists and navigation grids.
View showcase
Breadcrumbs
SEO-friendly navigation breadcrumbs with schema markup. Shows current page location in site hierarchy.
View showcase
TableOfContents
Dynamic table of contents generator with multiple display variants. Auto-generates from page headings.
View showcase
Tables
Automatic table styling with theme color integration. Markdown tables that adapt to your color scheme.
View showcase
ContentToggle
Universal toggle for code snippets and content. WCAG AA compliant with zero CSS in your pages.
View showcase
When to Use Each Component
🃏 CardGrid
Use when you need to display multiple items in a grid. Works with any card component (IconCard, TeamCard, TestimonialCard, etc.). Handles responsive breakpoints automatically.
📇 IconCard
Your go-to card for features, benefits, services, or navigation grids. Displays an icon, heading, description, and optional link. Pairs perfectly with CardGrid.
🧭 Breadcrumbs
Add to any page to show navigation path. Includes BreadcrumbList schema markup for SEO. Now integrated into Hero component for consistent positioning.
📑 TableOfContents
Auto-generates from page headings. Use sidebar variant for desktop, collapsible for mobile. Helps users navigate long content.
📊 Tables
Automatic styling for markdown tables. Theme colors adapt to your color preset, with full light/dark mode support. Perfect for data tables, comparisons, and documentation.
🔽 ContentToggle
Show/hide functionality for code snippets and content. Use in showcase pages to provide expandable code examples. Handles all styling automatically—just pass in your code string.
Explore UI Components
Click on any component above to see live examples, implementation guides, and code snippets.