{"library":"rc-tabs","title":"React Tabs Component","description":"rc-tabs is a foundational React UI component designed to provide a highly flexible and accessible tab interface. It is part of the `react-component` ecosystem, focusing on delivering core functionality without imposing specific styling, allowing developers to integrate it seamlessly into various design systems. The current stable version is 15.7.0, with regular updates that typically occur weekly or bi-weekly, addressing bug fixes, accessibility enhancements, and minor feature additions. Its key differentiators include built-in keyboard navigation for improved accessibility, extensive customization options via `prefixCls`, `className`, `style`, and `renderTabBar` props, and a commitment to being a lightweight, unstyled component. This makes `rc-tabs` an ideal choice for projects requiring a robust tab solution that prioritizes control over visual presentation.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install rc-tabs"],"cli":null},"imports":["import Tabs from 'rc-tabs';","import type { TabItem } from 'rc-tabs';","import type { TabsProps } from 'rc-tabs';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import Tabs from 'rc-tabs';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst callback = (key: string) => {\n  console.log(`Active tab: ${key}`);\n};\n\nconst items = [\n  {\n    key: '1',\n    label: 'Google',\n    children: (\n      <div className=\"text-xl\">\n        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>\n      </div>\n    ),\n  },\n  {\n    key: '2',\n    label: <p>Amazon</p>,\n    children:\n      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...', \n    disabled: true,\n  },\n  {\n    key: '3',\n    label: <p>Twitter</p>,\n    children: (\n      <div>\n        \"There is no one who loves pain itself, who seeks after it and wants to have it, simply\n        because it is pain...\"\n      </div>\n    ),\n  },\n];\n\n// Ensure a root element with id=\"root\" exists in your public/index.html\nconst rootElement = document.getElementById('root');\n\nif (rootElement) {\n  const root = ReactDOM.createRoot(rootElement);\n  root.render(\n    <React.StrictMode>\n      <Tabs\n        tabPosition=\"bottom\"\n        items={items}\n        defaultActiveKey=\"1\"\n        className=\"md:w-[70%] w-full mx-auto p-2 border-0\"\n        onChange={callback}\n        style={{ color: 'yellow', border: '1px solid #eee', padding: 10 }}\n      />\n    </React.StrictMode>\n  );\n} else {\n  console.error('Root element with id \"root\" not found in the document.');\n}","lang":"typescript","description":"Demonstrates a basic `rc-tabs` setup with static content, keyboard navigation, custom styling, and an `onChange` callback, rendered using React 18's createRoot.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}