From 6c107fcd46faef2ff57dfc0eb56b21738bb85f51 Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Thu, 9 Jan 2025 23:46:10 +0800
Subject: [PATCH 1/7] feat(ui): add pagination component

---
 .changeset/ninety-spies-crash.md              |   5 +
 .../docs/src/app/ui/components/pagination.mdx |  39 ++++++
 .../demos/pagination/pagination.tsx           |  40 +++++++
 apps/docs/src/config/links.ts                 |   4 +
 packages/ui/src/index.ts                      |   1 +
 packages/ui/src/pagination.tsx                | 113 ++++++++++++++++++
 6 files changed, 202 insertions(+)
 create mode 100644 .changeset/ninety-spies-crash.md
 create mode 100644 apps/docs/src/app/ui/components/pagination.mdx
 create mode 100644 apps/docs/src/components/demos/pagination/pagination.tsx
 create mode 100644 packages/ui/src/pagination.tsx

diff --git a/.changeset/ninety-spies-crash.md b/.changeset/ninety-spies-crash.md
new file mode 100644
index 00000000..bc2e7f39
--- /dev/null
+++ b/.changeset/ninety-spies-crash.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+add pagination component
diff --git a/apps/docs/src/app/ui/components/pagination.mdx b/apps/docs/src/app/ui/components/pagination.mdx
new file mode 100644
index 00000000..41e23531
--- /dev/null
+++ b/apps/docs/src/app/ui/components/pagination.mdx
@@ -0,0 +1,39 @@
+---
+title: Pagination
+description: Pagination with page navigation, next and previous links.
+---
+
+<ComponentPreview name='pagination/pagination' />
+
+## Usage
+
+```tsx
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+} from '@/components/ui/pagination'
+```
+
+```tsx
+<Pagination>
+  <PaginationContent>
+    <PaginationItem>
+      <PaginationPrevious href='#' />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href='#'>1</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationEllipsis />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext href='#' />
+    </PaginationItem>
+  </PaginationContent>
+</Pagination>
+```
diff --git a/apps/docs/src/components/demos/pagination/pagination.tsx b/apps/docs/src/components/demos/pagination/pagination.tsx
new file mode 100644
index 00000000..d1c5f775
--- /dev/null
+++ b/apps/docs/src/components/demos/pagination/pagination.tsx
@@ -0,0 +1,40 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+} from '@tszhong0411/ui'
+
+const PaginationDemo = () => {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href='#' />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#'>1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#' isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#'>3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href='#' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+export default PaginationDemo
diff --git a/apps/docs/src/config/links.ts b/apps/docs/src/config/links.ts
index c236a945..ed5d8a3e 100644
--- a/apps/docs/src/config/links.ts
+++ b/apps/docs/src/config/links.ts
@@ -118,6 +118,10 @@ export const SIDEBAR_LINKS: SidebarLinks = [
         href: '/ui/components/marquee',
         text: 'Marquee'
       },
+      {
+        href: '/ui/components/pagination',
+        text: 'Pagination'
+      },
       {
         href: '/ui/components/popover',
         text: 'Popover'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 9b8a7d90..a1f8bd77 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -22,6 +22,7 @@ export * from './label'
 export * from './link'
 export * from './logo'
 export * from './marquee'
+export * from './pagination'
 export * from './popover'
 export * from './scroll-area'
 export * from './select'
diff --git a/packages/ui/src/pagination.tsx b/packages/ui/src/pagination.tsx
new file mode 100644
index 00000000..d8129503
--- /dev/null
+++ b/packages/ui/src/pagination.tsx
@@ -0,0 +1,113 @@
+import { cn } from '@tszhong0411/utils'
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
+import Link from 'next/link'
+
+import { type ButtonProps, buttonVariants } from './button'
+
+type PaginationProps = React.ComponentProps<'nav'>
+
+export const Pagination = (props: PaginationProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <nav
+      role='navigation'
+      aria-label='pagination'
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...rest}
+    />
+  )
+}
+
+type PaginationContentProps = React.ComponentProps<'ul'>
+
+export const PaginationContent = (props: PaginationContentProps) => {
+  const { className, ...rest } = props
+
+  return <ul className={cn('flex flex-row items-center gap-1', className)} {...rest} />
+}
+
+type PaginationItemProps = React.ComponentProps<'li'>
+
+export const PaginationItem = (props: PaginationItemProps) => {
+  const { className, ...rest } = props
+
+  return <li className={cn(className)} {...rest} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<typeof Link>
+
+export const PaginationLink = (props: PaginationLinkProps) => {
+  const { className, isActive, size = 'icon', ...rest } = props
+
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-has-content -- it's a component
+    <Link
+      aria-current={isActive ? 'page' : undefined}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size
+        }),
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
+type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink>
+
+export const PaginationPrevious = (props: PaginationPreviousProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <PaginationLink
+      aria-label='Go to previous page'
+      size='default'
+      className={cn('gap-1 pl-2.5', className)}
+      {...rest}
+    >
+      <ChevronLeftIcon className='size-4' />
+      <span>Previous</span>
+    </PaginationLink>
+  )
+}
+
+type PaginationNextProps = React.ComponentProps<typeof PaginationLink>
+
+export const PaginationNext = (props: PaginationNextProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <PaginationLink
+      aria-label='Go to next page'
+      size='default'
+      className={cn('gap-1 pr-2.5', className)}
+      {...rest}
+    >
+      <span>Next</span>
+      <ChevronRightIcon className='size-4' />
+    </PaginationLink>
+  )
+}
+
+type PaginationEllipsisProps = React.ComponentProps<'span'>
+
+export const PaginationEllipsis = (props: PaginationEllipsisProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <span
+      aria-hidden
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...rest}
+    >
+      <MoreHorizontalIcon className='size-4' />
+      <span className='sr-only'>More pages</span>
+    </span>
+  )
+}

From 197d12270ff1a3333113f2eff951193dec3f71e0 Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Thu, 9 Jan 2025 18:30:47 +0800
Subject: [PATCH 2/7] feat(ui): add switch component

---
 .changeset/funny-readers-wink.md              |  5 +++
 apps/docs/src/app/ui/components/switch.mdx    | 16 ++++++++++
 .../src/components/demos/switch/switch.tsx    | 12 +++++++
 apps/docs/src/config/links.ts                 |  4 +++
 packages/ui/package.json                      |  1 +
 packages/ui/src/index.ts                      |  1 +
 packages/ui/src/switch.tsx                    | 26 ++++++++++++++++
 pnpm-lock.yaml                                | 31 +++++++++++++++++++
 8 files changed, 96 insertions(+)
 create mode 100644 .changeset/funny-readers-wink.md
 create mode 100644 apps/docs/src/app/ui/components/switch.mdx
 create mode 100644 apps/docs/src/components/demos/switch/switch.tsx
 create mode 100644 packages/ui/src/switch.tsx

diff --git a/.changeset/funny-readers-wink.md b/.changeset/funny-readers-wink.md
new file mode 100644
index 00000000..4d749fa7
--- /dev/null
+++ b/.changeset/funny-readers-wink.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add switch component
diff --git a/apps/docs/src/app/ui/components/switch.mdx b/apps/docs/src/app/ui/components/switch.mdx
new file mode 100644
index 00000000..5b7ba414
--- /dev/null
+++ b/apps/docs/src/app/ui/components/switch.mdx
@@ -0,0 +1,16 @@
+---
+title: Switch
+description: A control that allows the user to toggle between checked and not checked.
+---
+
+<ComponentPreview name='switch/switch' />
+
+## Usage
+
+```tsx
+import { Switch } from '@tszhong0411/ui'
+```
+
+```tsx
+<Switch />
+```
diff --git a/apps/docs/src/components/demos/switch/switch.tsx b/apps/docs/src/components/demos/switch/switch.tsx
new file mode 100644
index 00000000..c160131f
--- /dev/null
+++ b/apps/docs/src/components/demos/switch/switch.tsx
@@ -0,0 +1,12 @@
+import { Label, Switch } from '@tszhong0411/ui'
+
+const SwitchDemo = () => {
+  return (
+    <div className='flex items-center space-x-2'>
+      <Switch id='airplane-mode' />
+      <Label htmlFor='airplane-mode'>Airplane Mode</Label>
+    </div>
+  )
+}
+
+export default SwitchDemo
diff --git a/apps/docs/src/config/links.ts b/apps/docs/src/config/links.ts
index ed5d8a3e..eb483795 100644
--- a/apps/docs/src/config/links.ts
+++ b/apps/docs/src/config/links.ts
@@ -154,6 +154,10 @@ export const SIDEBAR_LINKS: SidebarLinks = [
         href: '/ui/components/slider',
         text: 'Slider'
       },
+      {
+        href: '/ui/components/switch',
+        text: 'Switch'
+      },
       {
         href: '/ui/components/table',
         text: 'Table'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 99c83eb6..a2606d47 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -45,6 +45,7 @@
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slider": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index a1f8bd77..ad95d49d 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -31,6 +31,7 @@ export * from './sheet'
 export * from './sidebar'
 export * from './skeleton'
 export * from './slider'
+export * from './switch'
 export * from './table'
 export * from './tabs'
 export * from './textarea'
diff --git a/packages/ui/src/switch.tsx b/packages/ui/src/switch.tsx
new file mode 100644
index 00000000..bc5ccd88
--- /dev/null
+++ b/packages/ui/src/switch.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { cn } from '@tszhong0411/utils'
+
+type SwitchProps = React.ComponentProps<typeof SwitchPrimitives.Root>
+
+export const Switch = (props: SwitchProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <SwitchPrimitives.Root
+      className={cn(
+        'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...rest}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          'bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitives.Root>
+  )
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fded25e3..06283409 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -842,6 +842,9 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.1.1
         version: 1.1.1(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-switch':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-tabs':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -4031,6 +4034,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-switch@1.1.2':
+    resolution: {integrity: sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tabs@1.1.2':
     resolution: {integrity: sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==}
     peerDependencies:
@@ -14168,6 +14184,21 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.0.2
 
+  '@radix-ui/react-switch@1.1.2(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.2
+      '@types/react-dom': 19.0.2(@types/react@19.0.2)
+
   '@radix-ui/react-tabs@1.1.2(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1

From a7fc2d7e5f5db812a6e680e44d201cf8d5a2de42 Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Thu, 9 Jan 2025 19:13:27 +0800
Subject: [PATCH 3/7] fix(ui): standardlize the styles of dropdown menu

---
 .changeset/few-turkeys-protect.md |  5 +++++
 packages/ui/src/dropdown-menu.tsx | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/few-turkeys-protect.md

diff --git a/.changeset/few-turkeys-protect.md b/.changeset/few-turkeys-protect.md
new file mode 100644
index 00000000..ab9f0ad0
--- /dev/null
+++ b/.changeset/few-turkeys-protect.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Standardlize the styles of dropdown menu
diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
index fce22a47..df3f7ef9 100644
--- a/packages/ui/src/dropdown-menu.tsx
+++ b/packages/ui/src/dropdown-menu.tsx
@@ -22,8 +22,8 @@ export const DropdownMenuSubTrigger = (
     <DropdownMenuPrimitive.SubTrigger
       className={cn(
         'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-        'focus:bg-accent',
-        'data-[state=open]:bg-accent',
+        'focus:bg-accent focus:text-accent-foreground',
+        'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         inset && 'pl-8',
         className
       )}
@@ -163,7 +163,11 @@ export const DropdownMenuLabel = (
 
   return (
     <DropdownMenuPrimitive.Label
-      className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+      className={cn(
+        'text-foreground px-2 py-1.5 text-sm font-semibold',
+        inset && 'pl-8',
+        className
+      )}
       {...rest}
     />
   )
@@ -176,7 +180,7 @@ export const DropdownMenuSeparator = (
 
   return (
     <DropdownMenuPrimitive.Separator
-      className={cn('bg-muted -mx-1 my-1 h-px', className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...rest}
     />
   )
@@ -185,7 +189,12 @@ export const DropdownMenuSeparator = (
 export const DropdownMenuShortcut = (props: React.ComponentProps<'span'>) => {
   const { className, ...rest } = props
 
-  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...rest} />
+  return (
+    <span
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+      {...rest}
+    />
+  )
 }
 
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName

From 3af008d858ee03cde10f8475dc399fda7b08e47d Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Thu, 9 Jan 2025 19:15:11 +0800
Subject: [PATCH 4/7] feat(ui): add context menu component

---
 .changeset/tall-knives-deny.md                |   5 +
 .cspell/names.txt                             |   2 +
 .../src/app/ui/components/context-menu.mdx    |  29 +++
 .../demos/context-menu/context-menu.tsx       |  67 ++++++
 apps/docs/src/config/links.ts                 |   4 +
 packages/ui/package.json                      |   1 +
 packages/ui/src/context-menu.tsx              | 199 ++++++++++++++++++
 packages/ui/src/index.ts                      |   1 +
 pnpm-lock.yaml                                |  30 +++
 9 files changed, 338 insertions(+)
 create mode 100644 .changeset/tall-knives-deny.md
 create mode 100644 apps/docs/src/app/ui/components/context-menu.mdx
 create mode 100644 apps/docs/src/components/demos/context-menu/context-menu.tsx
 create mode 100644 packages/ui/src/context-menu.tsx

diff --git a/.changeset/tall-knives-deny.md b/.changeset/tall-knives-deny.md
new file mode 100644
index 00000000..b274e196
--- /dev/null
+++ b/.changeset/tall-knives-deny.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add context menu component
diff --git a/.cspell/names.txt b/.cspell/names.txt
index 896865e1..fb375b05 100644
--- a/.cspell/names.txt
+++ b/.cspell/names.txt
@@ -7,6 +7,7 @@ calcom
 cleanmyma
 cleanmymac
 cleanshot
+colm
 delba
 duarte
 ghostty
@@ -38,6 +39,7 @@ samuelkraft
 tableplus
 tabtab
 theodorusclarence
+Tuite
 umami
 visualstudiocode
 vocs
diff --git a/apps/docs/src/app/ui/components/context-menu.mdx b/apps/docs/src/app/ui/components/context-menu.mdx
new file mode 100644
index 00000000..adb3aa0e
--- /dev/null
+++ b/apps/docs/src/app/ui/components/context-menu.mdx
@@ -0,0 +1,29 @@
+---
+title: Context Menu
+description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+---
+
+<ComponentPreview name='context-menu/context-menu' />
+
+## Usage
+
+```tsx
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger
+} from '@tszhong0411/ui'
+```
+
+```tsx
+<ContextMenu>
+  <ContextMenuTrigger>Right click</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Profile</ContextMenuItem>
+    <ContextMenuItem>Billing</ContextMenuItem>
+    <ContextMenuItem>Team</ContextMenuItem>
+    <ContextMenuItem>Subscription</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
diff --git a/apps/docs/src/components/demos/context-menu/context-menu.tsx b/apps/docs/src/components/demos/context-menu/context-menu.tsx
new file mode 100644
index 00000000..8ec4909a
--- /dev/null
+++ b/apps/docs/src/components/demos/context-menu/context-menu.tsx
@@ -0,0 +1,67 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+} from '@tszhong0411/ui'
+
+const ContextMenuDemo = () => {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className='flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm'>
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className='w-64'>
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className='w-48'>
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value='pedro'>
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioItem value='pedro'>Pedro Duarte</ContextMenuRadioItem>
+          <ContextMenuRadioItem value='colm'>Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+
+export default ContextMenuDemo
diff --git a/apps/docs/src/config/links.ts b/apps/docs/src/config/links.ts
index eb483795..4fff2e56 100644
--- a/apps/docs/src/config/links.ts
+++ b/apps/docs/src/config/links.ts
@@ -82,6 +82,10 @@ export const SIDEBAR_LINKS: SidebarLinks = [
         href: '/ui/components/command',
         text: 'Command'
       },
+      {
+        href: '/ui/components/context-menu',
+        text: 'Context Menu'
+      },
       {
         href: '/ui/components/data-table',
         text: 'Data Table'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a2606d47..95eb4d2a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -36,6 +36,7 @@
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.4",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
diff --git a/packages/ui/src/context-menu.tsx b/packages/ui/src/context-menu.tsx
new file mode 100644
index 00000000..0a5ea13d
--- /dev/null
+++ b/packages/ui/src/context-menu.tsx
@@ -0,0 +1,199 @@
+'use client'
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { cn } from '@tszhong0411/utils'
+import { CheckIcon, ChevronRightIcon, DotIcon } from 'lucide-react'
+
+export const ContextMenu = ContextMenuPrimitive.Root
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+export const ContextMenuGroup = ContextMenuPrimitive.Group
+export const ContextMenuPortal = ContextMenuPrimitive.Portal
+export const ContextMenuSub = ContextMenuPrimitive.Sub
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+type ContextMenuSubTriggerProps = {
+  inset?: boolean
+} & React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger>
+
+export const ContextMenuSubTrigger = (props: ContextMenuSubTriggerProps) => {
+  const { className, inset, children, ...rest } = props
+
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      className={cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        'focus:bg-accent focus:text-accent-foreground',
+        'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        inset && 'pl-8',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+      <ChevronRightIcon className='ml-auto size-4' />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+type ContextMenuSubContentProps = React.ComponentProps<typeof ContextMenuPrimitive.SubContent>
+
+export const ContextMenuSubContent = (props: ContextMenuSubContentProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <ContextMenuPrimitive.SubContent
+      className={cn(
+        'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[side=top]:slide-in-from-bottom-2',
+        'data-[side=right]:slide-in-from-left-2',
+        'data-[side=bottom]:slide-in-from-top-2',
+        'data-[side=left]:slide-in-from-right-2',
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
+type ContextMenuContentProps = React.ComponentProps<typeof ContextMenuPrimitive.Content>
+
+export const ContextMenuContent = (props: ContextMenuContentProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        className={cn(
+          'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          'data-[side=top]:slide-in-from-bottom-2',
+          'data-[side=right]:slide-in-from-left-2',
+          'data-[side=bottom]:slide-in-from-top-2',
+          'data-[side=left]:slide-in-from-right-2',
+          className
+        )}
+        {...rest}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+type ContextMenuItemProps = {
+  inset?: boolean
+} & React.ComponentProps<typeof ContextMenuPrimitive.Item>
+
+export const ContextMenuItem = (props: ContextMenuItemProps) => {
+  const { className, inset, ...rest } = props
+
+  return (
+    <ContextMenuPrimitive.Item
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+        'focus:bg-accent focus:text-accent-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
+type ContextMenuCheckboxItemProps = React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>
+
+export const ContextMenuCheckboxItem = (props: ContextMenuCheckboxItemProps) => {
+  const { className, children, checked, ...rest } = props
+
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'focus:bg-accent focus:text-accent-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )}
+      checked={checked}
+      {...rest}
+    >
+      <span className='absolute left-2 flex size-3.5 items-center justify-center'>
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className='size-4' />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+type ContextMenuRadioItemProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>
+
+export const ContextMenuRadioItem = (props: ContextMenuRadioItemProps) => {
+  const { className, children, ...rest } = props
+
+  return (
+    <ContextMenuPrimitive.RadioItem
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'focus:bg-accent focus:text-accent-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )}
+      {...rest}
+    >
+      <span className='absolute left-2 flex size-3.5 items-center justify-center'>
+        <ContextMenuPrimitive.ItemIndicator>
+          <DotIcon className='size-9' />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+type ContextMenuLabelProps = {
+  inset?: boolean
+} & React.ComponentProps<typeof ContextMenuPrimitive.Label>
+
+export const ContextMenuLabel = (props: ContextMenuLabelProps) => {
+  const { className, inset, ...rest } = props
+
+  return (
+    <ContextMenuPrimitive.Label
+      className={cn(
+        'text-foreground px-2 py-1.5 text-sm font-semibold',
+        inset && 'pl-8',
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
+type ContextMenuSeparatorProps = React.ComponentProps<typeof ContextMenuPrimitive.Separator>
+
+export const ContextMenuSeparator = (props: ContextMenuSeparatorProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...rest}
+    />
+  )
+}
+
+type ContextMenuShortcutProps = React.ComponentProps<'span'>
+
+export const ContextMenuShortcut = (props: ContextMenuShortcutProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <span
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index ad95d49d..aa37c028 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -12,6 +12,7 @@ export * from './checkbox'
 export * from './code-block'
 export * from './collapsible'
 export * from './command'
+export * from './context-menu'
 export * from './data-table'
 export * from './dialog'
 export * from './dropdown-menu'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 06283409..89454b37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -815,6 +815,9 @@ importers:
       '@radix-ui/react-collapsible':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-context-menu':
+        specifier: ^2.2.4
+        version: 2.2.4(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-dialog':
         specifier: ^1.1.4
         version: 1.1.4(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -3759,6 +3762,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context-menu@2.2.4':
+    resolution: {integrity: sha512-ap4wdGwK52rJxGkwukU1NrnEodsUFQIooANKu+ey7d6raQ2biTcEf8za1zr0mgFHieevRTB2nK4dJeN8pTAZGQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-context@1.1.1':
     resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
     peerDependencies:
@@ -13879,6 +13895,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.0.2
 
+  '@radix-ui/react-context-menu@2.2.4(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.2
+      '@types/react-dom': 19.0.2(@types/react@19.0.2)
+
   '@radix-ui/react-context@1.1.1(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       react: 19.0.0

From f2ff8c3d2e3f118e56c2df635da46d7aa4cd56f1 Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Thu, 9 Jan 2025 22:36:46 +0800
Subject: [PATCH 5/7] chore: typo

---
 .changeset/few-turkeys-protect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/few-turkeys-protect.md b/.changeset/few-turkeys-protect.md
index ab9f0ad0..f742045a 100644
--- a/.changeset/few-turkeys-protect.md
+++ b/.changeset/few-turkeys-protect.md
@@ -2,4 +2,4 @@
 '@tszhong0411/ui': patch
 ---
 
-Standardlize the styles of dropdown menu
+Standardize the styles of dropdown menu

From e80a697deccb3c98f3590dd0a5cde642994d6654 Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Thu, 9 Jan 2025 21:43:06 +0800
Subject: [PATCH 6/7] feat(ui): add navigation menu component

---
 .changeset/shaggy-sloths-reflect.md           |   5 +
 .../src/app/ui/components/navigation-menu.mdx |  34 +++++
 .../demos/navigation-menu/navigation-menu.tsx | 126 ++++++++++++++++++
 apps/docs/src/config/links.ts                 |   4 +
 packages/ui/package.json                      |   1 +
 packages/ui/src/index.ts                      |   1 +
 packages/ui/src/navigation-menu.tsx           | 112 ++++++++++++++++
 pnpm-lock.yaml                                |  38 ++++++
 8 files changed, 321 insertions(+)
 create mode 100644 .changeset/shaggy-sloths-reflect.md
 create mode 100644 apps/docs/src/app/ui/components/navigation-menu.mdx
 create mode 100644 apps/docs/src/components/demos/navigation-menu/navigation-menu.tsx
 create mode 100644 packages/ui/src/navigation-menu.tsx

diff --git a/.changeset/shaggy-sloths-reflect.md b/.changeset/shaggy-sloths-reflect.md
new file mode 100644
index 00000000..3a086fa0
--- /dev/null
+++ b/.changeset/shaggy-sloths-reflect.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add navigation menu component
diff --git a/apps/docs/src/app/ui/components/navigation-menu.mdx b/apps/docs/src/app/ui/components/navigation-menu.mdx
new file mode 100644
index 00000000..30171d7f
--- /dev/null
+++ b/apps/docs/src/app/ui/components/navigation-menu.mdx
@@ -0,0 +1,34 @@
+---
+title: Navigation Menu
+description: A collection of links for navigating websites.
+---
+
+<ComponentPreview name='navigation-menu/navigation-menu' />
+
+## Usage
+
+```tsx
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport
+} from '@tszhong0411/ui'
+```
+
+```tsx
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink>Link</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
diff --git a/apps/docs/src/components/demos/navigation-menu/navigation-menu.tsx b/apps/docs/src/components/demos/navigation-menu/navigation-menu.tsx
new file mode 100644
index 00000000..2291972d
--- /dev/null
+++ b/apps/docs/src/components/demos/navigation-menu/navigation-menu.tsx
@@ -0,0 +1,126 @@
+'use client'
+
+import {
+  Logo,
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle
+} from '@tszhong0411/ui'
+import { cn } from '@tszhong0411/utils'
+import Link from 'next/link'
+
+const components: Array<{ title: string; href: string; description: string }> = [
+  {
+    title: 'Alert Dialog',
+    href: '/ui/components/alert-dialog',
+    description:
+      'A modal dialog that interrupts the user with important content and expects a response.'
+  },
+  {
+    title: 'Hover Card',
+    href: '/ui/components/hover-card',
+    description: 'For sighted users to preview content available behind a link.'
+  },
+  {
+    title: 'Progress',
+    href: '/ui/components/progress',
+    description:
+      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.'
+  },
+  {
+    title: 'Scroll-area',
+    href: '/ui/components/scroll-area',
+    description: 'Visually or semantically separates content.'
+  },
+  {
+    title: 'Tabs',
+    href: '/ui/components/tabs',
+    description:
+      'A set of layered sections of content—known as tab panels—that are displayed one at a time.'
+  },
+  {
+    title: 'Tooltip',
+    href: '/ui/components/tooltip',
+    description:
+      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.'
+  }
+]
+
+const NavigationMenuDemo = () => {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className='grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]'>
+              <li className='row-span-3'>
+                <NavigationMenuLink asChild>
+                  <Link
+                    className='from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md'
+                    href='/'
+                  >
+                    <Logo className='size-6' />
+                    <div className='mb-2 mt-4 text-lg font-medium'>tszhong0411/ui</div>
+                    <p className='text-muted-foreground text-sm leading-tight'>
+                      A modern component library.
+                    </p>
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+              <ListItem href='/introduction' title='Introduction'>
+                Re-usable components built using Radix UI and Tailwind CSS.
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]'>
+              {components.map((component) => (
+                <ListItem key={component.title} title={component.title} href={component.href}>
+                  {component.description}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink className={navigationMenuTriggerStyle()} asChild>
+            <Link href='/introduction'>Introduction</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+
+type ListItemProps = React.ComponentProps<typeof Link>
+
+const ListItem = (props: ListItemProps) => {
+  const { className, title, children, ...rest } = props
+
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <Link
+          className={cn(
+            'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',
+            className
+          )}
+          {...rest}
+        >
+          <div className='text-sm font-medium leading-none'>{title}</div>
+          <p className='text-muted-foreground line-clamp-2 text-sm leading-snug'>{children}</p>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  )
+}
+
+export default NavigationMenuDemo
diff --git a/apps/docs/src/config/links.ts b/apps/docs/src/config/links.ts
index 4fff2e56..ed717164 100644
--- a/apps/docs/src/config/links.ts
+++ b/apps/docs/src/config/links.ts
@@ -122,6 +122,10 @@ export const SIDEBAR_LINKS: SidebarLinks = [
         href: '/ui/components/marquee',
         text: 'Marquee'
       },
+      {
+        href: '/ui/components/navigation-menu',
+        text: 'Navigation Menu'
+      },
       {
         href: '/ui/components/pagination',
         text: 'Pagination'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 95eb4d2a..55bc2b59 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -40,6 +40,7 @@
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.4",
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index aa37c028..03fb2810 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -23,6 +23,7 @@ export * from './label'
 export * from './link'
 export * from './logo'
 export * from './marquee'
+export * from './navigation-menu'
 export * from './pagination'
 export * from './popover'
 export * from './scroll-area'
diff --git a/packages/ui/src/navigation-menu.tsx b/packages/ui/src/navigation-menu.tsx
new file mode 100644
index 00000000..28ffb617
--- /dev/null
+++ b/packages/ui/src/navigation-menu.tsx
@@ -0,0 +1,112 @@
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cn } from '@tszhong0411/utils'
+import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from 'lucide-react'
+
+type NavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root>
+
+export const NavigationMenu = (props: NavigationMenuProps) => {
+  const { className, children, ...rest } = props
+
+  return (
+    <NavigationMenuPrimitive.Root
+      className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
+      {...rest}
+    >
+      {children}
+      <NavigationMenuViewport />
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+type NavigationMenuListProps = React.ComponentProps<typeof NavigationMenuPrimitive.List>
+
+export const NavigationMenuList = (props: NavigationMenuListProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <NavigationMenuPrimitive.List
+      className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
+      {...rest}
+    />
+  )
+}
+
+export const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+export const navigationMenuTriggerStyle = cva(
+  'bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[active]:bg-accent/50 data-[state=open]:bg-accent/50 group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50'
+)
+
+type NavigationMenuTriggerProps = React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>
+
+export const NavigationMenuTrigger = (props: NavigationMenuTriggerProps) => {
+  const { className, children, ...rest } = props
+
+  return (
+    <NavigationMenuPrimitive.Trigger
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...rest}
+    >
+      {children}
+      <ChevronDownIcon
+        className='relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180'
+        aria-hidden='true'
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+type NavigationMenuContentProps = React.ComponentProps<typeof NavigationMenuPrimitive.Content>
+
+export const NavigationMenuContent = (props: NavigationMenuContentProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <NavigationMenuPrimitive.Content
+      className={cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto',
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
+export const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+type NavigationMenuViewportProps = React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>
+
+export const NavigationMenuViewport = (props: NavigationMenuViewportProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <div className={cn('absolute left-0 top-full flex justify-center')}>
+      <NavigationMenuPrimitive.Viewport
+        className={cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg duration-200 md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className
+        )}
+        {...rest}
+      />
+    </div>
+  )
+}
+
+type NavigationMenuIndicatorProps = React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>
+
+export const NavigationMenuIndicator = (props: NavigationMenuIndicatorProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <NavigationMenuPrimitive.Indicator
+      className={cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        className
+      )}
+      {...rest}
+    >
+      <div className='bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md' />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 89454b37..1d2d7b2a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -827,6 +827,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.1
         version: 2.1.1(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-navigation-menu':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-popover':
         specifier: ^1.1.4
         version: 1.1.4(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -3889,6 +3892,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-navigation-menu@1.2.3':
+    resolution: {integrity: sha512-IQWAsQ7dsLIYDrn0WqPU+cdM7MONTv9nqrLVYoie3BPiabSfUVDe6Fr+oEt0Cofsr9ONDcDe9xhmJbL1Uq1yKg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popover@1.1.4':
     resolution: {integrity: sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw==}
     peerDependencies:
@@ -14030,6 +14046,28 @@ snapshots:
       '@types/react': 19.0.2
       '@types/react-dom': 19.0.2(@types/react@19.0.2)
 
+  '@radix-ui/react-navigation-menu@1.2.3(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.0.2)(react@19.0.0)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.2
+      '@types/react-dom': 19.0.2(@types/react@19.0.2)
+
   '@radix-ui/react-popover@1.1.4(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1

From 5a2ccb95e66ab096274becec0e1df7e9e7abbd44 Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Thu, 9 Jan 2025 23:23:03 +0800
Subject: [PATCH 7/7] feat(ui): add resizable component

---
 .changeset/fast-crabs-invite.md               |  5 ++
 apps/docs/src/app/ui/components/resizable.mdx | 30 ++++++++++++
 .../src/components/demos/resizable/handle.tsx | 24 ++++++++++
 .../components/demos/resizable/resizable.tsx  | 34 +++++++++++++
 .../components/demos/resizable/vertical.tsx   | 24 ++++++++++
 apps/docs/src/config/links.ts                 |  4 ++
 packages/ui/package.json                      |  1 +
 packages/ui/src/index.ts                      |  1 +
 packages/ui/src/resizable.tsx                 | 48 +++++++++++++++++++
 pnpm-lock.yaml                                | 14 ++++++
 10 files changed, 185 insertions(+)
 create mode 100644 .changeset/fast-crabs-invite.md
 create mode 100644 apps/docs/src/app/ui/components/resizable.mdx
 create mode 100644 apps/docs/src/components/demos/resizable/handle.tsx
 create mode 100644 apps/docs/src/components/demos/resizable/resizable.tsx
 create mode 100644 apps/docs/src/components/demos/resizable/vertical.tsx
 create mode 100644 packages/ui/src/resizable.tsx

diff --git a/.changeset/fast-crabs-invite.md b/.changeset/fast-crabs-invite.md
new file mode 100644
index 00000000..245d2ab6
--- /dev/null
+++ b/.changeset/fast-crabs-invite.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add resizable component
diff --git a/apps/docs/src/app/ui/components/resizable.mdx b/apps/docs/src/app/ui/components/resizable.mdx
new file mode 100644
index 00000000..3467636f
--- /dev/null
+++ b/apps/docs/src/app/ui/components/resizable.mdx
@@ -0,0 +1,30 @@
+---
+title: Resizable
+description: Accessible resizable panel groups and layouts with keyboard support.
+---
+
+<ComponentPreview name='resizable/resizable' />
+
+## Usage
+
+```tsx
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@tszhong0411/ui'
+```
+
+```tsx
+<ResizablePanelGroup direction='horizontal'>
+  <ResizablePanel>One</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel>Two</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## Examples
+
+### Vertical
+
+<ComponentPreview name='resizable/vertical' />
+
+### Handle
+
+<ComponentPreview name='resizable/handle' />
diff --git a/apps/docs/src/components/demos/resizable/handle.tsx b/apps/docs/src/components/demos/resizable/handle.tsx
new file mode 100644
index 00000000..7460451b
--- /dev/null
+++ b/apps/docs/src/components/demos/resizable/handle.tsx
@@ -0,0 +1,24 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@tszhong0411/ui'
+
+const ResizableHandleDemo = () => {
+  return (
+    <ResizablePanelGroup
+      direction='horizontal'
+      className='min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]'
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className='flex h-full items-center justify-center p-6'>
+          <span className='font-semibold'>Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className='flex h-full items-center justify-center p-6'>
+          <span className='font-semibold'>Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+
+export default ResizableHandleDemo
diff --git a/apps/docs/src/components/demos/resizable/resizable.tsx b/apps/docs/src/components/demos/resizable/resizable.tsx
new file mode 100644
index 00000000..e9a423e3
--- /dev/null
+++ b/apps/docs/src/components/demos/resizable/resizable.tsx
@@ -0,0 +1,34 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@tszhong0411/ui'
+
+const ResizableDemo = () => {
+  return (
+    <ResizablePanelGroup
+      direction='horizontal'
+      className='max-w-md rounded-lg border md:min-w-[450px]'
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className='flex h-[200px] items-center justify-center p-6'>
+          <span className='font-semibold'>One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction='vertical'>
+          <ResizablePanel defaultSize={25}>
+            <div className='flex h-full items-center justify-center p-6'>
+              <span className='font-semibold'>Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className='flex h-full items-center justify-center p-6'>
+              <span className='font-semibold'>Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+
+export default ResizableDemo
diff --git a/apps/docs/src/components/demos/resizable/vertical.tsx b/apps/docs/src/components/demos/resizable/vertical.tsx
new file mode 100644
index 00000000..e6b11008
--- /dev/null
+++ b/apps/docs/src/components/demos/resizable/vertical.tsx
@@ -0,0 +1,24 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@tszhong0411/ui'
+
+const ResizableVertical = () => {
+  return (
+    <ResizablePanelGroup
+      direction='vertical'
+      className='min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]'
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className='flex h-full items-center justify-center p-6'>
+          <span className='font-semibold'>Header</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className='flex h-full items-center justify-center p-6'>
+          <span className='font-semibold'>Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+
+export default ResizableVertical
diff --git a/apps/docs/src/config/links.ts b/apps/docs/src/config/links.ts
index ed717164..e1403e1d 100644
--- a/apps/docs/src/config/links.ts
+++ b/apps/docs/src/config/links.ts
@@ -134,6 +134,10 @@ export const SIDEBAR_LINKS: SidebarLinks = [
         href: '/ui/components/popover',
         text: 'Popover'
       },
+      {
+        href: '/ui/components/resizable',
+        text: 'Resizable'
+      },
       {
         href: '/ui/components/scroll-area',
         text: 'Scroll Area'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 55bc2b59..8b542234 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -58,6 +58,7 @@
     "lucide-react": "^0.469.0",
     "merge-refs": "^1.3.0",
     "react-hook-form": "^7.54.2",
+    "react-resizable-panels": "^2.1.7",
     "react-textarea-autosize": "^8.5.6",
     "sonner": "1.7.1"
   },
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 03fb2810..75cf72b6 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -26,6 +26,7 @@ export * from './marquee'
 export * from './navigation-menu'
 export * from './pagination'
 export * from './popover'
+export * from './resizable'
 export * from './scroll-area'
 export * from './select'
 export * from './separator'
diff --git a/packages/ui/src/resizable.tsx b/packages/ui/src/resizable.tsx
new file mode 100644
index 00000000..7815eef4
--- /dev/null
+++ b/packages/ui/src/resizable.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { cn } from '@tszhong0411/utils'
+import { GripVerticalIcon } from 'lucide-react'
+import * as ResizablePrimitive from 'react-resizable-panels'
+
+type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup>
+
+export const ResizablePanelGroup = (props: ResizablePanelGroupProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <ResizablePrimitive.PanelGroup
+      className={cn('flex size-full data-[panel-group-direction=vertical]:flex-col', className)}
+      {...rest}
+    />
+  )
+}
+
+export const ResizablePanel = ResizablePrimitive.Panel
+
+type ResizableHandleProps = {
+  withHandle?: boolean
+} & React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle>
+
+export const ResizableHandle = (props: ResizableHandleProps) => {
+  const { withHandle, className, ...rest } = props
+
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      className={cn(
+        'bg-border relative flex w-px items-center justify-center',
+        'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0',
+        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1',
+        'after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2',
+        '[&[data-panel-group-direction=vertical]>div]:rotate-90',
+        className
+      )}
+      {...rest}
+    >
+      {withHandle && (
+        <div className='bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border'>
+          <GripVerticalIcon className='size-2.5' />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d2d7b2a..d807f8e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -881,6 +881,9 @@ importers:
       react-hook-form:
         specifier: ^7.54.2
         version: 7.54.2(react@19.0.0)
+      react-resizable-panels:
+        specifier: ^2.1.7
+        version: 2.1.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-textarea-autosize:
         specifier: ^8.5.6
         version: 8.5.6(@types/react@19.0.2)(react@19.0.0)
@@ -9518,6 +9521,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-resizable-panels@2.1.7:
+    resolution: {integrity: sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   react-scan@0.0.54:
     resolution: {integrity: sha512-3ydazntrl7M4JUoCq75hoKYiZv1vBIuA8cnsRVj8DVv4GXYFSbO0R759T1pwIhcf5DBj9Ik8GPnQ2NHcWJ7TUA==}
     hasBin: true
@@ -20711,6 +20720,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.0.2
 
+  react-resizable-panels@2.1.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   react-scan@0.0.54(next@15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(rollup@4.28.1):
     dependencies:
       '@babel/core': 7.26.0