diff --git a/docs/docs/components/list.mdx b/docs/docs/components/list.mdx
new file mode 100644
index 0000000..32f18db
--- /dev/null
+++ b/docs/docs/components/list.mdx
@@ -0,0 +1,102 @@
+# List
+
+### Quick start
+
+Here's a quick start guide to get started with the button component
+
+### Importing Component
+
+```jsx
+import { List, ListItem } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### List Plain
+
+import "@hover-design/react/dist/style.css";
+import { List, ListItem } from "@hover-design/react";
+export const ListComponent = ({ variant, children, type }) => (
+
+
+ {children}
+
+
+);
+export const ListItemComp = ({ variant, children }) => (
+ {children}
+);
+
+```jsx
+
+ One
+ Two
+
+```
+
+
+ One
+ Two
+
+
+##### List Horizontal
+
+```jsx
+
+ One
+ Two
+
+```
+
+
+
+
+ One
+ Two
+
+
+
+##### List StyleType
+
+```jsx
+
+ One
+ Two
+
+```
+
+###### Square
+
+
+ One
+ Two
+
+
+###### Circle
+
+
+ One
+ Two
+
+
+###### Number
+
+
+ One
+ Two
+
+
+###### Custom Emoji
+
+
+ One
+ Two
+
+
+### Props Referece
+
+| Attributes | Values | Optional ? |
+| :--------- | :-------------------------------------------------------------------------------------------------------------------------------: | ---------: |
+| variant | `horizontal` | `vertical` | Yes |
+| type | `square` | `circle` | `\1F44D` | [listStyleType](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) | Yes |
+| children | React.Children | Yes |
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 23e0852..80931b5 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -6,7 +6,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import styles from "./index.module.css";
import HomepageFeatures from "@site/src/components/HomepageFeatures";
import "@hover-design/react/dist/style.css";
-
+import { List, ListItem } from "@hover-design/react";
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
diff --git a/lib/package.json b/lib/package.json
index e89badc..f1f5180 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -17,6 +17,7 @@
},
"dependencies": {
"@vanilla-extract/css": "^1.6.8",
+ "@vanilla-extract/dynamic": "^2.0.2",
"@vanilla-extract/recipes": "^0.2.3",
"@vanilla-extract/sprinkles": "^1.3.3",
"@vanilla-extract/vite-plugin": "^3.1.0",
diff --git a/lib/src/components/List/List.tsx b/lib/src/components/List/List.tsx
new file mode 100644
index 0000000..b7223b8
--- /dev/null
+++ b/lib/src/components/List/List.tsx
@@ -0,0 +1,29 @@
+import React, { ForwardRefRenderFunction } from "react";
+
+import { IListProps } from "./list.types";
+import { listStyles, listThemeVars, listThemeClass } from "./list.css";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+
+const ListComponent: ForwardRefRenderFunction = (
+ { children, variant, type, ...props },
+ ref
+) => {
+ const listStyle = listStyles({
+ variant: variant,
+ });
+ return (
+
+ );
+};
+
+const ListWithRef = React.forwardRef(ListComponent);
+export { ListWithRef as List };
diff --git a/lib/src/components/List/index.ts b/lib/src/components/List/index.ts
new file mode 100644
index 0000000..870e1dc
--- /dev/null
+++ b/lib/src/components/List/index.ts
@@ -0,0 +1 @@
+export * from "./List";
diff --git a/lib/src/components/List/list.css.ts b/lib/src/components/List/list.css.ts
new file mode 100644
index 0000000..3fd3091
--- /dev/null
+++ b/lib/src/components/List/list.css.ts
@@ -0,0 +1,26 @@
+import { createTheme } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { IListTheme } from "./list.types";
+export const [listThemeClass, listThemeVars]: IListTheme = createTheme({
+ listStyles: {
+ listStyleType: "none",
+ },
+});
+export const listStyles = recipe({
+ base: {
+ listStyleType: listThemeVars.listStyles.listStyleType,
+ padding: 0,
+ margin: 0,
+ },
+ variants: {
+ variant: {
+ horizontal: {
+ display: "inline-flex",
+ gap: "24px",
+ },
+ vertical: {
+ display: "block",
+ },
+ },
+ },
+});
diff --git a/lib/src/components/List/list.types.ts b/lib/src/components/List/list.types.ts
new file mode 100644
index 0000000..c2440a1
--- /dev/null
+++ b/lib/src/components/List/list.types.ts
@@ -0,0 +1,8 @@
+import { RecipeVariants } from "@vanilla-extract/recipes";
+import { listStyles } from "./list.css";
+
+export type IListProps = JSX.IntrinsicElements["ul"] &
+ RecipeVariants & {
+ type?: CSSStyleDeclaration["listStyleType"];
+ };
+export type IListTheme = [string, { listStyles: { listStyleType: string } }];
diff --git a/lib/src/components/ListItem/ListItem.tsx b/lib/src/components/ListItem/ListItem.tsx
new file mode 100644
index 0000000..7428d66
--- /dev/null
+++ b/lib/src/components/ListItem/ListItem.tsx
@@ -0,0 +1,21 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { listItemStyles } from "./list-item.css";
+import { IListItemProps } from "./list-item.types";
+
+const ListItemComponent: ForwardRefRenderFunction<
+ HTMLLIElement,
+ IListItemProps
+> = ({ children, ...props }, ref) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const ListItemWithRef = React.forwardRef(ListItemComponent);
+export { ListItemWithRef as ListItem };
diff --git a/lib/src/components/ListItem/index.ts b/lib/src/components/ListItem/index.ts
new file mode 100644
index 0000000..f86a292
--- /dev/null
+++ b/lib/src/components/ListItem/index.ts
@@ -0,0 +1 @@
+export * from "./ListItem";
diff --git a/lib/src/components/ListItem/list-item.css.ts b/lib/src/components/ListItem/list-item.css.ts
new file mode 100644
index 0000000..8ef1949
--- /dev/null
+++ b/lib/src/components/ListItem/list-item.css.ts
@@ -0,0 +1,5 @@
+import { recipe } from "@vanilla-extract/recipes";
+
+export const listItemStyles = recipe({
+ base: {},
+});
diff --git a/lib/src/components/ListItem/list-item.types.ts b/lib/src/components/ListItem/list-item.types.ts
new file mode 100644
index 0000000..c7841ca
--- /dev/null
+++ b/lib/src/components/ListItem/list-item.types.ts
@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface IListItemProps
+ extends React.DetailedHTMLProps<
+ React.LiHTMLAttributes,
+ HTMLLIElement
+ > {
+ children: React.ReactNode;
+}
diff --git a/lib/src/index.ts b/lib/src/index.ts
index 31473aa..da7a529 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -2,3 +2,5 @@ export * from "./components/Button";
export * from "./components/Card";
export * from "./components/reset";
export * from "./components/Switch";
+export * from "./components/List";
+export * from "./components/ListItem";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 28adeb0..ab75216 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -76,6 +76,7 @@ importers:
'@types/react': ^17.0.0
'@types/react-dom': ^17.0.0
'@vanilla-extract/css': ^1.6.8
+ '@vanilla-extract/dynamic': ^2.0.2
'@vanilla-extract/recipes': ^0.2.3
'@vanilla-extract/sprinkles': ^1.3.3
'@vanilla-extract/vite-plugin': ^3.1.0
@@ -91,6 +92,7 @@ importers:
vite-tsconfig-paths: ^3.4.0
dependencies:
'@vanilla-extract/css': 1.6.8
+ '@vanilla-extract/dynamic': 2.0.2
'@vanilla-extract/recipes': 0.2.3_@vanilla-extract+css@1.6.8
'@vanilla-extract/sprinkles': 1.4.0_@vanilla-extract+css@1.6.8
'@vanilla-extract/vite-plugin': 3.1.3_vite@2.8.6
@@ -2898,6 +2900,12 @@ packages:
outdent: 0.8.0
dev: false
+ /@vanilla-extract/dynamic/2.0.2:
+ resolution: {integrity: sha512-U4nKaEQ8Kuz+exXEr51DUpyaOuzo24/S/k1YbDPQR06cYcNjQqvwFRnwWtZ+9ImocqM1wTKtzrdUgSTtLGIwAg==}
+ dependencies:
+ '@vanilla-extract/private': 1.0.3
+ dev: false
+
/@vanilla-extract/integration/3.0.0:
resolution: {integrity: sha512-9VraQc7Qmdzvdrylq2ZwCbli4UxC1q2CtIfVr1fGOn8a6Xj+dXprrNboEqOLg29nOzPW1xldyIojRxMjWw1VEw==}
dependencies: