Meta tags:
description=A high-quality, unstyled React tabs component for toggling between related panels on the same page.;
keywords=React Tabs,Tabbed Interface Component,Tab Panel,Tab Control,Tabbed Navigation,Tabbed UI,Page Switcher,Content Switcher,View Switcher,Tab List Indicator,Tablist,Tabpanel,Keyboard Navigation Tabs,Controlled Tabs,Accessible Tabs,Headless React Components,Base UI;

Headings (most frequently used words):

tabs, tab, root, propshide, statehide, panel, list, indicator, metadatahide, anatomy, examples, api, reference, links, changeeventreasonhide, changeeventdetailshide, orientationhide, valuehide, activationdirectionhide, positionhide, sizehide,

Text of the page (most frequently used words):
the (205), tabs (120), tab (111), active (49), type (46), state (45), value (41), #orientation (41), component (40), undefined (39), indicates (36), description (33), data (32), function (32), panel (30), element (30), direction (27), root (27), name (27), activation (25), when (25), style (24), classname (23), props (20), based (20), reactelement (20), that (20), render (20), hide (19), react (19), boolean (18), string (17), disabled (17), list (17), returns (15), cssproperties (15), default (14), from (14), styles (14), for (13), indicator (13), with (12), whether (11), css (11), present (10), previous (10), attribute (10), applied (10), class (10), side (10), event (10), false (9), overview (9), activationdirection (8), distance (8), parent (8), container (8), hidden (7), index (7), prop (7), number (7), and (7), export (6), allows (6), html (6), will (6), renders (6), div (6), top (6), right (6), left (6), defaultvalue (6), base (6), import (6), tabactivationdirection (5), used (5), htmlprops (5), accepts (5), you (5), replace (5), different (5), tag (5), compose (5), another (5), object (5), table (5), null (5), width (5), height (5), bottom (5), selected (5), button (5), reason (5), missing (5), initial (5), automatic (5), animating (4), corresponding (4), position (4), none (4), not (4), set (4), true (4), nativebutton (4), fallback (4), projects (4), account (4), size (3), rendering (3), first (3), enabled (3), horizontal (3), void (3), changes (3), navigation (3), uncontrolled (3), roots (3), use (3), link (3), links (3), anatomy (3), paragraph (3), field (3), menu (3), metadata (2), transitionstatus (2), out (2), ending (2), starting (2), while (2), keepmounted (2), variable (2), this (2), server (2), renderbeforehydration (2), can (2), currently (2), user (2), next (2), work (2), during (2), native (2), individual (2), keyboard (2), focus (2), using (2), arrow (2), loopfocus (2), key (2), activateonfocus (2), groups (2), propagate (2), has (2), canceled (2), cancel (2), changeeventdetails (2), eventdetails (2), new (2), onvaluechange (2), controlled (2), panels (2), api (2), reference (2), examples (2), workspace (2), stats (2), activity (2), module (2), stackblitz (2), modules (2), view (2), provider (2), toggle (2), group (2), dialog (2), checkbox (2), tabspanelmetadata, transition, status, tabspanelstate, tabspanelprops, keep, dom, tabpanel, shown, displayed, activetabsize, activetabposition, tabsindicatorstate, tabsindicatorprops, itself, before, hydrates, minimizes, time, isn, visible, after, visual, styled, match, span, tabstabsize, tabstabposition, tabstabmetadata, down, tabstabactivationdirection, tabstabvalue, should, ignore, interaction, tabstabstate, tabstabprops, won, initially, instead, however, does, like, known, pre, which, are, around, ensure, replacing, via, rendered, example, interactive, toggles, tabsliststate, tabslistprops, loop, back, item, end, reached, keys, automatically, change, otherwise, activated, enter, space, press, buttons, vertical, tabsrootorientation, trigger, triggered, applicable, ispropagationallowed, allowed, iscanceled, been, allowpropagation, cases, where, stop, propagation, cancels, handling, associated, custom, tabsrootchangeeventdetails, tabsrootchangeeventreason, changeeventreason, tabsrootstate, tabsrootprops, layout, flow, cannot, calling, effect, available, initiated, such, click, selection, omitted, including, implicit, becomes, removed, explicit, never, matches, mounted, callback, invoked, being, href, anchor, elements, assemble, its, parts, show, code, panelviewport, milestones, deadlines, profile, preferences, return, exampletabs, tsx, source, markdown, toggling, between, related, same, page, npm, github, userender, mergeprops, csp, utils, tooltip, toolbar, toast, switch, slider, separator, select, scroll, area, radio, progress, preview, card, popover, otp, meter, menubar, input, form, fieldset, drawer, context, combobox, collapsible, avatar, autocomplete, alert, accordion, components, llms, txt, typescript, forms, customization, composition, animation, styling, handbook, about, community, releases, accessibility, quick, start, search, skip, contents,

Text of the page (random words):
ation overview quick start accessibility releases community about handbook styling animation composition customization forms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 tabs top anatomy examples links api reference root list tab indicator panel tabs a component for toggling between related panels on the same page view as markdown view source overview projects account workspace stats and activity index tsx index module css css modules stackblitz css modules stackblitz import tabs from base ui react tabs import styles from index module css export default function exampletabs return tabs root classname styles root defaultvalue overview tabs list classname styles list tabs tab classname styles tab value overview overview tabs tab tabs tab classname styles tab value projects projects tabs tab tabs tab classname styles tab value account account tabs tab tabs indicator classname styles indicator tabs list div classname styles panelviewport tabs panel classname styles panel value overview p classname styles paragraph workspace stats and activity p tabs panel tabs panel classname styles panel value projects p classname styles paragraph milestones and deadlines p tabs panel tabs panel classname styles panel value account p classname styles paragraph profile and preferences p tabs panel div tabs root show code anatomy import the component and assemble its parts anatomy import tabs from base ui react tabs tabs root tabs list tabs tab tabs indicator tabs list tabs panel tabs root examples links use the render prop and set nativebutton false on tabs tab to render tabs as anchor elements tabs as links import tabs from base ui react tabs import link from next link tabs root tabs list tabs tab nativebutton false render link href overview value overview overview tabs tab tabs list tabs root api reference root groups the tabs and the corresponding panels renders a div element component props table prop type default defaultvalue tabs tab value 0 name defaultvalue description the default value use when the component is not controlled when the value is null no tab will be active type tabs tab value undefined default 0 value tabs tab value name value description the value of the currently active tab use when the component is controlled when the value is null no tab will be active type tabs tab value undefined onvaluechange function name onvaluechange description callback invoked when new value is being set the event reason is none for user initiated changes such as a click or keyboard navigation initial for the first automatic selection or fallback in uncontrolled roots when defaultvalue is omitted or undefined including when the implicit initial value is disabled or missing disabled for automatic fallback when the selected tab becomes disabled in uncontrolled roots or missing for automatic fallback when the selected tab is removed or when an explicit defaultvalue never matches a mounted tab in uncontrolled roots for automatic changes the selected value can be null when no enabled tab is available as a fallback automatic changes cannot be canceled calling eventdetails cancel for initial disabled or missing has no effect type value tabs tab value eventdetails tabs root changeeventdetails void undefined orientation tabs root orientation horizontal name orientation description the component orientation layout flow direction type tabs root orientation undefined default horizontal classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state tabs root state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state tabs root state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state tabs root state reactelement undefined attribute data orientation indicates the orientation of the tabs data activation direction indicates the direction of the activation based on the previous active tab attribute description data orientation indicates the orientation of the tabs data activation direction indicates the direction of the activation based on the previous active tab tabs root props hide re export of root props as tabsrootprops tabs root state hide type tabsrootstate the component orientation orientation tabs root orientation the direction used for tab activation tabactivationdirection tabs tab activationdirection tabs root changeeventreason hide type tabsrootchangeeventreason none disabled missing initial tabs root changeeventdetails hide type tabsrootchangeeventdetails reason none reason disabled reason missing reason initial the native event associated with the custom event event event cancels base ui from handling the event cancel void allows the event to propagate in cases where base ui will stop the propagation allowpropagation void indicates whether the event has been canceled iscanceled boolean indicates whether the event is allowed to propagate ispropagationallowed boolean the element that triggered the event if applicable trigger element undefined activationdirection tabs tab activationdirection tabs root orientation hide type tabsrootorientation horizontal vertical list groups the individual tab buttons renders a div element component props table prop type default activateonfocus boolean false name activateonfocus description whether to automatically change the active tab on arrow key focus otherwise tabs will be activated using enter or space key press type boolean undefined default false loopfocus boolean true name loopfocus description whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys type boolean undefined default true classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state tabs list state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state tabs list state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state tabs list state reactelement undefined attribute data orientation indicates the orientation of the tabs data activation direction indicates the direction of the activation based on the previous active tab attribute description data orientation indicates the orientation of the tabs data activation direction indicates the direction of the activation based on the previous active tab tabs list props hide re export of list props as tabslistprops tabs list state hide type tabsliststate the component orientation orientation tabs root orientation the direction used for tab activation tabactivationdirection tabs tab activationdirection tab an individual interactive tab button that toggles the corresponding panel renders a button element component props table prop type default value tabs tab value name value description the value of the tab type tabs tab value nativebutton boolean true name nativebutton description whether the component renders a native button element when replacing it via the render prop set to false if the rendered element is not a button for example div type boolean undefined default true disabled boolean name disabled description whether the tab is disabled if a first tab on a tabs list is disabled it won t initially be selected instead the next enabled tab will be selected however it does not work like this during server side rendering as it is not known during pre rendering which tabs are disabled to work around it ensure that defaultvalue or value on tabs root is set to an enabled tab s value type boolean undefined classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state tabs tab state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state tabs tab state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state tabs tab state reactelement undefined attribute data orientation indicates the orientation of the tabs data disabled present when the tab is disabled data activation direction indicates the direction of the activation based on the previous active tab data active present when the tab is active attribute description data orientation indicates the orientation of the tabs data disabled present when the tab is disabled data activation direction indicates the direction of the activation based on the previous active tab data active present when the tab is active tabs tab props hide re export of tab props as tabstabprops tabs tab state hide type tabstabstate whether the component should ignore user interaction disabled boolean whether the component is active active boolean the component orientation orientation tabs root orientation the direction used for tab activation tabactivationdirection tabs tab activationdirection tabs tab value hide type tabstabvalue tabs tab value tabs tab activationdirection hide type tabstabactivationdirection left right up down none tabs tab metadata hide type tabstabmetadata disabled boolean id string undefined value tabs tab value undefined tabs tab position hide type tabstabposition left number right number top number bottom number tabs tab size hide type tabstabsize width number height number indicator a visual indicator that can be styled to match the position of the currently active tab renders a span element component props table prop type default renderbeforehydration boolean false name renderbeforehydration description whether to render itself before react hydrates this minimizes the time that the indicator isn t visible after server side rendering type boolean undefined default false classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state tabs indicator state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state tabs indicator state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state tabs indicator state reactelement undefined attribute data orientation indicates the orientation of the tabs data activation direction indicates the direction of the activation based on the previous active tab attribute description data orientation indicates the orientation of the tabs data activation direction indicates the direction of the activation based on the previous active tab css variable active tab bottom indicates the distance on the bottom side from the parent s container if the tab is active active tab height indicates the height of the tab if it is active active tab left indicates the distance on the left side from the parent s container if the tab is active active tab right indicates the distance on the right side from the parent s container if the tab is active active tab top indicates the distance on the top side from the parent s container if the tab is active active tab width indicates the width of the tab if it is active css variable description active tab bottom indicates the distance on the bottom side from the parent s container if the tab is active active tab height indicates the height of the tab if it is active active tab left indicates the distance on the left side from the parent s container if the tab is active active tab right indicates the distance on the right side from the parent s container if the tab is active active tab top indicates the distance on the top side from the parent s container if the tab is active active tab width indicates the width of the tab if it is active tabs indicator props hide re export of indicator props as tabsindicatorprops tabs indicator state hide type tabsindicatorstate the active tab position activetabposition tabs tab position null the active tab size activetabsize tabs tab size null the component orientation orientation tabs root orientation the direction used for tab activation tabactivationdirection tabs tab activationdirection panel a panel displayed when the corresponding tab is active renders a div element component props table prop type default value tabs tab value name value description the value of the tabpanel it will be shown when the tab with the corresponding value is active type tabs tab value classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state tabs panel state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state tabs panel state react cssproperties undefined undefined keepmounted boolean false name keepmounted description whether to keep the html element in the dom while the panel is hidden type boolean undefined default false render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component ...