qws-org · alekseishmidko · Feb 26, 2026 · Feb 26, 2026
diff --git a/src/components/box/Box.stories.tsx b/src/components/box/Box.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { forwardRef, useState } from "react";
 
 import type { UIKitIndentations } from "~/components";
-import { Flex, UIKitProvider } from "~/components";
+import { Flex, Typography, UIKitProvider } from "~/components";
 import { createTheme } from "~/components/ui-kit-provider/createTheme";
 
 import { Box } from "./Box";
@@ -493,3 +493,112 @@ export const FromBottomAnimation: Story = {
     return <Box {...args}></Box>;
   },
 };
+
+export const ListWithDisc: Story = {
+  render() {
+    return (
+      <Flex
+        as="ul"
+        flexDirection="column"
+        listStyle={{ type: "disc" }}
+        align={"center"}
+      >
+        {["list disc", "list disc", "list disc"].map((item, index) => (
+          <Typography
+            key={index}
+            as="li"
+            display={"list-item"}
+            horizontalAlign="center"
+            fontSize={"body.mobile.large"}
+            lineHeight={"body.mobile.large"}
+            md={{
+              fontSize: "button.desktop.large",
+              lineHeight: "body.desktop.large",
+              horizontalAlign: "left",
+            }}
+          >
+            {item}
+          </Typography>
+        ))}
+      </Flex>
+    );
+  },
+};
+export const ListWithDecimal: Story = {
+  render() {
+    return (
+      <Flex
+        as="ul"
+        flexDirection="column"
+        listStyle={{ type: "decimal" }}
+        align={"center"}
+      >
+        {["list decimal", "list decimal", "list decimal"].map((item, index) => (
+          <Typography key={index} as="li" display={"list-item"}>
+            {item}
+          </Typography>
+        ))}
+      </Flex>
+    );
+  },
+};
+export const ListWithPositionExample: Story = {
+  render() {
+    return (
+      <div>
+        <Flex
+          as="ul"
+          flexDirection="column"
+          listStyle={{ type: "disc", position: "inside" }}
+          align={"center"}
+        >
+          {["list inside", "list inside", "list inside"].map((item, index) => (
+            <Typography bg={"orange"} key={index} as="li" display={"list-item"}>
+              {item}
+            </Typography>
+          ))}
+        </Flex>
+        <div className={"h-4"}></div>
+        <Flex
+          as="ul"
+          flexDirection="column"
+          listStyle={{ type: "disc", position: "outside" }}
+          align={"center"}
+        >
+          {["list outside", "list outside", "list outside"].map(
+            (item, index) => (
+              <Typography
+                bg={"orange"}
+                key={index}
+                as="li"
+                display={"list-item"}
+              >
+                {item}
+              </Typography>
+            ),
+          )}
+        </Flex>
+      </div>
+    );
+  },
+};
+export const CustomList: Story = {
+  render() {
+    return (
+      <Flex
+        as="ul"
+        flexDirection="column"
+        listStyle={{ type: "disc", position: "inside" }}
+        md={{ listStyle: { type: "none" } }}
+        d={{ listStyle: { type: "decimal", position: "outside" } }}
+        align={"center"}
+      >
+        {["CustomList", "CustomList", "CustomList"].map((item, index) => (
+          <Typography key={index} as="li" display={"list-item"}>
+            {item}
+          </Typography>
+        ))}
+      </Flex>
+    );
+  },
+};
diff --git a/src/components/box/Box.tsx b/src/components/box/Box.tsx
@@ -12,6 +12,7 @@ import { useAnimation } from "~/components/use-animation";
 import { useBorder } from "~/components/use-border";
 import { useCssEffects } from "~/components/use-css-effects";
 import { useCursor } from "~/components/use-cursor";
+import { useListStyle } from "~/components/use-list-style";
 import { useOutline } from "~/components/use-outline";
 import { useResolvedAttributes } from "~/components/use-resolved-attributes";
 
@@ -26,6 +27,7 @@ import type {
   UiKitDisplayProps,
   UiKitEffectProps,
   UIKitIndentationsProps,
+  UiKitListStyleProps,
   UiKitOutlineProps,
   UiKitPositionProps,
   UiKitTypographyProps,
@@ -46,6 +48,7 @@ export type DefaultProps = Partial<
     UiKitEffectProps &
     UiKitAnimationProps &
     UiKitCursorProps &
+    UiKitListStyleProps &
     UiKitDataAttributesProps &
     UiKitTypographyProps & { border?: UiKitBorderProps } & Omit<
       UiKitBackgroundProps,
@@ -190,6 +193,10 @@ export const Box = forwardRef(
     });
     // cursor
     const cursor = useCursor({ m: rest, md, d });
+
+    // list style
+    const listStyle = useListStyle({ m: rest, md, d });
+
     const resolvedProps = useResolvedAttributes(rest);
     const Root = as ?? "div";
     return (
@@ -203,7 +210,7 @@ export const Box = forwardRef(
           className={
             `${display.classNames} ${effects.className} ${outline.className} ${border.className} ` +
             `${spacing.className} ${positionStyles.className} ${background.className} ` +
-            `${dimension.className} ${typography.classNames} ${groupParent ? "group" : ""} ${cursor.className} ${animation.className} ${className ?? ""}`
+            `${dimension.className} ${typography.classNames} ${groupParent ? "group" : ""} ${cursor.className} ${listStyle.className} ${animation.className} ${className ?? ""}`
           }
           onClick={(e) => {
             onClick?.(e);
@@ -218,6 +225,7 @@ export const Box = forwardRef(
             ...typography.styles,
             ...effects.style,
             ...cursor.style,
+            ...listStyle.style,
             ...animation.style,
             ...(rest.style as object),
           }}

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -257,7 +257,8 @@ export type UiKitDisplayProps = {
     | "table"
     | "table-cell"
     | "grid"
-    | "table-row";
+    | "table-row"
+    | "list-item";
 };
 
 export type UiKitTypographyProps = {
@@ -319,6 +320,12 @@ export type UiKitOutlineProps = {
   outlineOffset?: string;
   outlineStyle?: "none" | "solid" | "dashed" | "dotted" | "double";
 };
+export type UiKitListStyleProps = {
+  listStyle?: {
+    position?: "inside" | "outside";
+    type?: "none" | "disc" | "decimal";
+  };
+};
 
 export type UiKitCursorProps = {
   cursor?:

diff --git a/src/components/use-list-style/index.ts b/src/components/use-list-style/index.ts
@@ -0,0 +1,60 @@
+import type { UiKitListStyleProps } from "~/components";
+
+type UseListStyleBaseProps = {
+  m?: UiKitListStyleProps;
+  md?: UiKitListStyleProps;
+  d?: UiKitListStyleProps;
+};
+
+type UseListStyleProps = UseListStyleBaseProps;
+
+type UseListStyleOutput = {
+  style?: Record<string, string>;
+  className?: string;
+};
+
+export const useListStyle = (props: UseListStyleProps): UseListStyleOutput => {
+  let className = "";
+  const style: UseListStyleOutput["style"] = {};
+
+  // type
+  if (props.m?.listStyle?.type) {
+    className += `list-${props.m.listStyle.type} `;
+  }
+  const mdType = props.md?.listStyle?.type ?? props.m?.listStyle?.type;
+  if (
+    props.md?.listStyle?.type &&
+    props.md.listStyle.type !== props.m?.listStyle?.type
+  ) {
+    className += `md:list-${props.md.listStyle.type} `;
+  }
+  if (props.d?.listStyle?.type && props.d.listStyle.type !== mdType) {
+    className += `lg:list-${props.d.listStyle.type} `;
+  }
+
+  // position
+  if (props.m?.listStyle?.position) {
+    className += `list-${props.m.listStyle.position} `;
+  }
+  const mdPosition =
+    props.md?.listStyle?.position ?? props.m?.listStyle?.position;
+  if (
+    props.md?.listStyle?.position &&
+    props.md.listStyle?.position !== props.m?.listStyle?.position
+  ) {
+    className += `md:list-${props.md.listStyle.position} `;
+  }
+  if (
+    props.d?.listStyle?.position &&
+    props.d.listStyle.position !== mdPosition
+  ) {
+    className += `lg:list-${props.d.listStyle.position} `;
+  }
+
+  // ---------------------------------------------------------------------------
+
+  return {
+    className: className.trim(),
+    style,
+  };
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -123,6 +123,18 @@ const generateCursorClasses = (): Array<string> => {
   const dCursors = initialCursors.map((cursor) => `lg:${cursor}`);
   return initialCursors.concat(mdCursors).concat(dCursors);
 };
+const generateListStyleClasses = (): Array<string> => {
+  const initialListStyle = [
+    "list-none",
+    "list-disc",
+    "list-decimal",
+    "list-inside",
+    "list-outside",
+  ];
+  const mdListStyles = initialListStyle.map((item) => `md:${item}`);
+  const dListStyles = initialListStyle.map((item) => `lg:${item}`);
+  return initialListStyle.concat(mdListStyles).concat(dListStyles);
+};
 const generateFlex = (): Array<string> => {
   return [
     "gap-[var(--gap)]",
@@ -636,6 +648,7 @@ export default {
     ...generateTypography(),
     ...generateEffectClasses(),
     ...generateCursorClasses(),
+    ...generateListStyleClasses(),
     ...generateAnimationClasses(),
   ],
   theme: {