diff --git a/.prettierrc.mjs b/.prettierrc.mjs
index 89f612fb..c09cbcef 100644
--- a/.prettierrc.mjs
+++ b/.prettierrc.mjs
@@ -1,4 +1,24 @@
-import config from "@repo/eslint-config/prettier-base";
+import defautlConfig from '@repo/eslint-config/prettier-base'
+
+const config = {
+	...defautlConfig,
+	plugins: ['@ianvs/prettier-plugin-sort-imports'],
+	importOrder: [
+		'<BUILTIN_MODULES>',
+		'<THIRD_PARTY_MODULES>',
+		'',
+		'^@repo(.*)$',
+		'',
+		'^[../]',
+		'^[./]',
+	],
+	importOrderParserPlugins: ['typescript', 'jsx'],
+	importOrderTypeScriptVersion: '5.0.0',
+	importOrderCaseSensitive: false,
+	importOrderMergeDuplicateImports: true,
+	importOrderCombineTypeAndValueImports: true,
+	importOrderSortSpecifiers: true,
+}
 
 /** @type {import("prettier").Config} */
-export default config;
+export default config
diff --git a/apps/web/README.md b/apps/web/README.md
index 24d8bda3..6726aa7f 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -13,9 +13,11 @@ pnpm dev
 ## Стек технологий
 
 - **Next.js 16** — React фреймворк с серверным рендерингом
+- **React 19** — UI библиотека
 - **TypeScript** — типизация
-- **CSS Modules** — стили
-- **Turborepo** — сборка монорепозитория
+- **Tailwind CSS 4** — стили
+- **@repo/ui** — [UI-kit на основе shadcn/ui](../../docs/frontend/shadcn.md)
+- **react-hook-form + zod** — формы и валидация
 
 ## Структура
 
diff --git a/apps/web/app/authorization/authorization-dialog-layout.tsx b/apps/web/app/authorization/authorization-dialog-layout.tsx
index fc92559e..e6fe29b3 100644
--- a/apps/web/app/authorization/authorization-dialog-layout.tsx
+++ b/apps/web/app/authorization/authorization-dialog-layout.tsx
@@ -1,6 +1,7 @@
-import { DialogFooter, DialogHeader, DialogTitle } from '@repo/ui/components/dialog'
 import type { ReactNode } from 'react'
 
+import { DialogFooter, DialogHeader, DialogTitle } from '@repo/ui'
+
 interface AuthorizationDialogLayoutProps {
 	children?: ReactNode
 	footer?: ReactNode
diff --git a/apps/web/app/authorization/authorization-dialog.tsx b/apps/web/app/authorization/authorization-dialog.tsx
index 34df77a3..26e0baf5 100644
--- a/apps/web/app/authorization/authorization-dialog.tsx
+++ b/apps/web/app/authorization/authorization-dialog.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import React from 'react'
-import { Button } from '@repo/ui/components/button'
-import { Dialog, DialogContent, DialogTrigger } from '@repo/ui/components/dialog'
-import { Form } from '@repo/ui/components/form'
-import { AuthorizationForm } from './authorization-form'
+
+import { Button, Dialog, DialogContent, DialogTrigger, Form } from '@repo/ui'
+
 import { AuthorizationDialogLayout } from './authorization-dialog-layout'
+import { AuthorizationForm } from './authorization-form'
 import { useAuthorizationForm } from './use-authorization-form'
 
 const AuthorizationDialog = () => {
diff --git a/apps/web/app/authorization/authorization-form.tsx b/apps/web/app/authorization/authorization-form.tsx
index fc2e3e6c..c0f1bba5 100644
--- a/apps/web/app/authorization/authorization-form.tsx
+++ b/apps/web/app/authorization/authorization-form.tsx
@@ -1,13 +1,10 @@
-import {
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from '@repo/ui/components/form'
-import { Input } from '@repo/ui/components/input'
+'use client'
+
 import React from 'react'
 import { useFormContext } from 'react-hook-form'
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from '@repo/ui'
+
 import { AuthorizationFormValues } from './use-authorization-form'
 
 const AuthorizationForm = () => {
diff --git a/docs/frontend/shadcn.md b/docs/frontend/shadcn.md
new file mode 100644
index 00000000..59dba3e8
--- /dev/null
+++ b/docs/frontend/shadcn.md
@@ -0,0 +1,9 @@
+# shadcn/ui
+
+В проекте используется [shadcn/ui](https://ui.shadcn.com/) — коллекция переиспользуемых компонентов на основе Radix UI и Tailwind CSS.
+
+Компоненты вынесены в пакет `@repo/ui` и доступны для использования во всех приложениях монорепозитория.
+
+## Документация UI-kit
+
+Полная документация с примерами использования, инструкцией по добавлению новых компонентов и известными проблемами: [packages/ui/README.md](../../packages/ui/README.md)
diff --git a/docs/work/common.md b/docs/work/common.md
index 3227bfbb..bf384c21 100644
--- a/docs/work/common.md
+++ b/docs/work/common.md
@@ -204,6 +204,22 @@ try {
 - Группируй связанные файлы в папки
 - Держи файлы компактными (до 200-300 строк)
 
+## Форматирование и сортировка импортов
+
+Для автоматической сортировки импортов используется `@ianvs/prettier-plugin-sort-imports`.
+
+Порядок импортов (настроено в `.prettierrc.mjs`):
+
+1. Встроенные модули Node.js
+2. Внешние пакеты (node_modules)
+3. Пакеты монорепозитория (`@repo/*`)
+4. Относительные импорты (`../`, `./`)
+
+Форматирование применяется:
+
+- При сохранении файла (в IDE)
+- Через pre-commit hook
+
 <!-- ## Тестирование
 
 - Пиши тесты для критичной бизнес-логики
diff --git a/package.json b/package.json
index 609b6f9a..6c821e4d 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
 	"devDependencies": {
 		"@commitlint/cli": "^20.4.1",
 		"@commitlint/config-conventional": "^20.4.1",
+		"@ianvs/prettier-plugin-sort-imports": "^4.7.1",
 		"@repo/eslint-config": "workspace:*",
 		"@repo/typescript-config": "workspace:*",
 		"@typescript-eslint/eslint-plugin": "^8.56.0",
diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 00000000..446651ed
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1,536 @@
+# @repo/ui
+
+UI-kit на основе Radix UI и Tailwind CSS
+
+## Установка
+
+Пакет доступен как часть монорепозитория. Добавьте зависимость в `package.json`:
+
+```json
+{
+	"dependencies": {
+		"@repo/ui": "workspace:*"
+	}
+}
+```
+
+## Использование
+
+Все компоненты доступны через единый импорт:
+
+```tsx
+import { Button, Card, Input, Avatar } from '@repo/ui'
+```
+
+## Добавление новых компонентов
+
+Для добавления компонентов из shadcn/ui выполните команду из директории `packages/ui`:
+
+```bash
+cd packages/ui
+npx shadcn@latest add <component-name>
+```
+
+После добавления компонента не забудьте добавить экспорт в `src/components/index.ts`:
+
+```ts
+export * from './new-component'
+```
+
+## Известные проблемы
+
+### Типы lucide-react
+
+Временный костыль: типы для иконок из `lucide-react` объявлены вручную в файле `src/lucide-react.d.ts`.
+
+Если после добавления нового компонента возникает ошибка типов для иконки, добавьте её в этот файл:
+
+```ts
+// src/lucide-react.d.ts
+declare module 'lucide-react' {
+	export const NewIcon: LucideIcon
+}
+```
+
+## Компоненты
+
+### Button
+
+Кнопка с различными вариантами и размерами.
+
+```tsx
+import { Button } from '@repo/ui'
+
+// Варианты
+return (
+	<>
+		<Button variant='default'>Primary</Button>
+		<Button variant='secondary'>Secondary</Button>
+		<Button variant='destructive'>Destructive</Button>
+		<Button variant='outline'>Outline</Button>
+		<Button variant='ghost'>Ghost</Button>
+		<Button variant='link'>Link</Button>
+	</>
+)
+
+// Размеры
+return (
+	<>
+		<Button size='xs'>Extra Small</Button>
+		<Button size='sm'>Small</Button>
+		<Button size='default'>Default</Button>
+		<Button size='lg'>Large</Button>
+		<Button size='icon'>🔍</Button>
+	</>
+)
+```
+
+### Input
+
+Поле ввода текста.
+
+```tsx
+import { Input } from '@repo/ui'
+
+return (
+	<>
+		<Input placeholder='Введите текст...' />
+		<Input type='email' placeholder='email@example.com' />
+		<Input type='password' placeholder='Пароль' />
+		<Input disabled placeholder='Недоступно' />
+	</>
+)
+```
+
+### Card
+
+Карточка для группировки контента.
+
+```tsx
+import {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+	CardFooter,
+	CardAction,
+} from '@repo/ui'
+return (
+	<Card>
+		<CardHeader>
+			<CardTitle>Заголовок карточки</CardTitle>
+			<CardDescription>Описание карточки</CardDescription>
+			<CardAction>
+				<Button variant='ghost' size='icon'>
+					⋮
+				</Button>
+			</CardAction>
+		</CardHeader>
+		<CardContent>
+			<p>Содержимое карточки</p>
+		</CardContent>
+		<CardFooter>
+			<Button>Действие</Button>
+		</CardFooter>
+	</Card>
+)
+```
+
+### Avatar
+
+Аватар пользователя с поддержкой изображений и fallback.
+
+```tsx
+import {
+	Avatar,
+	AvatarImage,
+	AvatarFallback,
+	AvatarBadge,
+	AvatarGroup,
+	AvatarGroupCount,
+} from '@repo/ui'
+
+// Простой аватар
+return (
+	<Avatar>
+		<AvatarImage src='/avatar.jpg' alt='Имя пользователя' />
+		<AvatarFallback>ИП</AvatarFallback>
+	</Avatar>
+)
+
+// С размером
+return (
+	<>
+		<Avatar size='sm'>
+			<AvatarFallback>SM</AvatarFallback>
+		</Avatar>
+		<Avatar size='lg'>
+			<AvatarFallback>LG</AvatarFallback>
+		</Avatar>
+	</>
+)
+
+// С бейджем (например, статус онлайн)
+return (
+	<Avatar>
+		<AvatarImage src='/avatar.jpg' />
+		<AvatarFallback>ИП</AvatarFallback>
+		<AvatarBadge />
+	</Avatar>
+)
+
+// Группа аватаров
+return (
+	<AvatarGroup>
+		<Avatar>
+			<AvatarFallback>А</AvatarFallback>
+		</Avatar>
+		<Avatar>
+			<AvatarFallback>Б</AvatarFallback>
+		</Avatar>
+		<AvatarGroupCount>+5</AvatarGroupCount>
+	</AvatarGroup>
+)
+```
+
+### Badge
+
+Бейдж для отображения статусов и меток.
+
+```tsx
+import { Badge } from '@repo/ui'
+
+return (
+	<>
+		<Badge>Default</Badge>
+		<Badge variant='secondary'>Secondary</Badge>
+		<Badge variant='destructive'>Destructive</Badge>
+		<Badge variant='outline'>Outline</Badge>
+	</>
+)
+```
+
+### Form
+
+Компоненты для работы с формами (интеграция с react-hook-form).
+
+```tsx
+import {
+	Form,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+} from '@repo/ui'
+import { useForm } from 'react-hook-form'
+
+const form = useForm()
+
+return (
+	<Form {...form}>
+		<FormField
+			control={form.control}
+			name='email'
+			render={({ field }) => (
+				<FormItem>
+					<FormLabel>Email</FormLabel>
+					<FormControl>
+						<Input placeholder='email@example.com' {...field} />
+					</FormControl>
+					<FormDescription>Ваш рабочий email</FormDescription>
+					<FormMessage />
+				</FormItem>
+			)}
+		/>
+	</Form>
+)
+```
+
+### Dialog
+
+Модальное окно.
+
+```tsx
+import {
+	Dialog,
+	DialogTrigger,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+	DialogClose,
+} from '@repo/ui'
+
+return (
+	<Dialog>
+		<DialogTrigger asChild>
+			<Button>Открыть диалог</Button>
+		</DialogTrigger>
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Заголовок</DialogTitle>
+				<DialogDescription>Описание диалога</DialogDescription>
+			</DialogHeader>
+			<p>Содержимое диалога</p>
+			<DialogFooter>
+				<DialogClose asChild>
+					<Button variant='outline'>Отмена</Button>
+				</DialogClose>
+				<Button>Подтвердить</Button>
+			</DialogFooter>
+		</DialogContent>
+	</Dialog>
+)
+```
+
+### Select
+
+Выпадающий список.
+
+```tsx
+import {
+	Select,
+	SelectTrigger,
+	SelectValue,
+	SelectContent,
+	SelectItem,
+	SelectGroup,
+	SelectLabel,
+} from '@repo/ui'
+
+return (
+	<Select>
+		<SelectTrigger>
+			<SelectValue placeholder='Выберите опцию' />
+		</SelectTrigger>
+		<SelectContent>
+			<SelectGroup>
+				<SelectLabel>Группа</SelectLabel>
+				<SelectItem value='option1'>Опция 1</SelectItem>
+				<SelectItem value='option2'>Опция 2</SelectItem>
+			</SelectGroup>
+		</SelectContent>
+	</Select>
+)
+```
+
+### Textarea
+
+Многострочное поле ввода.
+
+```tsx
+import { Textarea } from '@repo/ui'
+
+return (
+	<>
+		<Textarea placeholder='Введите текст...' />
+		<Textarea rows={5} />
+	</>
+)
+```
+
+### Label
+
+Метка для полей ввода.
+
+```tsx
+import { Label, Input } from '@repo/ui'
+
+return (
+	<>
+		<Label htmlFor='email'>Email</Label>
+		<Input id='email' type='email' />
+	</>
+)
+```
+
+### Tooltip
+
+Всплывающая подсказка.
+
+```tsx
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@repo/ui'
+
+return (
+	<TooltipProvider>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button>Наведи на меня</Button>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p>Текст подсказки</p>
+			</TooltipContent>
+		</Tooltip>
+	</TooltipProvider>
+)
+```
+
+### DropdownMenu
+
+Выпадающее меню.
+
+```tsx
+import {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+} from '@repo/ui'
+
+return (
+	<DropdownMenu>
+		<DropdownMenuTrigger asChild>
+			<Button variant='outline'>Меню</Button>
+		</DropdownMenuTrigger>
+		<DropdownMenuContent>
+			<DropdownMenuItem>Профиль</DropdownMenuItem>
+			<DropdownMenuItem>Настройки</DropdownMenuItem>
+			<DropdownMenuSeparator />
+			<DropdownMenuItem>Выйти</DropdownMenuItem>
+		</DropdownMenuContent>
+	</DropdownMenu>
+)
+```
+
+### Sheet
+
+Боковая панель (drawer).
+
+```tsx
+import {
+	Sheet,
+	SheetTrigger,
+	SheetContent,
+	SheetHeader,
+	SheetTitle,
+	SheetDescription,
+	SheetFooter,
+	SheetClose,
+} from '@repo/ui'
+
+return (
+	<Sheet>
+		<SheetTrigger asChild>
+			<Button>Открыть панель</Button>
+		</SheetTrigger>
+		<SheetContent>
+			<SheetHeader>
+				<SheetTitle>Заголовок</SheetTitle>
+				<SheetDescription>Описание панели</SheetDescription>
+			</SheetHeader>
+			<p>Содержимое</p>
+			<SheetFooter>
+				<SheetClose asChild>
+					<Button>Закрыть</Button>
+				</SheetClose>
+			</SheetFooter>
+		</SheetContent>
+	</Sheet>
+)
+```
+
+### Separator
+
+Разделитель.
+
+```tsx
+import { Separator } from '@repo/ui'
+
+return (
+	<>
+		<Separator />
+		<Separator orientation='vertical' />
+	</>
+)
+```
+
+## Layout
+
+### Stack / HStack / VStack
+
+Компоненты для flexbox-раскладки.
+
+```tsx
+import { Stack, HStack, VStack } from '@repo/ui'
+
+// Вертикальный стек (по умолчанию)
+return (
+	<Stack spacing='md'>
+		<div>Элемент 1</div>
+		<div>Элемент 2</div>
+	</Stack>
+)
+
+// Горизонтальный стек
+return (
+	<HStack spacing='lg' align='center'>
+		<div>Слева</div>
+		<div>Справа</div>
+	</HStack>
+)
+
+// С выравниванием
+return (
+	<VStack spacing='sm' align='center' justify='between'>
+		<div>Верх</div>
+		<div>Низ</div>
+	</VStack>
+)
+```
+
+**Пропсы:**
+
+- `direction`: `horizontal` | `vertical` (по умолчанию `vertical`)
+- `spacing`: `none` | `xs` | `sm` | `md` | `lg` | `xl` | `2xl`
+- `align`: `start` | `center` | `end` | `stretch` | `baseline`
+- `justify`: `start` | `center` | `end` | `between` | `around` | `evenly`
+- `wrap`: `true` | `false`
+
+### Container
+
+Контейнер с адаптивными отступами и максимальной шириной.
+
+```tsx
+import { Container } from '@repo/ui'
+
+return (
+	<Container size='lg'>
+		<p>Контент с ограниченной шириной</p>
+	</Container>
+)
+
+// Центрированный контент
+return (
+	<Container size='md' centered>
+		<p>Центрированный контент</p>
+	</Container>
+)
+```
+
+**Пропсы:**
+
+- `size`: `sm` | `md` | `lg` | `xl` | `2xl` | `full`
+- `centered`: `true` | `false`
+
+## Утилиты
+
+### cn
+
+Функция для объединения классов Tailwind CSS.
+
+```tsx
+import { cn } from '@repo/ui'
+
+return (
+	<div
+		className={cn('base-class', {
+			'conditional-class': condition,
+		})}
+	/>
+)
+```
diff --git a/packages/ui/components.json b/packages/ui/components.json
index 22b66dcf..80c8d811 100644
--- a/packages/ui/components.json
+++ b/packages/ui/components.json
@@ -16,7 +16,8 @@
 		"components": "@repo/ui/components",
 		"ui": "@repo/ui/components",
 		"lib": "@repo/ui/lib",
-		"utils": "@repo/ui/lib/utils"
+		"utils": "@repo/ui/lib/utils",
+		"hooks": "@repo/ui/hooks"
 	},
 	"registries": {}
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 16134c34..03916bfb 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -3,6 +3,7 @@
 	"version": "0.0.0",
 	"private": true,
 	"exports": {
+		".": "./src/index.ts",
 		"./globals.css": "./src/globals.css",
 		"./postcss.config": "./postcss.config.mjs",
 		"./lib/*": "./src/lib/*.ts",
@@ -16,6 +17,13 @@
 		"generate:component": "turbo gen react-component",
 		"check-types": "tsc --noEmit"
 	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"react-hook-form": "^7.0.0",
+		"@hookform/resolvers": "^5.0.0",
+		"zod": "^4.0.0"
+	},
 	"dependencies": {
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
@@ -25,20 +33,20 @@
 		"tw-animate-css": "^1.4.0"
 	},
 	"devDependencies": {
+		"@hookform/resolvers": "^5.2.2",
 		"@repo/eslint-config": "workspace:*",
 		"@repo/typescript-config": "workspace:*",
-		"@hookform/resolvers": "^5.2.2",
-		"react": "^19.2.4",
-		"react-dom": "^19.2.4",
-		"react-hook-form": "^7.71.1",
-		"zod": "^4.3.6",
 		"@tailwindcss/postcss": "^4.2.0",
 		"@types/node": "^22.15.3",
 		"@types/react": "19.2.14",
 		"@types/react-dom": "19.2.3",
 		"eslint": "^9.31.0",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
+		"react-hook-form": "^7.71.1",
 		"shadcn": "^3.8.5",
 		"tailwindcss": "^4.2.0",
-		"typescript": "5.8.2"
+		"typescript": "5.8.2",
+		"zod": "^4.3.6"
 	}
 }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
new file mode 100644
index 00000000..7ce7ba00
--- /dev/null
+++ b/packages/ui/src/components/index.ts
@@ -0,0 +1,17 @@
+export * from './avatar'
+export * from './badge'
+export * from './button'
+export * from './card'
+export * from './dialog'
+export * from './dropdown-menu'
+export * from './form'
+export * from './input'
+export * from './label'
+export * from './select'
+export * from './separator'
+export * from './sheet'
+export * from './textarea'
+export * from './tooltip'
+
+export * from './layout/stack'
+export * from './layout/container'
diff --git a/packages/ui/src/components/layout/container.tsx b/packages/ui/src/components/layout/container.tsx
new file mode 100644
index 00000000..4a471acf
--- /dev/null
+++ b/packages/ui/src/components/layout/container.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from 'radix-ui'
+
+import { cn } from '@repo/ui/lib/utils'
+
+const containerVariants = cva('mx-auto w-full px-4 sm:px-6 lg:px-8', {
+	variants: {
+		size: {
+			sm: 'max-w-screen-sm',
+			md: 'max-w-screen-md',
+			lg: 'max-w-screen-lg',
+			xl: 'max-w-screen-xl',
+			'2xl': 'max-w-screen-2xl',
+			full: 'max-w-full',
+		},
+		centered: {
+			true: 'flex flex-col items-center',
+			false: '',
+		},
+	},
+	defaultVariants: {
+		size: 'xl',
+		centered: false,
+	},
+})
+
+function Container({
+	className,
+	size = 'xl',
+	centered = false,
+	asChild = false,
+	...props
+}: React.ComponentProps<'div'> &
+	VariantProps<typeof containerVariants> & {
+		asChild?: boolean
+	}) {
+	const Comp = asChild ? Slot.Root : 'div'
+
+	return (
+		<Comp
+			data-slot='container'
+			data-size={size}
+			className={cn(containerVariants({ size, centered, className }))}
+			{...props}
+		/>
+	)
+}
+
+export { Container, containerVariants }
diff --git a/packages/ui/src/components/layout/stack.tsx b/packages/ui/src/components/layout/stack.tsx
new file mode 100644
index 00000000..6e9b8719
--- /dev/null
+++ b/packages/ui/src/components/layout/stack.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from 'radix-ui'
+
+import { cn } from '@repo/ui/lib/utils'
+
+const stackVariants = cva('flex', {
+	variants: {
+		direction: {
+			horizontal: 'flex-row',
+			vertical: 'flex-col',
+		},
+		spacing: {
+			none: 'gap-0',
+			xs: 'gap-1',
+			sm: 'gap-2',
+			md: 'gap-4',
+			lg: 'gap-6',
+			xl: 'gap-8',
+			'2xl': 'gap-12',
+		},
+		align: {
+			start: 'items-start',
+			center: 'items-center',
+			end: 'items-end',
+			stretch: 'items-stretch',
+			baseline: 'items-baseline',
+		},
+		justify: {
+			start: 'justify-start',
+			center: 'justify-center',
+			end: 'justify-end',
+			between: 'justify-between',
+			around: 'justify-around',
+			evenly: 'justify-evenly',
+		},
+		wrap: {
+			true: 'flex-wrap',
+			false: 'flex-nowrap',
+		},
+	},
+	defaultVariants: {
+		direction: 'vertical',
+		spacing: 'md',
+		align: 'stretch',
+		justify: 'start',
+		wrap: false,
+	},
+})
+
+type StackProps = React.ComponentProps<'div'> &
+	VariantProps<typeof stackVariants> & {
+		asChild?: boolean
+	}
+
+function Stack({
+	className,
+	direction = 'vertical',
+	spacing = 'md',
+	align = 'stretch',
+	justify = 'start',
+	wrap = false,
+	asChild = false,
+	...props
+}: StackProps) {
+	const Comp = asChild ? Slot.Root : 'div'
+
+	return (
+		<Comp
+			data-slot='stack'
+			data-direction={direction}
+			className={cn(
+				stackVariants({ direction, spacing, align, justify, wrap, className }),
+			)}
+			{...props}
+		/>
+	)
+}
+
+function HStack({
+	direction = 'horizontal',
+	...props
+}: Omit<StackProps, 'direction'> & { direction?: 'horizontal' }) {
+	return <Stack direction={direction} {...props} />
+}
+
+function VStack({
+	direction = 'vertical',
+	...props
+}: Omit<StackProps, 'direction'> & { direction?: 'vertical' }) {
+	return <Stack direction={direction} {...props} />
+}
+
+export { Stack, HStack, VStack, stackVariants }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 00000000..b8c05a57
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,2 @@
+export * from './components'
+export * from './lib'
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
new file mode 100644
index 00000000..9c56149e
--- /dev/null
+++ b/packages/ui/src/lib/index.ts
@@ -0,0 +1 @@
+export * from './utils'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec22c06a..56c04eb4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@commitlint/config-conventional':
         specifier: ^20.4.1
         version: 20.4.1
+      '@ianvs/prettier-plugin-sort-imports':
+        specifier: ^4.7.1
+        version: 4.7.1(prettier@3.8.1)
       '@repo/eslint-config':
         specifier: workspace:*
         version: link:packages/eslint-config
@@ -914,6 +917,24 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@ianvs/prettier-plugin-sort-imports@4.7.1':
+    resolution: {integrity: sha512-jmTNYGlg95tlsoG3JLCcuC4BrFELJtLirLAkQW/71lXSyOhVt/Xj7xWbbGcuVbNq1gwWgSyMrPjJc9Z30hynVw==}
+    peerDependencies:
+      '@prettier/plugin-oxc': ^0.0.4 || ^0.1.0
+      '@vue/compiler-sfc': 2.7.x || 3.x
+      content-tag: ^4.0.0
+      prettier: 2 || 3 || ^4.0.0-0
+      prettier-plugin-ember-template-tag: ^2.1.0
+    peerDependenciesMeta:
+      '@prettier/plugin-oxc':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      content-tag:
+        optional: true
+      prettier-plugin-ember-template-tag:
+        optional: true
+
   '@img/colour@1.0.0':
     resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
     engines: {node: '>=18'}
@@ -6871,6 +6892,17 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@ianvs/prettier-plugin-sort-imports@4.7.1(prettier@3.8.1)':
+    dependencies:
+      '@babel/generator': 7.29.1
+      '@babel/parser': 7.29.0
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      prettier: 3.8.1
+      semver: 7.7.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@img/colour@1.0.0':
     optional: true