Search Results List
Search results display
Overview
Renders a list of search result cards, each with a title, excerpt, optional category badge, and a link. Handles loading (skeleton placeholders) and empty states automatically.
Usage
import { SearchResultsList } from "@leanicon/web-builder-library";Default
Result cards with title, excerpt, and optional category badge.
Getting Started with React in 2024
TutorialA comprehensive guide to starting your React journey, covering the latest patterns and best practices for modern web development.
Advanced TypeScript Patterns for Better Code
TypeScriptExplore conditional types, mapped types, and template literal types to write more expressive and type-safe TypeScript code.
Mastering CSS Grid Layout
From basic concepts to advanced techniques, learn how to create complex, responsive layouts with CSS Grid.
Many results with categories
Getting Started with React in 2024
TutorialA comprehensive guide to starting your React journey, covering the latest patterns and best practices.
Advanced TypeScript Patterns for Better Code
TypeScriptExplore conditional types, mapped types, and template literal types for type-safe code.
Mastering CSS Grid Layout
From basic concepts to advanced techniques for complex responsive layouts.
Building Accessible Web Applications
AccessibilityLearn ARIA attributes, keyboard navigation, and screen reader support.
State Management in React: A Complete Guide
ReactCompare useState, useReducer, Context, Zustand, and Jotai.
Without categories
Results without category badges.
Getting Started with React in 2024
A comprehensive guide to starting your React journey, covering the latest patterns and best practices.
Advanced TypeScript Patterns for Better Code
Explore conditional types, mapped types, and template literal types for type-safe code.
Mastering CSS Grid Layout
From basic concepts to advanced techniques for complex responsive layouts.
Single result
Empty state
When results is empty, a configurable message is shown.
No articles found. Try a different search term.
Custom empty message
We couldn't find anything matching your query.
Loading state
Set isLoading to show skeleton placeholder cards.
Dark mode
Getting Started with React in 2024
TutorialA comprehensive guide to starting your React journey, covering the latest patterns and best practices.
Advanced TypeScript Patterns for Better Code
TypeScriptExplore conditional types, mapped types, and template literal types for type-safe code.
Mastering CSS Grid Layout
From basic concepts to advanced techniques for complex responsive layouts.
Empty state — dark mode
No articles found. Try a different search term.
Loading state — dark mode
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Array of search results (required) |
|
|
| Show skeleton loading placeholders |
|
|
| Message when results is empty |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
SearchResult
Field | Type | Description |
|---|---|---|
|
| Result title (required) |
|
| Result excerpt, clamped to 2 lines |
|
| Optional category badge |
|
| Link destination (required) |
Notes
- Loading state renders 3 skeleton cards with
animate-pulse. - The entire card is clickable as a link via the
hreffield. excerptis clamped to 2 lines withline-clamp-2.- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
results | SearchResult[] | — | Yes | |
isLoading | boolean | false | No | |
emptyMessage | string | No results found | No | |
colorScheme | enum | — | No | |
className | string | — | No |