diff --git a/frui/src/element/Pagination.tsx b/frui/src/element/Pagination.tsx
new file mode 100644
index 0000000..966ea27
--- /dev/null
+++ b/frui/src/element/Pagination.tsx
@@ -0,0 +1,204 @@
+//types
+import type { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Pagination Props
+ */
+export type PaginationProps = {
+  total?: number;
+  start?: number;
+  range?: number;
+  radius?: 0 | 1 | 2 | 3 | 4;
+  next?: boolean;
+  prev?: boolean;
+  rewind?: boolean;
+  forward?: boolean;
+  link?: boolean;
+  control?: boolean;
+  border?: boolean;
+  background?: boolean;
+  square?: number;
+  size?: string;
+  xs?: boolean;
+  sm?: boolean;
+  md?: boolean;
+  lg?: boolean;
+  xl?: boolean;
+  xl2?: boolean;
+  xl3?: boolean;
+  xl4?: boolean;
+  xl5?: boolean;
+  color?: string;
+  white?: boolean;
+  black?: boolean;
+  info?: boolean;
+  warning?: boolean;
+  success?: boolean;
+  error?: boolean;
+  muted?: boolean;
+  primary?: boolean;
+  secondary?: boolean;
+  page?: (page: number) => void;
+  className?: string;
+  style?: CSSProperties;
+};
+
+/**
+ * Pagination Component (Main)
+ */
+export default function Pagination(props: PaginationProps) {
+  const {
+    total = 0,
+    start = 0,
+    range = 50,
+    radius = 2,
+    next,
+    prev,
+    rewind,
+    forward,
+    link = false,
+    control = false,
+    border = true,
+    background = true,
+    square = 0,
+    size,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xl2,
+    xl3,
+    xl4,
+    xl5,
+    color,
+    white,
+    black,
+    info,
+    warning,
+    success,
+    error,
+    muted,
+    primary,
+    secondary,
+    page: select = () => {},
+    className,
+    style,
+  } = props;
+
+  const defaults: {
+    classes: string[];
+    styles: Record<string, string>;
+  } = {
+    classes: ['frui-pagination'],
+    styles: {}
+  };
+
+  //size handling
+  const sizeClass = size || (
+    xs ? 'xs' : 
+    sm ? 'sm' : 
+    md ? 'md' : 
+    lg ? 'lg' : 
+    xl ? 'xl' : 
+    xl2 ? '2xl' : 
+    xl3 ? '3xl' : 
+    xl4 ? '4xl' : 
+    xl5 ? '5xl' : 'md'
+  );
+  defaults.classes.push(`frui-text-${sizeClass}`);
+
+  //color handling
+  const colorClass = color || (
+    white ? 'white' : 
+    black ? 'black' : 
+    info ? 'info' : 
+    warning ? 'warning' : 
+    success ? 'success' : 
+    error ? 'error' : 
+    muted ? 'muted' : 
+    primary ? 'primary' : 
+    secondary ? 'secondary' : ''
+  );
+  if (colorClass) defaults.classes.push(`frui-tx-${colorClass}`);
+
+  //additional styling
+  defaults.classes.push(`radius-${radius}`);
+  if (square > 0) {
+    defaults.classes.push('square');
+    defaults.styles['--square-size'] = `${square}px`;
+  }
+  if (link) defaults.classes.push('link');
+  if (control) defaults.classes.push('control');
+  if (!border) defaults.classes.push('no-border');
+  if (!background) defaults.classes.push('no-background');
+
+  const map = {
+    classes: [...defaults.classes, className].filter(Boolean).join(' '),
+    styles: { ...defaults.styles, ...style }
+  };
+
+  const totalPages = Math.ceil(total / range);
+  const currentPage = Math.ceil((start + 1) / range) || 1;
+
+  const calculatePages = () => {
+    const pages = Array.from({ length: totalPages }, (_, i) => i + 1).filter(
+      page => page >= currentPage - radius && page <= currentPage + radius
+    );
+    return pages.length > 1 ? pages : [];
+  };
+
+  const pages = calculatePages();
+
+  const renderButton = (content: ReactNode, pageNum: number | null, isControl = false, disabled = false) => {
+    const onClick = pageNum !== null && !disabled ? () => select(pageNum) : undefined;
+    const commonProps = {
+      className: `frui-pagination-btn ${isControl ? 'control' : ''}`,
+      onClick,
+      disabled,
+      'aria-label': typeof content === 'string' ? content : undefined,
+    };
+
+    return link && !isControl ? (
+      <a href={`#page-${pageNum}`} {...commonProps}>
+        {content}
+      </a>
+    ) : (
+      <button type="button" {...commonProps}>
+        {content}
+      </button>
+    );
+  };
+
+  const renderSpan = (content: ReactNode) => {
+    const isCustomColor = color && !white && !black && !info && !warning && !success && !error && !muted && !primary && !secondary;
+    const activeStyle = isCustomColor && currentPage === content ? {
+      backgroundColor: color,
+      borderColor: color,
+      color: '#FFFFFF'
+    } : {};
+
+    return (
+      <span
+        className={`frui-pagination-span ${currentPage === content ? 'active' : ''}`}
+        style={activeStyle}
+      >
+        {content}
+      </span>
+    );
+  };
+
+  return (
+    <nav className={map.classes} style={map.styles} aria-label="pagination">
+      {(rewind && renderButton(<i className="fas fa-fw fa-fast-backward" />, 1, true, currentPage === 1 || pages[0] === 1))}
+      {(prev && renderButton(<i className="fas fa-fw fa-chevron-left" />, currentPage - 1, true, currentPage === 1))}
+      {pages.map(page => (
+        <div key={page}>
+          {(page === currentPage ? renderSpan(page) : renderButton(page, page))}
+        </div>
+      ))}
+      {(next && renderButton(<i className="fas fa-fw fa-chevron-right" />, currentPage + 1, true, currentPage === totalPages))}
+      {(forward && renderButton(<i className="fas fa-fw fa-fast-forward" />, totalPages, true, currentPage === totalPages || pages[pages.length - 1] === totalPages))}
+    </nav>
+  );
+}; 
\ No newline at end of file
diff --git a/frui/styles/pagination.css b/frui/styles/pagination.css
new file mode 100644
index 0000000..1c48e16
--- /dev/null
+++ b/frui/styles/pagination.css
@@ -0,0 +1,220 @@
+/* Base styles */
+.frui-pagination {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.frui-pagination-btn,
+.frui-pagination-span {
+  align-items: center;
+  background-color: var(--bg, #FFFFFF);
+  border: 1px solid var(--border, #CCCCCC);
+  color: var(--fg-default, #222222);
+  display: inline-flex;
+  height: 32px;
+  justify-content: center;
+  min-width: 32px;
+  padding: 0 8px;
+  text-decoration: none;
+  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
+}
+
+.frui-pagination.link .frui-pagination-btn:not(.control) {
+  text-decoration: underline;
+}
+
+.frui-pagination.control .frui-pagination-btn.control {
+  background-color: var(--muted, #777777);
+  color: var(--white, #FFFFFF);
+}
+
+.frui-pagination.no-border .frui-pagination-btn,
+.frui-pagination.no-border .frui-pagination-span {
+  border: none;
+}
+
+.frui-pagination.no-background .frui-pagination-btn,
+.frui-pagination.no-background .frui-pagination-span {
+  background-color: transparent;
+}
+
+.frui-pagination-span.active {
+  background-color: var(--primary, #1474FC);
+  border-color: var(--primary, #1474FC);
+  color: var(--white, #FFFFFF);
+  font-weight: bold;
+}
+
+.frui-pagination.frui-tx-white .frui-pagination-span.active {
+  background-color: var(--white, #FFFFFF);
+  border-color: var(--white, #FFFFFF);
+  color: var(--black, #222222);
+}
+
+.frui-pagination.frui-tx-black .frui-pagination-span.active {
+  background-color: var(--black, #000000);
+  border-color: var(--black, #000000);
+  color: var(--white, #FFFFFF);
+}
+
+.frui-pagination.frui-tx-info .frui-pagination-span.active {
+  background-color: var(--info, #17A2B8);
+  border-color: var(--info, #17A2B8);
+  color: var(--white, #FFFFFF);
+}
+
+.frui-pagination.frui-tx-warning .frui-pagination-span.active {
+  background-color: var(--warning, #FFC107);
+  border-color: var(--warning, #FFC107);
+  color: var(--black, #222222);
+}
+
+.frui-pagination.frui-tx-success .frui-pagination-span.active {
+  background-color: var(--success, #28A745);
+  border-color: var(--success, #28A745);
+  color: var(--white, #FFFFFF);
+}
+
+.frui-pagination.frui-tx-error .frui-pagination-span.active {
+  background-color: var(--error, #DC3545);
+  border-color: var(--error, #DC3545);
+  color: var(--white, #FFFFFF);
+}
+
+.frui-pagination.frui-tx-muted .frui-pagination-span.active {
+  background-color: var(--muted, #6C757D);
+  border-color: var(--muted, #6C757D);
+  color: var(--white, #FFFFFF);
+}
+
+.frui-pagination.frui-tx-primary .frui-pagination-span.active {
+  background-color: var(--primary, #007BFF);
+  border-color: var(--primary, #007BFF);
+  color: var(--white, #FFFFFF);
+}
+
+.frui-pagination.frui-tx-secondary .frui-pagination-span.active {
+  background-color: var(--secondary, #6C757D);
+  border-color: var(--secondary, #6C757D);
+  color: var(--white, #FFFFFF);
+}
+
+.frui-pagination-btn:not(.control):hover {
+  background-color: var(--bg-hover, #F5F5F5);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  color: var(--fg-primary, #007BFF);
+  transform: translateY(-1px);
+}
+
+.frui-pagination-btn[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transform: none;
+}
+
+.frui-pagination.frui-text-xs .frui-pagination-btn,
+.frui-pagination.frui-text-xs .frui-pagination-span {
+  font-size: 12px;
+  height: 24px;
+  min-width: 24px;
+}
+
+.frui-pagination.frui-text-sm .frui-pagination-btn,
+.frui-pagination.frui-text-sm .frui-pagination-span {
+  font-size: 14px;
+  height: 28px;
+  min-width: 28px;
+}
+
+.frui-pagination.frui-text-md .frui-pagination-btn,
+.frui-pagination.frui-text-md .frui-pagination-span {
+  font-size: 16px;
+  height: 32px;
+  min-width: 32px;
+}
+
+.frui-pagination.frui-text-lg .frui-pagination-btn,
+.frui-pagination.frui-text-lg .frui-pagination-span {
+  font-size: 18px;
+  height: 36px;
+  min-width: 36px;
+}
+
+.frui-pagination.frui-text-xl .frui-pagination-btn,
+.frui-pagination.frui-text-xl .frui-pagination-span {
+  font-size: 20px;
+  height: 40px;
+  min-width: 40px;
+}
+
+.frui-pagination.frui-text-2xl .frui-pagination-btn,
+.frui-pagination.frui-text-2xl .frui-pagination-span {
+  font-size: 24px;
+  height: 48px;
+  min-width: 48px;
+}
+
+.frui-pagination.frui-text-3xl .frui-pagination-btn,
+.frui-pagination.frui-text-3xl .frui-pagination-span {
+  font-size: 30px;
+  height: 56px;
+  min-width: 56px;
+}
+
+.frui-pagination.frui-text-4xl .frui-pagination-btn,
+.frui-pagination.frui-text-4xl .frui-pagination-span {
+  font-size: 36px;
+  height: 64px;
+  min-width: 64px;
+}
+
+.frui-pagination.frui-text-5xl .frui-pagination-btn,
+.frui-pagination.frui-text-5xl .frui-pagination-span {
+  font-size: 48px;
+  height: 80px;
+  min-width: 80px;
+}
+
+.frui-pagination.square .frui-pagination-btn,
+.frui-pagination.square .frui-pagination-span {
+  height: var(--square-size);
+  min-width: unset;
+  width: var(--square-size);
+}
+
+.frui-pagination.radius-0 .frui-pagination-btn,
+.frui-pagination.radius-0 .frui-pagination-span {
+  border-radius: 0;
+}
+
+.frui-pagination.radius-1 .frui-pagination-btn,
+.frui-pagination.radius-1 .frui-pagination-span {
+  border-radius: 4px;
+}
+
+.frui-pagination.radius-2 .frui-pagination-btn,
+.frui-pagination.radius-2 .frui-pagination-span {
+  border-radius: 8px;
+}
+
+.frui-pagination.radius-3 .frui-pagination-btn,
+.frui-pagination.radius-3 .frui-pagination-span {
+  border-radius: 12px;
+}
+
+.frui-pagination.radius-4 .frui-pagination-btn,
+.frui-pagination.radius-4 .frui-pagination-span {
+  border-radius: 16px;
+}
+
+.frui-pagination.square .frui-pagination-btn,
+.frui-pagination.square .frui-pagination-span {
+  border-radius: 0;
+}
+
+.custom-pagination .frui-pagination-btn:hover:not(.control) {
+  background-color: #D0E8D9;
+  color: #00A352;
+}
\ No newline at end of file
diff --git a/web/pages/component/pagination.tsx b/web/pages/component/pagination.tsx
new file mode 100644
index 0000000..3dff949
--- /dev/null
+++ b/web/pages/component/pagination.tsx
@@ -0,0 +1,467 @@
+//types
+import type { Crumb } from 'modules/components/Crumbs';
+import type { PaginationProps } from 'frui/element/Pagination';
+
+//hooks
+import { useState } from 'react';
+import { useLanguage } from 'r22n';
+
+//components
+import Link from 'next/link';
+import { Translate } from 'r22n';
+import Pagination from 'frui/element/Pagination';
+import { LayoutPanel } from 'modules/theme';
+import Crumbs from 'modules/components/Crumbs';
+import Props from 'modules/components/Props';
+import Code, { InlineCode as C } from 'modules/components/Code';
+
+//constants
+const codeBasic = `
+const [currentPage, setCurrentPage] = useState(1);
+<Pagination
+  total={500}
+  start={(currentPage - 1) * 100}
+  range={100}
+  page={(p) => setCurrentPage(p)}
+/>
+`.trim();
+
+const codeMinimal = `
+const [currentPage, setCurrentPage] = useState(1);
+<Pagination
+  total={300}
+  start={(currentPage - 1) * 50}
+  range={50}
+  prev
+  next
+  radius={1}
+  page={(p) => setCurrentPage(p)}
+/>
+`.trim();
+
+const codeControls = `
+const [currentPage, setCurrentPage] = useState(1);
+<Pagination
+  total={500}
+  start={(currentPage - 1) * 100}
+  range={100}
+  rewind
+  prev
+  next
+  forward
+  page={(p) => setCurrentPage(p)}
+/>
+`.trim();
+
+const codeDisabled = `
+const [currentPage, setCurrentPage] = useState(1);
+<Pagination
+  total={250}
+  start={(currentPage - 1) * 50}
+  range={50}
+  rewind
+  prev
+  next
+  forward
+  md
+  page={(p) => setCurrentPage(p)}
+/>
+`.trim();
+
+const codeSquare = `
+const [currentPage, setCurrentPage] = useState(1);
+<Pagination
+  total={400}
+  start={(currentPage - 1) * 80}
+  range={80}
+  square={30}
+  border={false}
+  radius={3}
+  prev
+  next
+  page={(p) => setCurrentPage(p)}
+/>
+`.trim();
+
+const codeColors = `
+<Pagination total={500} start={0} range={100} white />
+<Pagination total={500} start={100} range={100} black />
+<Pagination total={500} start={200} range={100} info />
+<Pagination total={500} start={300} range={100} warning />
+<Pagination total={500} start={400} range={100} success />
+<Pagination total={500} start={0} range={100} error />
+<Pagination total={500} start={100} range={100} muted />
+<Pagination total={500} start={200} range={100} primary />
+<Pagination total={500} start={300} range={100} secondary />
+<Pagination total={500} start={400} range={100} color="purple" />
+`.trim();
+
+const codeSizes = `
+<Pagination total={500} start={0} range={100} xs />
+<Pagination total={500} start={0} range={100} sm />
+<Pagination total={500} start={0} range={100} md />
+<Pagination total={500} start={0} range={100} lg />
+<Pagination total={500} start={0} range={100} xl />
+<Pagination total={500} start={0} range={100} xl2 />
+<Pagination total={500} start={0} range={100} xl3 />
+<Pagination total={500} start={0} range={100} xl4 />
+<Pagination total={500} start={0} range={100} xl5 />
+<Pagination total={500} start={0} range={100} size="custom-size" style={{ fontSize: '28px', minWidth: '48px', height: '48px' }} />
+`.trim();
+
+const codeCustomColors = `
+const [currentPage, setCurrentPage] = useState(1);
+<Pagination
+  total={600}
+  start={(currentPage - 1) * 120}
+  range={120}
+  radius={2}
+  prev
+  next
+  link
+  control
+  color="teal"
+  size="custom-teal"
+  style={{ fontSize: '17.6px', minWidth: '40px', height: '40px' }}
+  page={(p) => setCurrentPage(p)}
+/>
+`.trim();
+
+const codeCustom = `
+const [currentPage, setCurrentPage] = useState(1);
+<Pagination
+  total={1000}
+  start={(currentPage - 1) * 200}
+  range={200}
+  radius={3}
+  rewind
+  prev
+  next
+  forward
+  lg
+  success
+  square={40}
+  link
+  control
+  border={false}
+  background={false}
+  className="custom-pagination"
+  style={{ padding: '8px', backgroundColor: '#E6F5ED', fontFamily: 'Arial' }}
+  page={(p) => setCurrentPage(p)}
+/>
+
+// In your CSS file:
+.custom-pagination .frui-pagination-btn:hover:not(.control) {
+  background-color: #D0E8D9;
+  color: #00A352;
+}
+`.trim();
+
+//functions
+function PaginationExample({ total = 500, range = 100, ...props }: PaginationProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  return (
+    <Pagination
+      total={total}
+      range={range}
+      start={(currentPage - 1) * range}
+      page={(p) => setCurrentPage(p)}
+      {...props}
+    />
+  );
+}
+
+export default function PaginationPage() {
+  //hooks
+  const { _ } = useLanguage();
+
+  //variables
+  const crumbs: Crumb[] = [
+    { icon: 'icons', label: 'Components', href: '/component' },
+    { label: 'Pagination' },
+  ];
+
+  const props = [
+    [_('total'), 'number', 'No', 'Total items (default: 0)'],
+    [_('start'), 'number', 'No', 'Starting index (default: 0)'],
+    [_('range'), 'number', 'No', 'Items per page (default: 50)'],
+    [_('radius'), '0 | 1 | 2 | 3 | 4', 'No', 'Pages shown before/after current (default: 2)'],
+    [_('next'), 'boolean', 'No', 'Show next button (disabled on last page)'],
+    [_('prev'), 'boolean', 'No', 'Show previous button (disabled on first page)'],
+    [_('rewind'), 'boolean', 'No', 'Show first page button (disabled on first page)'],
+    [_('forward'), 'boolean', 'No', 'Show last page button (disabled on last page)'],
+    [_('link'), 'boolean', 'No', 'Render page numbers as links (default: false)'],
+    [_('control'), 'boolean', 'No', 'Style control buttons differently (default: false)'],
+    [_('border'), 'boolean', 'No', 'Show button borders (default: true)'],
+    [_('background'), 'boolean', 'No', 'Show button backgrounds (default: true)'],
+    [_('square'), 'number', 'No', 'Set square size in pixels (default: 0)'],
+    [_('size'), 'string', 'No', 'Custom size class (e.g., "custom-size")'],
+    [_('xs'), 'boolean', 'No', '12px button size'],
+    [_('sm'), 'boolean', 'No', '14px button size'],
+    [_('md'), 'boolean', 'No', '16px button size (default)'],
+    [_('lg'), 'boolean', 'No', '18px button size'],
+    [_('xl'), 'boolean', 'No', '20px button size'],
+    [_('xl2'), 'boolean', 'No', '24px button size'],
+    [_('xl3'), 'boolean', 'No', '30px button size'],
+    [_('xl4'), 'boolean', 'No', '36px button size'],
+    [_('xl5'), 'boolean', 'No', '48px button size'],
+    [_('color'), 'string', 'No', 'Custom color (e.g., "purple")'],
+    [_('white'), 'boolean', 'No', 'White active color'],
+    [_('black'), 'boolean', 'No', 'Black active color'],
+    [_('info'), 'boolean', 'No', 'Blue active color'],
+    [_('warning'), 'boolean', 'No', 'Orange active color'],
+    [_('success'), 'boolean', 'No', 'Green active color'],
+    [_('error'), 'boolean', 'No', 'Red active color'],
+    [_('muted'), 'boolean', 'No', 'Gray active color'],
+    [_('primary'), 'boolean', 'No', 'Primary blue active color'],
+    [_('secondary'), 'boolean', 'No', 'Secondary gray active color'],
+    [_('page'), '(page: number) => void', 'No', 'Callback for page selection'],
+    [_('className'), 'string', 'No', 'Additional CSS classes'],
+    [_('style'), 'CSSProperties', 'No', 'Inline CSS styles'],
+  ];
+
+  //render
+  return (
+    <LayoutPanel
+      uri="/component/pagination"
+      title="Pagination Component"
+      description="Pagination component in FRUI for navigating through pages with customizable controls."
+    >
+      <main className="flex flex-col h-full w-full">
+        <div className="p-3 bg-b2">
+          <Crumbs crumbs={crumbs} />
+        </div>
+        <section className="flex-grow relative h-full">
+          <aside className="hidden lg:block absolute top-0 bottom-0 right-0 z-1 w-56 border-l border-b1 text-sm">
+            <h4 className="p-3 border-b border-b1 bg-b1 text-sm uppercase font-semibold">
+              {_('Contents')}
+            </h4>
+            <div className="p-3">
+              <Link className="block pb-1" href="#top">Pagination</Link>
+              <ul className="list-disc pl-3">
+                <li className="pl-3 pb-1"><Link href="#props">{_('Props')}</Link></li>
+                <li className="pl-3 pb-1"><Link href="#basic">{_('Basic Usage')}</Link></li>
+                <li className="pl-3 pb-1"><Link href="#minimal">{_('Minimal Navigation')}</Link></li>
+                <li className="pl-3 pb-1"><Link href="#controls">{_('Full Controls')}</Link></li>
+                <li className="pl-3 pb-1"><Link href="#disabled">{_(' Yorum: Disabled Controls')}</Link></li>
+                <li className="pl-3 pb-1"><Link href="#square">{_('Square Layout')}</Link></li>
+                <li className="pl-3 pb-1"><Link href="#colors">{_('Colors')}</Link></li>
+                <li className="pl-3 pb-1"><Link href="#sizes">{_('Sizes')}</Link></li>
+                <li className="pl-3 pb-1"><Link href="#custom-colors">{_('Custom Colors and Sizes')}</Link></li>
+                <li className="pl-3 pb-1"><Link href="#custom">{_('Custom Styling')}</Link></li>
+              </ul>
+            </div>
+          </aside>
+          <div className="absolute top-0 bottom-0 left-0 right-0 lg:right-56 px-3 pt-3 pb-5 h-full overflow-auto">
+            <h1 id="top" className="flex items-center uppercase font-bold text-xl">
+              {_('Pagination')}
+            </h1>
+            <Code language="typescript" className="mt-2">
+              {`import Pagination from 'frui/Pagination';`}
+            </Code>
+
+            <h2 id="props" className="uppercase font-bold text-lg mt-8">
+              {_('Props')}
+            </h2>
+            <Props props={props} />
+
+            <h2 id="basic" className="uppercase font-bold text-lg mt-8">
+              {_('Basic Usage')}
+            </h2>
+            <p className="py-4">
+              <Translate>Simple pagination with page numbers only.</Translate>
+            </p>
+            <div className="curved overflow-hidden">
+              <div className="p-3 bg-b1">
+                <PaginationExample total={500} range={100} />
+              </div>
+              <Code language="typescript">
+                {codeBasic}
+              </Code>
+            </div>
+
+            <h2 id="minimal" className="uppercase font-bold text-lg mt-8">
+              {_('Minimal Navigation')}
+            </h2>
+            <p className="py-4">
+              <Translate>Pagination with just prev and next buttons.</Translate>
+            </p>
+            <div className="curved overflow-hidden">
+              <div className="p-3 bg-b1">
+                <PaginationExample total={300} range={50} prev next radius={1} />
+              </div>
+              <Code language="typescript">
+                {codeMinimal}
+              </Code>
+            </div>
+
+            <h2 id="controls" className="uppercase font-bold text-lg mt-8">
+              {_('Full Controls')}
+            </h2>
+            <p className="py-4">
+              <Translate>Pagination with rewind, prev, next, and forward controls.</Translate>
+            </p>
+            <div className="curved overflow-hidden">
+              <div className="p-3 bg-b1">
+                <PaginationExample total={500} range={100} rewind prev next forward />
+                  </div>
+              <Code language="typescript">
+                {codeControls}
+              </Code>
+            </div>
+
+            <h2 id="disabled" className="uppercase font-bold text-lg mt-8">
+              {_('Disabled Controls')}
+            </h2>
+            <p className="py-4">
+              <Translate>Pagination with controls disabled on first and last pages.</Translate>
+            </p>
+            <div className="curved overflow-hidden">
+              <div className="p-3 bg-b1">
+                <PaginationExample total={250} range={50} rewind prev next forward md />
+              </div>
+              <Code language="typescript">
+                {codeDisabled}
+              </Code>
+            </div>
+
+            <h2 id="square" className="uppercase font-bold text-lg mt-8">
+              {_('Square Layout')}
+            </h2>
+            <p className="py-4">
+              <Translate>Pagination with square buttons and no borders.</Translate>
+            </p>
+            <div className="curved overflow-hidden">
+              <div className="p-3 bg-b1">
+                <PaginationExample total={400} range={80} square={30} border={false} radius={3} prev next />
+              </div>
+              <Code language="typescript">
+                {codeSquare}
+              </Code>
+            </div>
+
+            <h2 id="colors" className="uppercase font-bold text-lg mt-8">
+              {_('Colors')}
+            </h2>
+            <p className="py-4">
+              <Translate>All color variants for active page.</Translate>
+            </p>
+            <div className="curved overflow-hidden">
+              <div className="p-3 bg-b1 flex flex-col gap-2">
+                <Pagination total={500} start={0} range={100} white />
+                <Pagination total={500} start={100} range={100} black />
+                <Pagination total={500} start={200} range={100} info />
+                <Pagination total={500} start={300} range={100} warning />
+                <Pagination total={500} start={400} range={100} success />
+                <Pagination total={500} start={0} range={100} error />
+                <Pagination total={500} start={100} range={100} muted />
+                <Pagination total={500} start={200} range={100} primary />
+                <Pagination total={500} start={300} range={100} secondary />
+                <Pagination total={500} start={400} range={100} color="purple" />
+              </div>
+              <Code language="typescript">
+                {codeColors}
+              </Code>
+            </div>
+
+            <h2 id="sizes" className="uppercase font-bold text-lg mt-8">
+              {_('Sizes')}
+            </h2>
+            <p className="py-4">
+              <Translate>All size variants from xs to xl5, plus custom size.</Translate>
+            </p>
+            <div className="curved overflow-hidden">
+              <div className="p-3 bg-b1 flex flex-col gap-2">
+                <Pagination total={500} start={0} range={100} xs />
+                <Pagination total={500} start={0} range={100} sm />
+                <Pagination total={500} start={0} range={100} md />
+                <Pagination total={500} start={0} range={100} lg />
+                <Pagination total={500} start={0} range={100} xl />
+                <Pagination total={500} start={0} range={100} xl2 />
+                <Pagination total={500} start={0} range={100} xl3 />
+                <Pagination total={500} start={0} range={100} xl4 />
+                <Pagination total={500} start={0} range={100} xl5 />
+                <Pagination total={500} start={0} range={100} size="custom-size" style={{ fontSize: '28px', minWidth: '48px', height: '48px' }} />
+              </div>
+              <Code language="typescript">
+                {codeSizes}
+              </Code>
+            </div>
+
+            <h2 id="custom-colors" className="uppercase font-bold text-lg mt-8">
+              {_('Custom Colors and Sizes')}
+            </h2>
+            <p className="py-4">
+              <Translate>Pagination with custom color and size, plus link and control styling.</Translate>
+            </p>
+            <div className="curved overflow-hidden">
+              <div className="p-3 bg-b1">
+                <PaginationExample
+                  total={600}
+                  range={120}
+                  radius={2}
+                  prev
+                  next
+                  link
+                  control
+                  color="teal"
+                  size="custom-teal"
+                  style={{ fontSize: '17.6px', minWidth: '40px', height: '40px' }}
+                />
+              </div>
+              <Code language="typescript">
+                {codeCustomColors}
+              </Code>
+            </div>
+
+            <h2 id="custom" className="uppercase font-bold text-lg mt-8">
+              {_('Custom Styling')}
+            </h2>
+            <p className="py-4">
+              <Translate>
+                You can add your own custom class to the pagination component or use any combination of the following CSS classes: <C value="frui-pagination" />, <C value="frui-pagination-btn" />, <C value="frui-pagination-span" /> to fully customize the appearance.
+              </Translate>
+            </p>
+            <div className="curved overflow-hidden">
+              <div className="p-3 bg-b1">
+                <PaginationExample
+                  total={1000}
+                  range={200}
+                  radius={3}
+                  rewind
+                  prev
+                  next
+                  forward
+                  lg
+                  success
+                  square={40}
+                  link
+                  control
+                  border={false}
+                  background={false}
+                  className="custom-pagination"
+                  style={{ padding: '8px', backgroundColor: '#E6F5ED', fontFamily: 'Arial' }}
+                />
+              </div>
+              <Code language="typescript">
+                {codeCustom}
+              </Code>
+            </div>
+
+            <div className="flex items-center border-t border-b2 mt-8 pt-4">
+              <Link className="text-t2" href="/component/breadcrumb">
+                <i className="fas fa-arrow-left mr-2"></i>
+                {_('Breadcrumb')}
+              </Link>
+              <div className="flex-grow"></div>
+              <Link className="text-t2" href="/component/table">
+                {_('Table')}
+                <i className="fas fa-arrow-right ml-2"></i>
+              </Link>
+            </div>
+          </div>
+        </section>
+      </main>
+    </LayoutPanel>
+  );
+}
\ No newline at end of file