Line up your content with our sleek List. Perfect for a run-down of related content


    Quick Bites of Knowledge
  • Intriguing Mysteries of the Deep Sea
  • The Art of Mindful Living
  • World's Most Haunted Places
  • A Brief History of Quantum Physics
  • Ten Must-Read Classics for Every Book Lover
  • Stay Curious, Keep Learning
1 import { List, Flex } from '@haktos/sugarcoat-ui';
3 <Flex gap='3' direction='column' justify='center'>
4 <List
5 header='Quick Bites of Knowledge'
6 footer='Stay Curious, Keep Learning'
7 >
8 <List.Item>Intriguing Mysteries of the Deep Sea</List.Item>
9 <List.Item>The Art of Mindful Living</List.Item>
10 <List.Item>World's Most Haunted Places</List.Item>
11 <List.Item>A Brief History of Quantum Physics</List.Item>
12 <List.Item>Ten Must-Read Classics for Every Book Lover</List.Item>
13 </List>
14 </Flex>

API Reference


Say hello to List, your multi-purpose curator of items. Offering ordered or unordered styles with customizable aesthetics, it arranges your content into a neat ensemble, ready for the spotlight.


List.Item is the virtuoso performer in List's ensemble, offering extensive customization to help your content shine.


List.Header is your friendly guide at the start of your journey. As an encapsulated element at the beginning of your List, it sets the tone, introduces the theme, and creates anticipation for what's to follow. Consider it your List's forward, preface, or introduction.


List.Footer, the elegant conclusion to your well-curated List. Positioned comfortably at the end, it's the place for your closing remarks, summations, or simply a stylized farewell. It's the epilogue that leaves a lasting impression, wrapping up your List's story with grace and finesse.

Component Properties


The comfy fit. Choose 'sm', 'md', or 'lg' to adjust padding and font size according to your needs.


The List’s fashion statement. Specify 'ordered' for a numbered list or 'unordered' for bullet points.


The attention seeker. Add a shadow ranging from 'xs' to 'lg' to elevate your list items off the page.


The boundary marker. Enable to draw a border around each item, giving them their individual space.


The conversation starter. Enable to highlight items when hovered, nudging your users to interact.

headerstring | React.ReactNode

The welcoming committee. A string or ReactNode to serve as a stylized introduction to your list.

footerstring | React.ReactNode

The farewell note. Like the header, but at the bottom, concluding your list with grace.


The headline. Give your item a string title that takes center stage.


The narrative. A string providing additional details to support your title.

avatarstring | ReactNode

The pictorial identity. A URL string or ReactNode, rendering an Avatar Component or any other you'd like.


The avatar stylist. Choose from 'circle', 'rounded', or 'square' to shape your avatar according to your vibe.


The interactive element. A ReactNode array, perfect for adding buttons or other actionable elements to the right side of your item.