diff --git a/@codexteam/ui/dev/Playground.vue b/@codexteam/ui/dev/Playground.vue
index d459ed9b..f34b2d7e 100644
--- a/@codexteam/ui/dev/Playground.vue
+++ b/@codexteam/ui/dev/Playground.vue
@@ -223,6 +223,16 @@ const pages = computed(() => [
         onActivate: () => router.push('/components/confirm'),
         isActive: route.path === '/components/confirm',
       },
+      {
+        title: 'Counter',
+        onActivate: () => router.push('/components/counter'),
+        isActive: route.path === '/components/counter',
+      },
+      {
+        title: 'Chart',
+        onActivate: () => router.push('/components/chart'),
+        isActive: route.path === '/components/chart',
+      },
     ],
   },
 ]);
diff --git a/@codexteam/ui/dev/pages/components/Chart.vue b/@codexteam/ui/dev/pages/components/Chart.vue
new file mode 100644
index 00000000..03e0de6d
--- /dev/null
+++ b/@codexteam/ui/dev/pages/components/Chart.vue
@@ -0,0 +1,234 @@
+<template>
+  <PageHeader>
+    Chart
+    <template #description>
+      A component for displaying line charts with smooth curves and interactive tooltips.
+    </template>
+  </PageHeader>
+
+  <div class="chart-props">
+    <div class="chart-props__item">
+      <h4 class="chart-props__name">
+        lines
+      </h4>
+      <p class="chart-props__description">
+        An array of line objects to display on the chart.
+      </p>
+    </div>
+
+    <div class="chart-props__item">
+      <h4 class="chart-props__name">
+        detalization
+      </h4>
+      <p class="chart-props__description">
+        Controls how timestamps are formatted on the X-axis legend and tooltip.
+        Does not affect data aggregation — only the display format.
+      </p>
+      <ul class="chart-props__list">
+        <li><code>'days'</code> — shows day and month (e.g., "19 dec")</li>
+        <li><code>'hours'</code> — shows day, month, and time (e.g., "19 dec, 14:00")</li>
+        <li><code>'minutes'</code> — shows day, month, and time (e.g., "19 dec, 14:30")</li>
+      </ul>
+      <div class="chart-props__control">
+        <span class="chart-props__control-label">Try it:</span>
+        <Select
+          v-model="detalizationSelected"
+          :align="{ vertically: 'below', horizontally: 'left' }"
+          :is-disabled="false"
+          :items="detalizationItems"
+        />
+      </div>
+    </div>
+  </div>
+
+  <Heading :level="3">
+    Single Line
+  </Heading>
+  <div class="chart-example">
+    <div class="chart-example__showcase">
+      <Chart
+        :lines="[singleLineData]"
+        :detalization="currentDetalization"
+      />
+    </div>
+  </div>
+
+  <Heading :level="3">
+    Multiple Lines
+  </Heading>
+  <div class="chart-example">
+    <div class="chart-example__showcase">
+      <Chart
+        :lines="multipleLinesData"
+        :detalization="currentDetalization"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import PageHeader from '../../components/PageHeader.vue';
+import { Chart, ChartLineColor, Heading, Select } from '../../../src/vue';
+import type { ChartItem, ChartLine } from '../../../src/vue/components/chart';
+import type { ContextMenuItem, DefaultItem } from '../../../src/vue/components/context-menu/ContextMenu.types';
+
+/**
+ * Detalization types for chart timestamp formatting
+ */
+type DetalizationValue = 'minutes' | 'hours' | 'days';
+
+/**
+ * Mapping from Select title to detalization value
+ */
+const detalizationMap: Record<string, DetalizationValue> = {
+  days: 'days',
+  hours: 'hours',
+  minutes: 'minutes',
+};
+
+/**
+ * Generate sample chart data
+ *
+ * @param points - Number of data points to generate
+ * @param intervalSeconds - Time interval between points in seconds
+ * @param baseValue - Base value for random count generation
+ */
+function generateData(points: number, intervalSeconds: number, baseValue = 100): ChartItem[] {
+  const now = Math.floor(Date.now() / 1000);
+
+  return Array.from({ length: points }, (_, i) => ({
+    timestamp: now - (points - i) * intervalSeconds,
+    count: Math.floor(Math.random() * baseValue) + Math.floor(baseValue / 2),
+  }));
+}
+
+/**
+ * Empty handler for select option activation
+ */
+const onActivate = (): void => {};
+
+/**
+ * Currently selected detalization option
+ */
+const detalizationSelected = ref<DefaultItem>({
+  title: 'days',
+  onActivate,
+});
+
+/**
+ * Available detalization options for the Select component
+ */
+const detalizationItems: ContextMenuItem[] = [
+  { title: 'days',
+    onActivate },
+  { title: 'hours',
+    onActivate },
+  { title: 'minutes',
+    onActivate },
+];
+
+/**
+ * Current detalization value derived from selected option
+ */
+const currentDetalization = computed<DetalizationValue>(() => {
+  return detalizationMap[detalizationSelected.value.title] || 'days';
+});
+
+/**
+ * Single line chart data - 30 days of events
+ */
+const singleLineData = computed<ChartLine>(() => ({
+  label: 'events',
+  data: generateData(30, 86400, 2000),
+  color: ChartLineColor.Red,
+}));
+
+/**
+ * Multiple lines chart data - accepted and filtered events
+ */
+const multipleLinesData = computed<ChartLine[]>(() => [
+  {
+    label: 'accepted',
+    data: generateData(30, 86400, 150),
+    color: ChartLineColor.Red,
+  },
+  {
+    label: 'filtered',
+    data: generateData(30, 86400, 50),
+    color: ChartLineColor.LightGrey,
+  },
+]);
+</script>
+
+<style scoped>
+.chart-props {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-l);
+  margin-bottom: var(--spacing-xl);
+
+  &__item {
+    padding: var(--spacing-m);
+    background-color: var(--base--bg-secondary);
+    border-radius: var(--radius-m);
+  }
+
+  &__name {
+    margin: 0 0 var(--spacing-s);
+  }
+
+  &__description {
+    margin: 0 0 var(--spacing-s);
+    color: var(--base--text-secondary);
+  }
+
+  &__code {
+    margin: 0;
+    padding: var(--spacing-s);
+    background-color: var(--base--bg-primary);
+    border-radius: var(--radius-s);
+    overflow-x: auto;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+    margin: 0 0 var(--spacing-m);
+    padding-left: var(--spacing-l);
+    color: var(--base--text-secondary);
+
+    code {
+      padding: var(--spacing-xxs) var(--spacing-ms);
+      background-color: var(--base--bg-primary);
+      border-radius: var(--radius-s);
+    }
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+
+  &__control-label {
+    color: var(--base--text-secondary);
+  }
+}
+
+.chart-example {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-l);
+  margin-bottom: var(--spacing-xl);
+  position: relative;
+
+  &__showcase {
+    width: 100%;
+    background-color: var(--base--bg-secondary);
+    border-radius: var(--radius-m);
+  }
+
+}
+</style>
diff --git a/@codexteam/ui/dev/pages/components/Counter.vue b/@codexteam/ui/dev/pages/components/Counter.vue
new file mode 100644
index 00000000..f445e4da
--- /dev/null
+++ b/@codexteam/ui/dev/pages/components/Counter.vue
@@ -0,0 +1,61 @@
+<template>
+  <PageHeader>
+    Counter
+    <template #description>
+      A component that animates value changes with a smooth slide transition effect.
+    </template>
+  </PageHeader>
+
+  <div class="counters">
+    <div class="counters__value">
+      <Counter :value="animatedValue" />
+    </div>
+    <div class="counters__btn">
+      <Button
+
+        @click="animatedValue += 100"
+      >
+        +100
+      </Button>
+      <Button
+
+        @click="animatedValue -= 100"
+      >
+        -100
+      </Button>
+      <Button
+        secondary
+        @click="animatedValue = 0"
+      >
+        Reset
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '../../components/PageHeader.vue';
+import { Counter, Button } from '../../../src/vue';
+
+const animatedValue = ref(100);
+
+</script>
+
+<style scoped>
+.counters {
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+  gap: var(--spacing-xxl);
+  align-items: center;
+  &__value{
+    width: 3rem;
+  }
+  &__btn{
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+}
+
+</style>
diff --git a/@codexteam/ui/dev/routes.ts b/@codexteam/ui/dev/routes.ts
index 2b9f8420..b3e09686 100644
--- a/@codexteam/ui/dev/routes.ts
+++ b/@codexteam/ui/dev/routes.ts
@@ -30,6 +30,8 @@ import Editor from './pages/components/Editor.vue';
 import ThemePreview from './pages/components/ThemePreview.vue';
 import Popup from './pages/components/Popup.vue';
 import Confirm from './pages/components/Confirm.vue';
+import Counter from './pages/components/Counter.vue';
+import Chart from './pages/components/Chart.vue';
 import Navbar from './pages/layout/Navbar.vue';
 import PageBlock from './pages/layout/PageBlock.vue';
 
@@ -157,6 +159,14 @@ const routes: RouteRecordRaw[] = [
     path: '/components/confirm',
     component: Confirm as Component,
   },
+  {
+    path: '/components/counter',
+    component: Counter as Component,
+  },
+  {
+    path: '/components/chart',
+    component: Chart as Component,
+  },
   {
     path: '/layout/navbar',
     component: Navbar as Component,
diff --git a/@codexteam/ui/src/vue/components/chart/Chart.colors.ts b/@codexteam/ui/src/vue/components/chart/Chart.colors.ts
new file mode 100644
index 00000000..3dd1a96e
--- /dev/null
+++ b/@codexteam/ui/src/vue/components/chart/Chart.colors.ts
@@ -0,0 +1,46 @@
+import { ChartLineColor } from './Chart.types';
+import type { ChartLineColors } from './Chart.types';
+
+/**
+ * Colors for dark color scheme.
+ */
+export const chartColorsDark: ChartLineColors[] = [
+  {
+    name: ChartLineColor.LightGrey,
+    strokeStart: 'rgba(75, 90, 121, 0.33)',
+    strokeEnd: 'rgba(71, 72, 85, 0.16)',
+    fillStart: 'rgba(63, 136, 255, 0.01)',
+    fillEnd: 'rgba(66, 78, 93, 0.05)',
+    pointerColor: '#717289',
+  },
+  {
+    name: ChartLineColor.Red,
+    strokeStart: '#FF2E51',
+    strokeEnd: '#424565',
+    fillStart: 'rgba(255, 46, 81, 0.3)',
+    fillEnd: 'rgba(66, 69, 101, 0)',
+    pointerColor: '#FF2E51',
+  },
+];
+
+/**
+ * Colors for light color scheme.
+ */
+export const chartColorsLight: ChartLineColors[] = [
+  {
+    name: ChartLineColor.LightGrey,
+    strokeStart: 'rgba(75, 90, 121, 0.22)',
+    strokeEnd: 'rgba(71, 72, 85, 0.08)',
+    fillStart: 'rgba(225, 236, 255, 0.12)',
+    fillEnd: 'rgba(66, 78, 93, 0.02)',
+    pointerColor: '#717289',
+  },
+  {
+    name: ChartLineColor.Red,
+    strokeStart: '#FF4A68',
+    strokeEnd: 'rgba(119, 136, 198, 0.4)',
+    fillStart: 'rgba(255, 94, 121, 0.46)',
+    fillEnd: 'rgba(255, 190, 198, 0)',
+    pointerColor: '#FF4A68',
+  },
+];
diff --git a/@codexteam/ui/src/vue/components/chart/Chart.types.ts b/@codexteam/ui/src/vue/components/chart/Chart.types.ts
new file mode 100644
index 00000000..d29562e1
--- /dev/null
+++ b/@codexteam/ui/src/vue/components/chart/Chart.types.ts
@@ -0,0 +1,80 @@
+/**
+ * Name of the color for the chart line stroke and fill.
+ */
+export enum ChartLineColor {
+  /**
+   * Accent color for primary line
+   */
+  Red = 'red',
+
+  /**
+   * Accent color for secondary line
+   */
+  LightGrey = 'light-grey'
+}
+
+/**
+ * Chart element in common case
+ */
+export interface ChartItem {
+  /**
+   * Timestamp of the data point
+   */
+  timestamp: number;
+
+  /**
+   * Value at the timestamp
+   */
+  count: number;
+}
+
+/**
+ * Chart line with label and data points
+ */
+export interface ChartLine {
+  /**
+   * Series label (e.g., "accepted", "rate-limited")
+   */
+  label: string;
+
+  /**
+   * Data points for the series
+   */
+  data: ChartItem[];
+
+  /**
+   * Name of the color for the line stroke and fill.
+   */
+  color?: ChartLineColor;
+}
+
+/**
+ * A particular color params
+ */
+export interface ChartLineColors {
+  /**
+   * Name of the color
+   */
+  name: ChartLineColor;
+  /**
+   * Starting color for stroke gradient (top)
+   */
+  strokeStart: string;
+  /**
+   * Ending color for stroke gradient (bottom)
+   */
+  strokeEnd: string;
+  /**
+   * Starting color for fill gradient (top, with opacity)
+   */
+  fillStart: string;
+  /**
+   * Ending color for fill gradient (bottom, usually transparent)
+   */
+  fillEnd: string;
+
+  /**
+   * Pointer + legend color
+   */
+  pointerColor: string;
+}
diff --git a/@codexteam/ui/src/vue/components/chart/Chart.vue b/@codexteam/ui/src/vue/components/chart/Chart.vue
new file mode 100644
index 00000000..d1d586b7
--- /dev/null
+++ b/@codexteam/ui/src/vue/components/chart/Chart.vue
@@ -0,0 +1,664 @@
+<template>
+  <div
+    class="chart"
+    @mousemove.passive="moveTooltip"
+    @mouseleave.passive="hoveredIndex = -1"
+  >
+    <svg
+      ref="chart"
+      class="chart__body"
+    >
+      <ChartLine
+        v-for="(preparedLine, index) in preparedLines"
+        :key="`chart-line-${index}`"
+        :points="preparedLine.line.data"
+        :color="preparedLine.line.color"
+        :chart-width="chartWidth"
+        :chart-height="chartHeight"
+        :min-value="preparedLine.min"
+        :max-value="preparedLine.max"
+        :step-x="stepX"
+        :label="preparedLine.line.label"
+      />
+    </svg>
+    <div
+      class="chart__ox"
+    >
+      <div
+        class="chart__ox-inner"
+      >
+        <span
+          v-for="item in visibleLegendPoints"
+          :key="item.index"
+          class="chart__ox-item"
+          :style="{ left: `${item.index * stepX}px`, transform: 'translateX(-50%)' }"
+        >
+          {{ formatTimestamp(item.point.timestamp * 1000) }}
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="hoveredIndex >= 0 && hoveredIndex < firstLineData.length"
+      :style="{ transform: `translateX(${pointerLeft}px)` }"
+      class="chart__pointer"
+    >
+      <template
+        v-for="(preparedLine, index) in preparedLines"
+      >
+        <div
+          v-if="!preparedLine.allZeros"
+          :key="`cursor-${preparedLine.line.label}-${index}`"
+          :style="{
+            transform: `translateY(${getLinePointerTop(preparedLine)}px)`,
+            backgroundColor: getCursorColor(preparedLine.line)
+          }"
+          class="chart__pointer-cursor"
+          :class="`chart__pointer-cursor--${preparedLine.line.label}`"
+        />
+      </template>
+      <div
+        class="chart__pointer-tooltip"
+        :class="{
+          'chart__pointer-tooltip--left': tooltipAlignment === 'left',
+          'chart__pointer-tooltip--right': tooltipAlignment === 'right'
+        }"
+        :style="{ minWidth: `${(String(firstLineData[hoveredIndex].count).length + ' events'.length) * 6.4 + 12}px` }"
+      >
+        <div class="chart__pointer-tooltip-date">
+          {{ formatTimestamp(firstLineData[hoveredIndex].timestamp * 1000) }}
+        </div>
+        <template
+          v-for="(preparedLine, index) in preparedLines"
+        >
+          <div
+            v-if="!preparedLine.allZeros"
+            :key="`tooltip-line-${preparedLine.line.label}-${index}`"
+            class="chart__pointer-tooltip-number"
+          >
+            <AnimatedCounter :value="formatSpacedNumber(getLineValueAtHoveredIndex(preparedLine.line, hoveredIndex))" />
+            {{ preparedLine.line.label }}
+            <span
+              class="chart__pointer-tooltip-dot"
+              :style="{ backgroundColor: getCursorColor(preparedLine.line) }"
+            />
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { ChartItem, ChartLineColors, ChartLine as ChartLineInterface } from './Chart.types';
+import { chartColorsDark, chartColorsLight } from './Chart.colors';
+import { ColorScheme, useTheme } from '../../composables/useTheme';
+import AnimatedCounter from '../counter/Counter.vue';
+import ChartLine from './ChartLine.vue';
+import { throttle } from '../../utils';
+
+/**
+ * Prepared line with precomputed min/max/allZeros
+ */
+interface PreparedLine {
+  line: ChartLineInterface;
+  min: number;
+  max: number;
+  allZeros: boolean;
+}
+
+interface Props {
+  /**
+   * List of lines for displaying on the chart
+   */
+  lines?: ChartLineInterface[];
+
+  /**
+   * Detalization of the chart affects the legend and tooltip display
+   */
+  detalization?: 'minutes' | 'hours' | 'days';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lines: () => [] as ChartLineInterface[],
+  detalization: 'days',
+});
+
+/**
+ * Current color scheme from theme system
+ */
+const { colorScheme } = useTheme();
+
+/**
+ * Palette for current color scheme
+ */
+const chartColorsPalette = computed<ChartLineColors[]>(() => {
+  return colorScheme.value === ColorScheme.Light
+    ? chartColorsLight
+    : chartColorsDark;
+});
+
+/**
+ * Chart SVG clientWidth
+ */
+const chartWidth = ref(0);
+
+/**
+ * Chart SVG clientHeight
+ */
+const chartHeight = ref(0);
+
+/**
+ * Hovered point index
+ */
+const hoveredIndex = ref(-1);
+
+/**
+ * Chart SVG element ref
+ */
+const chart = ref<SVGElement | null>(null);
+
+/**
+ * Cached chart left position for performance
+ */
+const chartLeft = ref(0);
+
+/**
+ * Precomputed line data with min/max/allZeros
+ * This avoids recalculating O(n_data) on every render/mousemove
+ */
+const preparedLines = computed((): PreparedLine[] => {
+  return props.lines.map((line) => {
+    let min = Infinity;
+    let max = 0;
+    let allZeros = true;
+
+    for (const item of line.data ?? []) {
+      const v = item.count ?? 0;
+
+      if (v < min) {
+        min = v;
+      }
+      if (v > max) {
+        max = v;
+      }
+      if (v !== 0) {
+        allZeros = false;
+      }
+    }
+
+    const safeMin = min === Infinity ? 0 : min;
+    const safeMax = max * 1.5;
+
+    return { line,
+      min: safeMin,
+      max: safeMax,
+      allZeros };
+  });
+});
+
+/**
+ * Width of x-legend item
+ */
+const xLegendWidth = computed((): number => {
+  switch (props.detalization) {
+    case 'days':
+      return 50;
+    case 'hours':
+      return 75;
+    case 'minutes':
+      return 90;
+    default:
+      return 55;
+  }
+});
+
+/**
+ * First line of the chart.
+ * Used for calculating stepX
+ */
+const firstLine = computed((): ChartLineInterface => {
+  return props.lines[0];
+});
+
+/**
+ * Data of the first line of the chart.
+ * Used for calculating stepX (and other common properties across all lines)
+ */
+const firstLineData = computed((): ChartItem[] => {
+  if (!firstLine.value) {
+    return [];
+  }
+
+  return firstLine.value.data;
+});
+
+/**
+ * Step for OX axis
+ */
+const stepX = computed((): number => {
+  if (firstLineData.value.length <= 1) {
+    return 0;
+  }
+
+  return chartWidth.value / (firstLineData.value.length - 1);
+});
+
+/**
+ * Calculate the step for displaying x-legend items to prevent overflow
+ * Returns how many items to skip between displayed items
+ */
+const visibleXLegendItems = computed((): number => {
+  if (!chartWidth.value || !firstLineData.value.length) {
+    return 1;
+  }
+
+  const maxItems = Math.floor(chartWidth.value / xLegendWidth.value);
+
+  if (maxItems >= firstLineData.value.length) {
+    return 1;
+  }
+
+  return Math.max(1, Math.ceil(firstLineData.value.length / maxItems));
+});
+
+/**
+ * Filtered points to display in x-legend based on visibleXLegendItems step
+ */
+const visibleLegendPoints = computed((): Array<{
+  point: ChartItem;
+  index: number;
+}> => {
+  const step = visibleXLegendItems.value;
+  const result: Array<{
+    point: ChartItem;
+    index: number;
+  }> = [];
+
+  for (let i = 0; i < firstLineData.value.length; i = i + step) {
+    result.push({
+      point: firstLineData.value[i],
+      index: i,
+    });
+  }
+
+  /* Ensure the last point is always included */
+  const lastIndex = firstLineData.value.length - 1;
+
+  if (result.length > 0 && result[result.length - 1].index !== lastIndex) {
+    result.push({
+      point: firstLineData.value[lastIndex],
+      index: lastIndex,
+    });
+  }
+
+  return result;
+});
+
+/**
+ * Left coordinate of hover pointer
+ */
+const pointerLeft = computed((): number => {
+  return hoveredIndex.value * stepX.value;
+});
+
+/**
+ * Tooltip alignment class based on position to prevent overflow
+ */
+const tooltipAlignment = computed((): string => {
+  const estimatedTooltipWidth = 100;
+  const pointerX = hoveredIndex.value * stepX.value;
+
+  if (pointerX < estimatedTooltipWidth / 2) {
+    /* Near left edge - align tooltip to the left */
+    return 'left';
+  } else if (pointerX > chartWidth.value - estimatedTooltipWidth / 2) {
+    /* Near right edge - align tooltip to the right */
+    return 'right';
+  }
+
+  /* Default center alignment */
+  return 'center';
+});
+
+/**
+ * Compute and save chart wrapper width
+ */
+function computeWrapperSize(): void {
+  const strokeWidth = 2;
+  const svg = chart.value as SVGElement;
+
+  if (!svg) {
+    chartWidth.value = 0;
+    chartHeight.value = 0;
+    chartLeft.value = 0;
+
+    return;
+  }
+
+  chartWidth.value = svg.clientWidth;
+  chartHeight.value = svg.clientHeight - strokeWidth;
+  chartLeft.value = svg.getBoundingClientRect().left;
+}
+
+/**
+ * Handler for window resize
+ */
+function windowResized(): void {
+  computeWrapperSize();
+}
+
+/**
+ * Handler of window resize
+ */
+const onResize = throttle(windowResized, 200);
+
+/**
+ * Moves tooltip to the hovered point
+ *
+ * @param event - mousemove
+ */
+function moveTooltip(event: MouseEvent): void {
+  if (firstLineData.value.length === 0) {
+    hoveredIndex.value = -1;
+
+    return;
+  }
+
+  if (stepX.value === 0) {
+    hoveredIndex.value = -1;
+
+    return;
+  }
+
+  const chartX = chartLeft.value;
+  const cursorX = event.clientX - chartX;
+
+  const newIndex = Math.round(cursorX / stepX.value);
+  const clampedIndex = Math.max(0, Math.min(firstLineData.value.length - 1, newIndex));
+
+  hoveredIndex.value = clampedIndex;
+}
+
+/**
+ * Get the Y coordinate for a line's pointer cursor at the hovered index
+ * Uses precomputed min/max from PreparedLine
+ *
+ * @param prepared - the prepared line with precomputed values
+ */
+function getLinePointerTop(prepared: PreparedLine): number {
+  if (hoveredIndex.value === -1 || !prepared.line.data || prepared.line.data.length === 0) {
+    return 0;
+  }
+
+  const point = prepared.line.data[hoveredIndex.value];
+
+  if (!point) {
+    return 0;
+  }
+
+  const lineKY = prepared.max === prepared.min
+    ? 1
+    : chartHeight.value / (prepared.max - prepared.min);
+
+  const currentValue = point.count ?? 0;
+
+  return chartHeight.value - (currentValue - prepared.min) * lineKY;
+}
+
+/**
+ * Get the value for a line at the hovered index
+ *
+ * @param line - the chart line
+ * @param index - hovered index
+ */
+function getLineValueAtHoveredIndex(line: ChartLineInterface, index: number): number {
+  if (!line || !line.data || index < 0 || index >= line.data.length) {
+    return 0;
+  }
+
+  const point = line.data[index];
+
+  if (!point) {
+    return 0;
+  }
+
+  return point.count || 0;
+}
+
+/**
+ * Return colors set for a particular chart line
+ *
+ * @param line - the chart line
+ */
+function getLineColor(line: ChartLineInterface): ChartLineColors {
+  const colorName = line.color ?? 'red';
+
+  const color = chartColorsPalette.value.find(c => c.name === colorName);
+
+  if (!color) {
+    throw new Error(`Color ${colorName} not found in chartColors`);
+  }
+
+  return color;
+}
+
+/**
+ * Cursor is a pointer on the chart line appearing when hovering over it
+ *
+ * @param line - the chart line
+ */
+function getCursorColor(line: ChartLineInterface): string {
+  const color = getLineColor(line);
+
+  return color.pointerColor;
+}
+
+/**
+ * Formats timestamp based on detalization prop
+ *
+ * @param timestamp - timestamp in milliseconds
+ */
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  const shortMonths = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
+
+  if (props.detalization === 'days') {
+    /* For days, show only day and month */
+    const day = date.getDate();
+    const month = date.getMonth();
+
+    return `${day} ${shortMonths[month]}`;
+  } else {
+    /* For hours and minutes, show day, month, hours:minutes */
+    const day = date.getDate();
+    const month = date.getMonth();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const paddedHours = hours.toString().padStart(2, '0');
+    const paddedMinutes = minutes.toString().padStart(2, '0');
+
+    return `${day} ${shortMonths[month]}, ${paddedHours}:${paddedMinutes}`;
+  }
+}
+
+/**
+ * Formats number with spaces
+ *
+ * @param value - number value
+ */
+function formatSpacedNumber(value: number): string {
+  return new Intl.NumberFormat('ru-RU').format(value);
+}
+
+onMounted(() => {
+  /**
+   * Cache wrapper width
+   */
+  computeWrapperSize();
+
+  window.addEventListener('resize', onResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize);
+});
+</script>
+
+<style>
+  .chart {
+    position: relative;
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    height: 215px;
+    background-color: var(--base--bg-secondary);
+    border-radius: var(--radius-s);
+
+    --legend-height: 40px;
+    --legend-line-height: 11px;
+    --legend-block-padding: 15px;
+
+    &__info {
+      position: absolute;
+      top: var(--spacing-ml);
+      right: var(--spacing-ml);
+      padding: var(--spacing-xs) var(--spacing-ms);
+      color: var(--base--text);
+      font-size: 13px;
+      white-space: nowrap;
+      background: color-mod(var(--base--bg-primary) alpha(50%));
+      border-radius: var(--radius-s);
+
+      &-today {
+        color: var(--base--text-secondary);
+      }
+
+      &-highlight {
+        margin-left: var(--spacing-xs);
+        font-weight: bold;
+      }
+    }
+
+    &__body {
+      flex-grow: 2;
+    }
+
+    &__ox {
+      height: var(--legend-height);
+      padding-block: var(--legend-block-padding);
+      box-sizing: border-box;
+
+      &-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      &-item {
+        position: absolute;
+        left: 0;
+        color: var(--base--text);
+        font-size: 11px;
+        line-height: var(--legend-line-height);
+        text-align: center;
+        transform-origin: center;
+        opacity: 0.3;
+        white-space: nowrap;
+
+        &:first-of-type,
+        &:last-of-type {
+          display: none;
+        }
+      }
+    }
+
+    &__pointer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 0;
+      width: 3px;
+      height: 100%;
+      margin-left: -1.5px;
+      background-color: rgba(25, 28, 37, 0.5);
+      animation: pointer-in 200ms ease;
+      will-change: opacity, transform;
+
+      &-cursor {
+        position: absolute;
+        top: 0;
+        width: 7px;
+        height: 7px;
+        margin-top: -3.5px;
+        margin-left: -2px;
+        border-radius: 50%;
+        opacity: 1;
+        will-change: transform;
+      }
+
+      &-tooltip {
+        --tooltip-block-padding: var(--spacing-xs);
+
+        position: absolute;
+        top: calc(100% - var(--legend-height) + var(--legend-block-padding) - var(--tooltip-block-padding) - 1px);
+        left: 50%;
+        z-index: 500;
+        padding-block: var(--tooltip-block-padding);
+        padding-inline: var(--spacing-s);
+        color: var(--base--text);
+        font-size: 12px;
+        line-height: 1.4;
+        letter-spacing: 0.2px;
+        white-space: nowrap;
+        text-align: center;
+        background: var(--base--bg-primary);
+        border-radius: var(--radius-m);
+        box-shadow: 0 7px 12px 0 rgba(0, 0, 0, 0.12);
+        transform: translateX(-50%);
+        transition: min-width 150ms ease;
+
+        &--left {
+          left: 0;
+          transform: translateX(0);
+        }
+
+        &--right {
+          right: 0;
+          left: auto;
+          transform: translateX(0);
+        }
+
+        &-date {
+          margin-bottom: var(--spacing-very-x);
+          color: var(--base--text-secondary);
+          font-size: 11px;
+        }
+
+        &-number {
+          font-weight: 500;
+        }
+
+        &-dot {
+          display: inline-block;
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          vertical-align: middle;
+          margin-left: 2px;
+          margin-top: -1px;
+        }
+      }
+    }
+  }
+
+  @keyframes pointer-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/@codexteam/ui/src/vue/components/chart/ChartLine.vue b/@codexteam/ui/src/vue/components/chart/ChartLine.vue
new file mode 100644
index 00000000..fedbc1c2
--- /dev/null
+++ b/@codexteam/ui/src/vue/components/chart/ChartLine.vue
@@ -0,0 +1,265 @@
+<template>
+  <g :data-label="label">
+    <defs>
+      <linearGradient
+        :id="gradientId"
+        gradientTransform="rotate(90)"
+      >
+        <stop
+          offset="0%"
+          :style="{ 'stop-color': colorSet.strokeStart }"
+        />
+        <stop
+          offset="100%"
+          :style="`stop-color:${colorSet.strokeEnd};`"
+        />
+      </linearGradient>
+      <linearGradient
+        :id="fillGradientId"
+        gradientTransform="rotate(90)"
+      >
+        <stop
+          offset="0%"
+          :style="`stop-color:${colorSet.fillStart};`"
+        />
+        <stop
+          offset="100%"
+          :style="`stop-color:${colorSet.fillEnd};`"
+        />
+      </linearGradient>
+    </defs>
+    <path
+      class="chart__body-path-fill"
+      :fill="`url(#${fillGradientId})`"
+      :d="smoothPathFill"
+    />
+    <path
+      class="chart__body-path"
+      fill="none"
+      :stroke="`url(#${gradientId})`"
+      stroke-width="3"
+      :d="smoothPath"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ChartItem, ChartLineColor, ChartLineColors } from './Chart.types';
+import { chartColorsDark, chartColorsLight } from './Chart.colors';
+import { ColorScheme, useTheme } from '../../composables/useTheme';
+
+interface Props {
+  /**
+   * List of points for displaying on the chart
+   */
+  points?: ChartItem[];
+
+  /**
+   * Label for the chart line
+   */
+  label?: string;
+
+  /**
+   * Name of the color for the chart line
+   */
+  color?: ChartLineColor;
+
+  /**
+   * Chart SVG clientWidth
+   */
+  chartWidth?: number;
+
+  /**
+   * Chart SVG clientHeight
+   */
+  chartHeight?: number;
+
+  /**
+   * Minimum value for scaling
+   */
+  minValue?: number;
+
+  /**
+   * Maximum value for scaling
+   */
+  maxValue?: number;
+
+  /**
+   * Step for OX axis
+   */
+  stepX?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  points: () => [] as ChartItem[],
+  label: '',
+  color: ChartLineColor.Red,
+  chartWidth: 0,
+  chartHeight: 0,
+  minValue: 0,
+  maxValue: 0,
+  stepX: 0,
+});
+
+/**
+ * Current color scheme from theme system
+ */
+const { colorScheme } = useTheme();
+
+/**
+ * Palette for current color scheme
+ */
+const chartColorsPalette = computed<ChartLineColors[]>(() => {
+  return colorScheme.value === ColorScheme.Light
+    ? chartColorsLight
+    : chartColorsDark;
+});
+
+/**
+ * Unique ID for gradient definitions to avoid conflicts when multiple ChartLine components are used
+ */
+const gradientId = `chart-gradient-${Math.random()
+  .toString(36)
+  .substring(2, 9)}`;
+const fillGradientId = `chart-fill-gradient-${Math.random()
+  .toString(36)
+  .substring(2, 9)}`;
+
+/**
+ * The ratio of the maximum value and the height of the graph
+ */
+const kY = computed((): number => {
+  if (props.maxValue === props.minValue) {
+    return 1;
+  }
+
+  return props.chartHeight / (props.maxValue - props.minValue);
+});
+
+/**
+ * Smooth path using cubic Bezier curves for SVG <path>
+ */
+const smoothPath = computed((): string => {
+  if (!props.points || !props.points.length) {
+    return '';
+  }
+
+  if (props.points.length === 1) {
+    const pointX = 0;
+    const pointY = props.chartHeight - (props.points[0].count - props.minValue) * kY.value;
+
+    return `M ${pointX} ${pointY}`;
+  }
+
+  const pathPoints: Array<{
+    x: number;
+    y: number;
+  }> = [];
+
+  props.points.forEach((day, index) => {
+    const value = day.count;
+    const pointX = index * props.stepX;
+    const pointY = props.chartHeight - (value - props.minValue) * kY.value;
+
+    pathPoints.push({
+      x: pointX,
+      y: pointY,
+    });
+  });
+
+  /* Start with move to first point */
+  let path = `M ${pathPoints[0].x} ${pathPoints[0].y}`;
+
+  /* Vertical margins to prevent curve from going outside chart area */
+  const verticalMargin = 2;
+  const minY = verticalMargin;
+  const maxY = props.chartHeight - verticalMargin;
+
+  /* Generate smooth curves between points */
+  for (let i = 0; i < pathPoints.length - 1; i++) {
+    const p0 = i > 0 ? pathPoints[i - 1] : pathPoints[i];
+    const p1 = pathPoints[i];
+    const p2 = pathPoints[i + 1];
+    const p3 = i < pathPoints.length - 2 ? pathPoints[i + 2] : p2;
+
+    /* Check if both points in segment are at minimum (zero or near zero) */
+    const v1 = props.points[i].count;
+    const v2 = props.points[i + 1].count;
+    const isFlat = v1 === props.minValue && v2 === props.minValue;
+
+    if (isFlat) {
+      /* Use linear interpolation for flat segments at minimum value */
+      path += ` L ${p2.x} ${p2.y}`;
+    } else {
+      /* Calculate control points for cubic Bezier curve */
+      const cp1x = p1.x + (p2.x - p0.x) / 6;
+      let cp1y = p1.y + (p2.y - p0.y) / 6;
+      const cp2x = p2.x - (p3.x - p1.x) / 6;
+      let cp2y = p2.y - (p3.y - p1.y) / 6;
+
+      /* Clamp control points to stay within chart bounds */
+      cp1y = Math.max(minY, Math.min(maxY, cp1y));
+      cp2y = Math.max(minY, Math.min(maxY, cp2y));
+
+      /* Add cubic Bezier curve segment */
+      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+    }
+  }
+
+  return path;
+});
+
+/**
+ * Smooth path with closed area for gradient fill
+ */
+const smoothPathFill = computed((): string => {
+  if (!props.points || !props.points.length) {
+    return '';
+  }
+
+  const path = smoothPath.value;
+
+  if (!path) {
+    return '';
+  }
+
+  if (props.points.length === 1) {
+    const pointX = 0;
+    const pointY = props.chartHeight - (props.points[0].count - props.minValue) * kY.value;
+
+    /* Close the path: line to bottom right, line to bottom left, close */
+    return `M ${pointX} ${pointY} L ${pointX} ${props.chartHeight} L ${pointX} ${props.chartHeight} Z`;
+  }
+
+  /* Get the last point coordinates from the path */
+  const lastIndex = props.points.length - 1;
+  const lastX = lastIndex * props.stepX;
+  const firstX = 0;
+
+  /* Close the path: line to bottom right, line to bottom left, close back to start */
+  return `${path} L ${lastX} ${props.chartHeight} L ${firstX} ${props.chartHeight} Z`;
+});
+
+/**
+ * Color for the chart line
+ */
+const colorSet = computed((): ChartLineColors => {
+  return chartColorsPalette.value.find(c => c.name === props.color) as ChartLineColors;
+});
+</script>
+
+<style>
+.chart__body-path-fill {
+  stroke: none;
+  vector-effect: non-scaling-stroke;
+  shape-rendering: geometricPrecision;
+}
+
+.chart__body-path {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+  shape-rendering: geometricPrecision;
+}
+</style>
diff --git a/@codexteam/ui/src/vue/components/chart/index.ts b/@codexteam/ui/src/vue/components/chart/index.ts
new file mode 100644
index 00000000..31f6e4e1
--- /dev/null
+++ b/@codexteam/ui/src/vue/components/chart/index.ts
@@ -0,0 +1,5 @@
+import Chart from './Chart.vue';
+
+export { Chart };
+export * from './Chart.types';
+export * from './Chart.colors';
diff --git a/@codexteam/ui/src/vue/components/counter/Counter.vue b/@codexteam/ui/src/vue/components/counter/Counter.vue
new file mode 100644
index 00000000..af18f82e
--- /dev/null
+++ b/@codexteam/ui/src/vue/components/counter/Counter.vue
@@ -0,0 +1,98 @@
+<template>
+  <span class="a-counter">
+    <span
+      v-if="prevValue !== null"
+      class="a-counter__prev"
+    >
+      {{ prevValue }}
+    </span>
+    <span
+      v-if="curValue !== null"
+      class="a-counter__cur"
+    >
+      {{ curValue }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+interface Props {
+  /**
+   * Passed value for animating
+   */
+  value: string | number;
+}
+
+const props = defineProps<Props>();
+
+/**
+ * Previous value to jump out
+ */
+const prevValue = ref<string | number | null>(null);
+
+/**
+ * Current value to jump in
+ */
+const curValue = ref<string | number | null>(props.value);
+
+watch(() => props.value, (newValue, oldValue) => {
+  prevValue.value = null;
+  curValue.value = null;
+
+  setTimeout(() => {
+    prevValue.value = oldValue;
+    curValue.value = newValue;
+  }, 10);
+});
+</script>
+
+<style>
+  .a-counter {
+    position: relative;
+    display: inline-block;
+    min-width: 7px;
+    height: 1em;
+
+    &__prev,
+    &__cur {
+      will-change: transform, opacity;
+    }
+
+    &__prev {
+      position: absolute;
+      animation: prev-out 500ms ease forwards;
+    }
+
+    &__cur {
+      position: relative;
+      display: inline-block;
+      animation: cur-in 500ms ease forwards;
+    }
+  }
+
+  @keyframes cur-in {
+    from {
+      transform: translateY(-5px);
+      opacity: 0;
+    }
+
+    to {
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  @keyframes prev-out {
+    from {
+      transform: none;
+      opacity: 1;
+    }
+
+    to {
+      transform: translateY(5px);
+      opacity: 0;
+    }
+  }
+</style>
diff --git a/@codexteam/ui/src/vue/components/counter/index.ts b/@codexteam/ui/src/vue/components/counter/index.ts
new file mode 100644
index 00000000..31356f90
--- /dev/null
+++ b/@codexteam/ui/src/vue/components/counter/index.ts
@@ -0,0 +1,3 @@
+import Counter from './Counter.vue';
+
+export { Counter };
diff --git a/@codexteam/ui/src/vue/index.ts b/@codexteam/ui/src/vue/index.ts
index 1a2de67d..4cd7c227 100644
--- a/@codexteam/ui/src/vue/index.ts
+++ b/@codexteam/ui/src/vue/index.ts
@@ -21,6 +21,8 @@ export * from './components/confirm';
 export * from './composables/useTheme';
 export * from './components/checkbox';
 export * from './components/select';
+export * from './components/chart';
+export * from './components/counter';
 
 export * from './layout/navbar';
 export * from './layout/page-block';
diff --git a/@codexteam/ui/src/vue/utils/index.ts b/@codexteam/ui/src/vue/utils/index.ts
new file mode 100644
index 00000000..073ec4a2
--- /dev/null
+++ b/@codexteam/ui/src/vue/utils/index.ts
@@ -0,0 +1,3 @@
+import { throttle } from './throttle';
+
+export { throttle };
diff --git a/@codexteam/ui/src/vue/utils/throttle.ts b/@codexteam/ui/src/vue/utils/throttle.ts
new file mode 100644
index 00000000..80d707bd
--- /dev/null
+++ b/@codexteam/ui/src/vue/utils/throttle.ts
@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/**
+ * Throttle function to limit the rate of execution
+ * @param callback - Function to be throttled
+ * @param delay - Delay in milliseconds
+ */
+export function throttle(callback: () => void, delay: number): () => void {
+  let lastExecTime = 0;
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return function (...args): void {
+    const currentTime = Date.now();
+    const timeSinceLastExec = currentTime - lastExecTime;
+
+    if (timeSinceLastExec >= delay) {
+      /* Execute immediately if enough time has passed */
+      lastExecTime = currentTime;
+      // @ts-ignore
+      callback.apply(this, args);
+    } else {
+      /* Schedule execution for the remaining time */
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+      }
+
+      const remainingTime = delay - timeSinceLastExec;
+
+      timeoutId = setTimeout(() => {
+        lastExecTime = Date.now();
+
+        // @ts-ignore
+        callback.apply(this, args);
+        timeoutId = null;
+      }, remainingTime);
+    }
+  };
+}