SlideList
Bullet-point list container. Wrap SlideListItem children inside this component.
Props
List items, typically SlideListItem components.
Additional CSS classes to apply to the list.
SlideListItem
Single bullet item inside a SlideList. Renders a small dot followed by the content.
Props
The content of the list item.
Additional CSS classes to apply to the list item.
Usage Examples
Basic List
<Slide>
<SlideTitle>Key Features</SlideTitle>
<SlideList>
<SlideListItem>Fast and responsive</SlideListItem>
<SlideListItem>Easy to customize</SlideListItem>
<SlideListItem>Built with TypeScript</SlideListItem>
</SlideList>
</Slide>
List with Custom Styling
<SlideList className="max-w-2xl">
<SlideListItem className="text-2xl">
Large list item text
</SlideListItem>
<SlideListItem>
Regular list item text
</SlideListItem>
</SlideList>
Multiple Lists on One Slide
<Slide>
<SlideTitle>Comparison</SlideTitle>
<SlideColumns
left={
<>
<h3>Pros</h3>
<SlideList>
<SlideListItem>High performance</SlideListItem>
<SlideListItem>Great DX</SlideListItem>
</SlideList>
</>
}
right={
<>
<h3>Cons</h3>
<SlideList>
<SlideListItem>Learning curve</SlideListItem>
<SlideListItem>Setup time</SlideListItem>
</SlideList>
</>
}
/>
</Slide>
List with Rich Content
<SlideList>
<SlideListItem>
<strong>TypeScript support</strong> — Full type safety out of the box
</SlideListItem>
<SlideListItem>
<strong>React 19</strong> — Uses modern ViewTransitions API
</SlideListItem>
<SlideListItem>
<strong>Tailwind CSS v4</strong> — Latest styling capabilities
</SlideListItem>
</SlideList>
Nested Content
<SlideList>
<SlideListItem>
Main point with code example:
<SlideCode title="example.ts">{`const x = 42;`}</SlideCode>
</SlideListItem>
<SlideListItem>
Another point with explanation
</SlideListItem>
</SlideList>
Styling Details
Default Styles
SlideList:
- Flexbox column layout with
gap-4 spacing
- Text aligned left
- Full width container
SlideListItem:
- Horizontal flex layout with
gap-3 spacing
- Text size:
text-lg (mobile) to text-xl (desktop)
- Text color:
text-foreground/70 (70% opacity)
- Bullet: 1.5px dot with
bg-foreground/40, positioned at mt-2
Custom Bullet Styling
To customize the bullet appearance, override the bullet span:
<SlideListItem className="[&>span:first-child]:bg-blue-500 [&>span:first-child]:w-2 [&>span:first-child]:h-2">
Custom blue bullet
</SlideListItem>
Accessibility
- Semantic HTML: Uses
<ul> and <li> elements
- The bullet dot has
aria-hidden to prevent screen readers from announcing decorative content
- Content within list items is fully accessible