UL

Source code
  • First
  • Second
  • Third
import { UL } from "rfui-package";

#Basic

  • First
  • Second
  • Third
<UL>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</UL>

#Bullet type

Set bulletType to either "bullet", "check", "arrow", "triangle" or "none". Defaults to "bullet".
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
<Stack className="gap-5">
  <UL bulletType="bullet">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="check">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="arrow">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="triangle">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="none">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
</Stack>

#Outside

Set bulletLocation to "outside".
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
<Stack className="gap-5">
  <UL bulletLocation="outside" bulletType="bullet">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletLocation="outside" bulletType="check">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletLocation="outside" bulletType="arrow">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletLocation="outside" bulletType="triangle">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
</Stack>

#Bigger

Here is an example of using className="text-xl" to make the unordered list larger.
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
<Stack className="gap-5">
  <UL bulletType="bullet" className="text-xl">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="check" className="text-xl">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="arrow" className="text-xl">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="triangle" className="text-xl">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
</Stack>

#Color

Here is an example of using className="text-neutral-500" to change the color of the unordered list.
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
<Stack className="gap-5">
  <UL bulletType="bullet" className="text-neutral-500">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="check" className="text-neutral-500">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="arrow" className="text-neutral-500">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
  <UL bulletType="triangle" className="text-neutral-500">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </UL>
</Stack>

#Custom

You'll have to do a little more work yourself for custom bullet types.
  • 😎One
  • 😎Two
  • 😎Three
<UL bulletType="none">
  <li>
    <Flex className="gap-2">
      <span>😎</span>
      One
    </Flex>
  </li>
  <li>
    <Flex className="gap-2">
      <span>😎</span>
      Two
    </Flex>
  </li>
  <li>
    <Flex className="gap-2">
      <span>😎</span>
      Three
    </Flex>
  </li>
</UL>

#Props

PropRequiredDefaultType and notes
bulletLocation-'inside'
'inside' | 'outside'
children-
ComponentChild
...rest--
ComponentProps<"ul">
See the docs for rest parameters. For UL, you could pass anything you normally would pass to <ul> because the return value looks something like this:
<ul
  className={className}
  {...restWithoutClass}
>
  {children}
</ul>