diff --git a/.gitignore b/.gitignore
index d048bce..162f4c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,4 +40,6 @@ bun.lockb
 
 # dumi
 .dumi/tmp
-.dumi/tmp-production
\ No newline at end of file
+.dumi/tmp-production
+
+.claude
\ No newline at end of file
diff --git a/docs/demos/semantic.md b/docs/demos/semantic.md
new file mode 100644
index 0000000..abf1dfd
--- /dev/null
+++ b/docs/demos/semantic.md
@@ -0,0 +1,8 @@
+---
+title: Semantic DOM
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/semantic.tsx"></code>
diff --git a/docs/examples/semantic.tsx b/docs/examples/semantic.tsx
new file mode 100644
index 0000000..50d7e38
--- /dev/null
+++ b/docs/examples/semantic.tsx
@@ -0,0 +1,105 @@
+import React, { useRef, useState } from 'react';
+import Listy, {
+  type ListyRef,
+  type ListyClassNames,
+  type ListyStyles,
+} from '@rc-component/listy';
+import '../../assets/index.less';
+
+const GROUPS = [
+  { id: 'frontend', label: 'Frontend' },
+  { id: 'backend', label: 'Backend' },
+  { id: 'infra', label: 'Infrastructure' },
+  { id: 'mobile', label: 'Mobile' },
+];
+
+interface Task {
+  id: string;
+  name: string;
+  groupId: string;
+}
+
+const items: Task[] = GROUPS.flatMap((group) =>
+  Array.from({ length: 8 }, (_, index) => ({
+    id: `${group.id}-${index}`,
+    name: `${group.label} task #${index + 1}`,
+    groupId: group.id,
+  })),
+);
+
+// The `classNames` and `styles` props share the same semantic slots:
+// `root`, `item`, and `groupHeader` (including the sticky clone).
+const classNames: ListyClassNames = {
+  root: 'listy-semantic-root',
+  groupHeader: 'listy-semantic-header',
+  item: 'listy-semantic-item',
+};
+
+// Inline `styles` stack on top of the classNames above.
+const styles: ListyStyles = {
+  root: { borderRadius: 10 },
+  groupHeader: { letterSpacing: 0.5 },
+  item: { transition: 'background 0.15s ease' },
+};
+
+const CSS = `
+.listy-semantic-root {
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+  background: #fff;
+  font-family: system-ui, sans-serif;
+}
+.listy-semantic-header {
+  padding: 10px 16px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(90deg, #6366f1, #8b5cf6);
+}
+.listy-semantic-item {
+  padding: 0 16px;
+  line-height: 40px;
+  border-bottom: 1px solid #f3f4f6;
+}
+.listy-semantic-item:hover {
+  /* hover state — only a className slot can express this, not inline styles */
+  background: #f5f3ff;
+}
+`;
+
+export default () => {
+  const listRef = useRef<ListyRef>(null);
+  const [virtual, setVirtual] = useState(true);
+
+  return (
+    <>
+      <style>{CSS}</style>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <input
+            type="checkbox"
+            checked={virtual}
+            onChange={(event) => setVirtual(event.target.checked)}
+          />
+          virtual — the same classNames / styles apply in both render modes
+        </label>
+        <Listy
+          ref={listRef}
+          height={360}
+          itemHeight={40}
+          items={items}
+          rowKey="id"
+          sticky
+          virtual={virtual}
+          classNames={classNames}
+          styles={styles}
+          itemRender={(item) => item.name}
+          group={{
+            key: (item) => item.groupId,
+            title: (groupKey) =>
+              GROUPS.find((group) => group.id === groupKey)?.label ?? groupKey,
+          }}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/src/GroupHeader.tsx b/src/GroupHeader.tsx
index 6e5f806..6806f54 100644
--- a/src/GroupHeader.tsx
+++ b/src/GroupHeader.tsx
@@ -10,6 +10,7 @@ export interface GroupHeaderProps<T, K extends React.Key = React.Key> {
   prefixCls: string;
   fixed?: boolean;
   sticky?: boolean;
+  className?: string;
   style?: React.CSSProperties;
 }
 
@@ -25,14 +26,19 @@ function GroupHeader<T, K extends React.Key = React.Key>(
     prefixCls,
     fixed,
     sticky,
+    className: customClassName,
     style,
   } = props;
 
   // ============================= Classes =============================
-  const className = clsx(`${prefixCls}-group-header`, {
-    [`${prefixCls}-group-header-sticky`]: sticky,
-    [`${prefixCls}-group-header-fixed`]: fixed,
-  });
+  const className = clsx(
+    `${prefixCls}-group-header`,
+    {
+      [`${prefixCls}-group-header-sticky`]: sticky,
+      [`${prefixCls}-group-header-fixed`]: fixed,
+    },
+    customClassName,
+  );
 
   // ============================== Render ==============================
   return (
diff --git a/src/List.tsx b/src/List.tsx
index c6393c9..deb25d2 100644
--- a/src/List.tsx
+++ b/src/List.tsx
@@ -9,6 +9,12 @@ export type RowKey<T> = keyof T | ((item: T) => React.Key);
 
 export type ScrollAlign = 'top' | 'bottom' | 'auto';
 
+export type ListySemanticName = 'root' | 'item' | 'groupHeader';
+
+export type ListyClassNames = Partial<Record<ListySemanticName, string>>;
+
+export type ListyStyles = Partial<Record<ListySemanticName, React.CSSProperties>>;
+
 export interface GroupScrollToConfig {
   groupKey: React.Key;
   align?: ScrollAlign;
@@ -46,6 +52,8 @@ export interface ListyProps<T, K extends React.Key = React.Key> {
   virtual?: boolean;
   prefixCls?: string;
   rowKey: RowKey<T>;
+  classNames?: ListyClassNames;
+  styles?: ListyStyles;
   onScroll?: React.UIEventHandler<HTMLElement>;
   itemRender: (item: T, index: number) => React.ReactNode;
 }
@@ -58,6 +66,8 @@ export interface ListComponentProps<T, K extends React.Key = React.Key> {
   group?: Group<T, K>;
   prefixCls: string;
   rowKey: RowKey<T>;
+  classNames?: ListyClassNames;
+  styles?: ListyStyles;
   onScroll?: React.UIEventHandler<HTMLElement>;
   itemRender: (item: T, index: number) => React.ReactNode;
 }
diff --git a/src/RawList/index.tsx b/src/RawList/index.tsx
index 7cb4670..e70b36d 100644
--- a/src/RawList/index.tsx
+++ b/src/RawList/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import { useEvent } from '@rc-component/util';
 import GroupHeader from '../GroupHeader';
 import useGroupSegments from '../hooks/useGroupSegments';
@@ -23,6 +24,8 @@ function RawList<T, K extends React.Key = React.Key>(
     prefixCls,
     rowKey,
     sticky,
+    classNames,
+    styles,
   } = props;
 
   // =============================== Refs ===============================
@@ -55,14 +58,15 @@ function RawList<T, K extends React.Key = React.Key>(
       return (
         <div
           key={key}
-          className={`${prefixCls}-item`}
-          style={
-            sticky && groupKey !== undefined
+          className={clsx(`${prefixCls}-item`, classNames?.item)}
+          style={{
+            ...styles?.item,
+            ...(sticky && groupKey !== undefined
               ? {
                   scrollMarginTop: `var(--${prefixCls}-item-scroll-margin-top, 0px)`,
                 }
-              : undefined
-          }
+              : undefined),
+          }}
           {...scrollTargetProps}
         >
           {itemRender(item, index)}
@@ -70,11 +74,13 @@ function RawList<T, K extends React.Key = React.Key>(
       );
     },
     [
+      classNames?.item,
       getItemKey,
       getScrollTargetProps,
       itemRender,
       prefixCls,
       sticky,
+      styles?.item,
     ],
   );
 
@@ -95,6 +101,8 @@ function RawList<T, K extends React.Key = React.Key>(
               groupItems={currentGroupItems}
               prefixCls={prefixCls}
               sticky={sticky}
+              className={classNames?.groupHeader}
+              style={styles?.groupHeader}
             />
             {groupItems.map(({ item, index }) => {
               return renderItem(item, index, groupKey);
@@ -110,11 +118,12 @@ function RawList<T, K extends React.Key = React.Key>(
   return (
     <div
       ref={holderRef}
-      className={prefixCls}
+      className={clsx(prefixCls, classNames?.root)}
       style={{
         maxHeight: height,
         overflowY: height === undefined ? undefined : 'auto',
         overflowAnchor: 'none',
+        ...styles?.root,
       }}
       onScroll={onScroll}
     >
diff --git a/src/VirtualList/index.tsx b/src/VirtualList/index.tsx
index a435e9d..dfa9eaa 100644
--- a/src/VirtualList/index.tsx
+++ b/src/VirtualList/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import RcVirtualList, {
   type ListRef as RcVirtualListRef,
   type ScrollConfig,
@@ -33,6 +34,8 @@ function VirtualList<T, K extends React.Key = React.Key>(
     prefixCls,
     rowKey,
     sticky,
+    classNames,
+    styles,
   } = props;
 
   // =============================== Refs ===============================
@@ -139,6 +142,8 @@ function VirtualList<T, K extends React.Key = React.Key>(
     groupKeyToItems,
     prefixCls,
     listRef,
+    headerClassName: classNames?.groupHeader,
+    headerStyle: styles?.groupHeader,
   });
 
   // ============================ Render Row ============================
@@ -152,10 +157,12 @@ function VirtualList<T, K extends React.Key = React.Key>(
           groupKey={groupKey}
           groupItems={groupItems}
           prefixCls={prefixCls}
+          className={classNames?.groupHeader}
+          style={styles?.groupHeader}
         />
       );
     },
-    [group, groupKeyToItems, prefixCls],
+    [classNames?.groupHeader, group, groupKeyToItems, prefixCls, styles?.groupHeader],
   );
 
   // ============================== Render ==============================
@@ -171,12 +178,17 @@ function VirtualList<T, K extends React.Key = React.Key>(
       prefixCls={prefixCls}
       virtual
       extraRender={extraRender}
+      className={classNames?.root}
+      style={styles?.root}
     >
       {(row: Row<T, K>) =>
         row.type === 'header'
           ? renderHeaderRow(row.groupKey)
           : (
-              <div className={`${prefixCls}-item`}>
+              <div
+                className={clsx(`${prefixCls}-item`, classNames?.item)}
+                style={styles?.item}
+              >
                 {itemRender(row.item, row.index)}
               </div>
             )
diff --git a/src/VirtualList/useStickyGroupHeader.tsx b/src/VirtualList/useStickyGroupHeader.tsx
index 2762277..cd94536 100644
--- a/src/VirtualList/useStickyGroupHeader.tsx
+++ b/src/VirtualList/useStickyGroupHeader.tsx
@@ -46,6 +46,8 @@ export interface StickyHeaderParams<T, K extends React.Key = React.Key> {
   groupKeyToItems: Map<K, T[]>;
   prefixCls: string;
   listRef: React.RefObject<RcVirtualListRef | null>;
+  headerClassName?: string;
+  headerStyle?: React.CSSProperties;
 }
 
 export default function useStickyGroupHeader<
@@ -60,6 +62,8 @@ export default function useStickyGroupHeader<
     groupKeyToItems,
     prefixCls,
     listRef,
+    headerClassName,
+    headerStyle,
   } = params;
 
   // ============================ Extra Render ==========================
@@ -103,13 +107,25 @@ export default function useStickyGroupHeader<
               groupKey={currGroupKey}
               groupItems={groupItems}
               prefixCls={prefixCls}
-              style={{ top }}
+              className={headerClassName}
+              // `top` is the computed sticky-push offset and must win over any
+              // user-supplied top in headerStyle, or the sticky behavior breaks.
+              style={{ ...headerStyle, top }}
             />
           </div>
         </Portal>
       );
     },
-    [enabled, group, groupKeys, groupKeyToItems, prefixCls, listRef],
+    [
+      enabled,
+      group,
+      groupKeys,
+      groupKeyToItems,
+      prefixCls,
+      listRef,
+      headerClassName,
+      headerStyle,
+    ],
   );
 
   // ============================== Return ==============================
diff --git a/src/index.ts b/src/index.ts
index 69fef22..5ae2135 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,11 @@
 import Listy from './List';
 
-export type { ListyRef, ListyProps } from './List';
+export type {
+  ListyRef,
+  ListyProps,
+  ListySemanticName,
+  ListyClassNames,
+  ListyStyles,
+} from './List';
 
 export default Listy;
diff --git a/tests/semantic.test.tsx b/tests/semantic.test.tsx
new file mode 100644
index 0000000..7351302
--- /dev/null
+++ b/tests/semantic.test.tsx
@@ -0,0 +1,286 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Listy from '@rc-component/listy';
+import GroupHeader from '../src/GroupHeader';
+import useStickyGroupHeader from '../src/VirtualList/useStickyGroupHeader';
+
+jest.mock('@rc-component/virtual-list', () => {
+  const ReactMock = require('react');
+  const extraInfo = {
+    start: 0,
+    end: 0,
+    virtual: true,
+    offsetX: 0,
+    scrollTop: 0,
+    offsetY: 0,
+    rtl: false,
+    getSize: () => ({ top: 0, bottom: 0 }),
+  };
+
+  const MockVirtualList = ReactMock.forwardRef((props: any, ref: any) => {
+    ReactMock.useImperativeHandle(ref, () => ({ scrollTo: () => {} }));
+    return (
+      <div
+        data-testid="mock-virtual-list"
+        className={props.className}
+        style={props.style}
+      >
+        {props.extraRender ? props.extraRender(extraInfo) : null}
+        {props.data.map((row: any, index: number) => (
+          <div key={`${row.type}-${index}`}>{props.children(row, index)}</div>
+        ))}
+      </div>
+    );
+  });
+
+  return { __esModule: true, default: MockVirtualList };
+});
+
+const GROUPED_ITEMS = [
+  { id: 1, group: 'A' },
+  { id: 2, group: 'A' },
+  { id: 3, group: 'B' },
+];
+
+const group = {
+  key: (item: { group: string }) => item.group,
+  title: (key: React.Key) => <span>Group {String(key)}</span>,
+};
+
+const CLASSNAMES = { root: 'my-root', item: 'my-item', groupHeader: 'my-header' };
+const STYLES = {
+  root: { background: 'rgb(1, 2, 3)' },
+  item: { color: 'rgb(4, 5, 6)' },
+  groupHeader: { color: 'rgb(7, 8, 9)' },
+};
+
+describe('semantic DOM (classNames / styles)', () => {
+  // ============================ Shared part ===========================
+  describe('GroupHeader merges custom class with modifiers', () => {
+    it('keeps base + modifier classes and appends custom className/style', () => {
+      const { container } = render(
+        <GroupHeader
+          fixed
+          group={group as any}
+          groupKey="A"
+          groupItems={[]}
+          prefixCls="rc-listy"
+          className="my-header"
+          style={{ color: 'rgb(7, 8, 9)' }}
+        />,
+      );
+
+      const node = container.querySelector('.rc-listy-group-header') as HTMLElement;
+      expect(node).toHaveClass('rc-listy-group-header-fixed');
+      expect(node).toHaveClass('my-header');
+      expect(node).toHaveStyle({ color: 'rgb(7, 8, 9)' });
+    });
+  });
+
+  // ============================ Native mode ===========================
+  describe('native scroll (virtual=false)', () => {
+    const renderRaw = (extra?: object) =>
+      render(
+        <Listy
+          virtual={false}
+          items={GROUPED_ITEMS}
+          rowKey="id"
+          height={200}
+          group={group}
+          classNames={CLASSNAMES}
+          styles={STYLES}
+          itemRender={(item) => <span>{item.id}</span>}
+          {...extra}
+        />,
+      );
+
+    it('applies root class/style to the scroll container', () => {
+      const { container } = renderRaw();
+      const root = container.querySelector('.rc-listy') as HTMLElement;
+      expect(root).toHaveClass('my-root');
+      expect(root).toHaveStyle({ background: 'rgb(1, 2, 3)' });
+    });
+
+    it('applies item class/style to every item', () => {
+      const { container } = renderRaw();
+      const items = container.querySelectorAll('.rc-listy-item');
+      expect(items).toHaveLength(3);
+      items.forEach((item) => {
+        expect(item).toHaveClass('my-item');
+        expect(item).toHaveStyle({ color: 'rgb(4, 5, 6)' });
+      });
+    });
+
+    it('applies groupHeader class/style to headers', () => {
+      const { container } = renderRaw();
+      const headers = container.querySelectorAll('.rc-listy-group-header');
+      expect(headers).toHaveLength(2);
+      headers.forEach((header) => {
+        expect(header).toHaveClass('my-header');
+        expect(header).toHaveStyle({ color: 'rgb(7, 8, 9)' });
+      });
+    });
+
+    it('merges item style with the sticky scroll-margin (no overwrite)', () => {
+      const { container } = renderRaw({ sticky: true });
+      const item = container.querySelector('.rc-listy-item') as HTMLElement;
+      // custom style survives...
+      expect(item).toHaveStyle({ color: 'rgb(4, 5, 6)' });
+      // ...alongside the internal sticky scroll margin.
+      expect(item.style.scrollMarginTop).toBe(
+        'var(--rc-listy-item-scroll-margin-top, 0px)',
+      );
+    });
+
+    it('does not let styles.item.scrollMarginTop override the internal offset', () => {
+      const { container } = renderRaw({
+        sticky: true,
+        styles: { item: { color: 'rgb(4, 5, 6)', scrollMarginTop: 999 } },
+      });
+      const item = container.querySelector('.rc-listy-item') as HTMLElement;
+      // the internal scrollTo offset must win, not the user's 999px...
+      expect(item.style.scrollMarginTop).toBe(
+        'var(--rc-listy-item-scroll-margin-top, 0px)',
+      );
+      // ...while the user's other item styles still apply.
+      expect(item).toHaveStyle({ color: 'rgb(4, 5, 6)' });
+    });
+  });
+
+  // =========================== Virtual mode ===========================
+  describe('virtual scroll', () => {
+    const renderVirtual = () =>
+      render(
+        <Listy
+          items={GROUPED_ITEMS}
+          rowKey="id"
+          height={100}
+          itemHeight={20}
+          group={group}
+          classNames={CLASSNAMES}
+          styles={STYLES}
+          itemRender={(item) => <span>{item.id}</span>}
+        />,
+      );
+
+    it('passes root class/style down to the virtual list', () => {
+      const { container } = renderVirtual();
+      const root = container.querySelector(
+        '[data-testid="mock-virtual-list"]',
+      ) as HTMLElement;
+      expect(root).toHaveClass('my-root');
+      expect(root).toHaveStyle({ background: 'rgb(1, 2, 3)' });
+    });
+
+    it('applies item class/style to the item wrapper', () => {
+      const { container } = renderVirtual();
+      const items = container.querySelectorAll('.rc-listy-item');
+      expect(items).toHaveLength(3);
+      items.forEach((item) => {
+        expect(item).toHaveClass('my-item');
+        expect(item).toHaveStyle({ color: 'rgb(4, 5, 6)' });
+      });
+    });
+
+    it('applies groupHeader class/style to in-flow header rows', () => {
+      const { container } = renderVirtual();
+      const headers = container.querySelectorAll('.rc-listy-group-header');
+      expect(headers).toHaveLength(2);
+      headers.forEach((header) => {
+        expect(header).toHaveClass('my-header');
+        expect(header).toHaveStyle({ color: 'rgb(7, 8, 9)' });
+      });
+    });
+  });
+
+  // ===================== Virtual sticky clone =========================
+  // The pinned clone is a separate node from the in-flow header; the same
+  // groupHeader class/style must land on it too (parity with native's single
+  // sticky node). Driven via the extraRender directly to avoid mock timing.
+  describe('virtual sticky clone', () => {
+    it('applies groupHeader class/style to the pinned clone', () => {
+      const portalContainer = document.createElement('div');
+      document.body.appendChild(portalContainer);
+      const listRef = {
+        current: { nativeElement: portalContainer },
+      } as any;
+
+      let extraRender: any;
+      function Harness() {
+        extraRender = useStickyGroupHeader({
+          enabled: true,
+          group: group as any,
+          groupKeys: ['A'],
+          groupKeyToItems: new Map([['A', []]]),
+          prefixCls: 'rc-listy',
+          listRef,
+          headerClassName: 'my-header',
+          headerStyle: { color: 'rgb(7, 8, 9)' },
+        });
+        return null;
+      }
+      render(<Harness />);
+      render(
+        extraRender({
+          getSize: () => ({ top: 0, bottom: 24 }),
+          scrollTop: 0,
+          virtual: true,
+        }),
+      );
+
+      const clone = portalContainer.querySelector(
+        '.rc-listy-group-header-fixed',
+      ) as HTMLElement;
+      expect(clone).not.toBeNull();
+      expect(clone).toHaveClass('my-header');
+      expect(clone).toHaveStyle({ color: 'rgb(7, 8, 9)' });
+
+      portalContainer.remove();
+    });
+
+    it('does not let headerStyle.top override the computed sticky top', () => {
+      const portalContainer = document.createElement('div');
+      document.body.appendChild(portalContainer);
+      const listRef = {
+        current: { nativeElement: portalContainer },
+      } as any;
+
+      let extraRender: any;
+      function Harness() {
+        extraRender = useStickyGroupHeader({
+          enabled: true,
+          group: group as any,
+          groupKeys: ['A', 'B'],
+          groupKeyToItems: new Map([
+            ['A', []],
+            ['B', []],
+          ]),
+          prefixCls: 'rc-listy',
+          listRef,
+          headerClassName: 'my-header',
+          headerStyle: { top: 999 },
+        });
+        return null;
+      }
+      render(<Harness />);
+      render(
+        extraRender({
+          // A is the active header; B is approaching, so the computed top is a
+          // negative push offset: min(0, 100 - 24 - 90) = -14.
+          getSize: (key: React.Key) =>
+            key === 'B' ? { top: 100, bottom: 124 } : { top: 0, bottom: 24 },
+          scrollTop: 90,
+          virtual: true,
+        }),
+      );
+
+      const clone = portalContainer.querySelector(
+        '.rc-listy-group-header-fixed',
+      ) as HTMLElement;
+      // the computed push offset wins; the user's top:999 must not leak through.
+      expect(clone.style.top).toBe('-14px');
+
+      portalContainer.remove();
+    });
+  });
+});