diff --git a/src/lib/components/divider/divider.component.ts b/src/lib/components/divider/divider.component.ts
new file mode 100644
index 00000000..20d634f5
--- /dev/null
+++ b/src/lib/components/divider/divider.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+import { Divider } from 'primeng/divider';
+
+export type DividerLayout = 'horizontal' | 'vertical';
+export type DividerType = 'solid' | 'dashed' | 'dotted';
+export type DividerAlign = 'left' | 'center' | 'right' | 'top' | 'bottom';
+
+@Component({
+ selector: 'divider',
+ standalone: true,
+ imports: [Divider],
+ template: `
+
+
+
+ `,
+})
+export class DividerComponent {
+ @Input() layout: DividerLayout = 'horizontal';
+ @Input() type: DividerType = 'solid';
+ @Input() align: DividerAlign = 'center';
+}
diff --git a/src/prime-preset/tokens/components/divider.ts b/src/prime-preset/tokens/components/divider.ts
new file mode 100644
index 00000000..de3e3581
--- /dev/null
+++ b/src/prime-preset/tokens/components/divider.ts
@@ -0,0 +1,34 @@
+/**
+ * Кастомная CSS-стилизация для компонента p-divider.
+ * Публикует extend-токены как CSS-переменные и применяет глобальные стили.
+ * Подключается в map-tokens.ts: `import { dividerCss } from './components/divider'`
+ */
+export const dividerCss = ({ dt }: { dt: (token: string) => string }): string => `
+ /* ─── Divider extend: публикуем кастомные переменные в :root ─── */
+ :root {
+ --p-divider-extend-content-gap: ${dt('divider.extend.content.gap')};
+ --p-divider-extend-icon-size: ${dt('divider.extend.iconSize')};
+ }
+
+ /* ─── Контент разделителя ─── */
+ .p-divider-content {
+ display: flex;
+ align-items: center;
+ gap: var(--p-divider-extend-content-gap);
+ font-family: ${dt('fonts.fontFamily.heading')};
+ font-size: ${dt('fonts.fontSize.200')};
+ font-weight: ${dt('fonts.fontWeight.demibold')};
+ }
+
+ .p-divider-content .ti {
+ font-size: var(--p-divider-extend-icon-size);
+ }
+
+ /* ─── Вертикальное выравнивание ─── */
+ .p-divider.p-divider-vertical.p-divider-top .p-divider-content {
+ align-items: flex-start;
+ }
+ .p-divider.p-divider-vertical.p-divider-bottom .p-divider-content {
+ align-items: flex-end;
+ }
+`;
diff --git a/src/stories/components/divider/divider.stories.ts b/src/stories/components/divider/divider.stories.ts
new file mode 100644
index 00000000..f5a2c62f
--- /dev/null
+++ b/src/stories/components/divider/divider.stories.ts
@@ -0,0 +1,176 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { DividerComponent } from '../../../lib/components/divider/divider.component';
+import { DividerWithContentComponent, WithContent as WithContentStory } from './examples/divider-with-content.component';
+import { DividerWithIconComponent, WithIcon as WithIconStory } from './examples/divider-with-icon.component';
+import { DividerAlignLeftComponent, AlignLeft as AlignLeftStory } from './examples/divider-align-left.component';
+
+const meta: Meta = {
+ title: 'Components/Panel/Divider',
+ component: DividerComponent,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ imports: [
+ DividerComponent,
+ DividerWithContentComponent,
+ DividerWithIconComponent,
+ DividerAlignLeftComponent,
+ ],
+ }),
+ ],
+ parameters: {
+ docs: {
+ description: {
+ component: `Разделитель для визуального разделения контента. Поддерживает горизонтальную и вертикальную ориентацию, различные стили линии и выравнивание.
+
+\`\`\`typescript
+import { DividerModule } from 'primeng/divider';
+\`\`\``,
+ },
+ },
+ designTokens: { prefix: '--p-divider' },
+ },
+ argTypes: {
+ layout: {
+ control: 'select',
+ options: ['horizontal', 'vertical'],
+ description: 'Ориентация разделителя',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'horizontal' },
+ type: { summary: "'horizontal' | 'vertical'" },
+ },
+ },
+ type: {
+ control: 'select',
+ options: ['solid', 'dashed', 'dotted'],
+ description: 'Стиль линии разделителя',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'solid' },
+ type: { summary: "'solid' | 'dashed' | 'dotted'" },
+ },
+ },
+ align: {
+ control: 'select',
+ options: ['left', 'center', 'right', 'top', 'bottom'],
+ description: 'Выравнивание контента внутри разделителя',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'center' },
+ type: { summary: "'left' | 'center' | 'right' | 'top' | 'bottom'" },
+ },
+ },
+ },
+};
+
+const commonTemplate = `
+
+`;
+
+export default meta;
+type Story = StoryObj;
+
+// ── Default ───────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+ name: 'Default',
+ render: (args) => {
+ const parts: string[] = [];
+
+ if (args.layout && args.layout !== 'horizontal') parts.push(`layout="${args.layout}"`);
+ if (args.type && args.type !== 'solid') parts.push(`type="${args.type}"`);
+ if (args.align && args.align !== 'center') parts.push(`align="${args.align}"`);
+
+ const template = parts.length
+ ? ``
+ : ``;
+
+ return { props: args, template };
+ },
+ args: {
+ layout: 'horizontal',
+ type: 'solid',
+ align: 'center',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.',
+ },
+ },
+ },
+};
+
+// ── WithContent ───────────────────────────────────────────────────────────────
+
+export const WithContent: Story = WithContentStory;
+
+// ── WithIcon ──────────────────────────────────────────────────────────────────
+
+export const WithIcon: Story = WithIconStory;
+
+// ── Vertical ──────────────────────────────────────────────────────────────────
+
+export const Vertical: Story = {
+ render: (args) => ({ props: args, template: commonTemplate }),
+ args: {
+ layout: 'vertical',
+ type: 'solid',
+ align: 'center',
+ },
+ parameters: {
+ docs: {
+ description: { story: 'Вертикальный разделитель для разделения контента по горизонтали.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+// ── Type ──────────────────────────────────────────────────────────────────────
+
+export const TypeDashed: Story = {
+ name: 'Dashed',
+ render: (args) => ({ props: args, template: commonTemplate }),
+ args: {
+ layout: 'horizontal',
+ type: 'dashed',
+ align: 'center',
+ },
+ parameters: {
+ docs: {
+ description: { story: 'Разделитель с пунктирной линией.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+export const TypeDotted: Story = {
+ name: 'Dotted',
+ render: (args) => ({ props: args, template: commonTemplate }),
+ args: {
+ layout: 'horizontal',
+ type: 'dotted',
+ align: 'center',
+ },
+ parameters: {
+ docs: {
+ description: { story: 'Разделитель с точечной линией.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+// ── Align ─────────────────────────────────────────────────────────────────────
+
+export const AlignLeft: Story = AlignLeftStory;
diff --git a/src/stories/components/divider/examples/divider-align-left.component.ts b/src/stories/components/divider/examples/divider-align-left.component.ts
new file mode 100644
index 00000000..244e3d44
--- /dev/null
+++ b/src/stories/components/divider/examples/divider-align-left.component.ts
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { DividerComponent } from '../../../../lib/components/divider/divider.component';
+
+const template = `
+
+`;
+const styles = '';
+
+@Component({
+ selector: 'app-divider-align-left',
+ standalone: true,
+ imports: [DividerComponent],
+ template,
+ styles,
+})
+export class DividerAlignLeftComponent {}
+
+export const AlignLeft = {
+ render: () => ({
+ template: ``,
+ }),
+ parameters: {
+ docs: {
+ description: { story: 'Контент разделителя выровнен по левому краю.' },
+ source: {
+ language: 'ts',
+ code: `
+import { Component } from '@angular/core';
+import { DividerComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+ selector: 'app-divider-align-left',
+ standalone: true,
+ imports: [DividerComponent],
+ template: \`
+
+ Отправитель
+
+ \`,
+})
+export class DividerAlignLeftComponent {}
+ `,
+ },
+ },
+ },
+};
diff --git a/src/stories/components/divider/examples/divider-with-content.component.ts b/src/stories/components/divider/examples/divider-with-content.component.ts
new file mode 100644
index 00000000..b1b0b80f
--- /dev/null
+++ b/src/stories/components/divider/examples/divider-with-content.component.ts
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { DividerComponent } from '../../../../lib/components/divider/divider.component';
+
+const template = `
+
+
+ Москва → Новосибирск
+
+