@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
117 lines • 4.21 kB
TypeScript
import { Tabs as BaseTabs } from "@base-ui/react/tabs";
import * as React from "react";
interface TabsProps extends Omit<React.ComponentPropsWithRef<typeof BaseTabs.Root>, "className"> {
/** Additional CSS classes merged with the tabs root styles. @default undefined */
className?: string;
}
interface TabsListProps extends Omit<React.ComponentPropsWithRef<typeof BaseTabs.List>, "className"> {
/** Additional CSS classes merged with the tabs list styles. @default undefined */
className?: string;
}
interface TabsTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseTabs.Tab>, "className"> {
/** Additional CSS classes merged with the individual tab trigger styles. @default undefined */
className?: string;
}
interface TabsContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseTabs.Panel>, "className"> {
/** Additional CSS classes merged with the tab panel styles. @default undefined */
className?: string;
}
/**
* Coordinates a tabbed interface for switching between related panels.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <Tabs defaultValue="overview">
* <TabsList>
* <TabsTrigger value="overview">Overview</TabsTrigger>
* </TabsList>
* <TabsContent value="overview">Content</TabsContent>
* </Tabs>
* ```
*
* @see {@link https://base-ui.com/react/components/tabs | Base UI Documentation}
*/
declare function Tabs(props: Readonly<Tabs.Props>): React.ReactElement;
declare namespace Tabs {
var displayName: string;
}
/**
* Renders the tab list along with the shared active indicator.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <TabsList>
* <TabsTrigger value="overview">Overview</TabsTrigger>
* </TabsList>
* ```
*
* @see {@link https://base-ui.com/react/components/tabs | Base UI Documentation}
*/
declare function TabsList(props: Readonly<TabsList.Props>): React.ReactElement;
declare namespace TabsList {
var displayName: string;
}
/**
* Activates a specific tab panel within the surrounding tabs root.
*
* @remarks
* - Renders a `<button>` element by default
* - Built on {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <TabsTrigger value="overview">Overview</TabsTrigger>
* ```
*
* @see {@link https://base-ui.com/react/components/tabs | Base UI Documentation}
*/
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
/**
* Renders the content panel associated with the active tab.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <TabsContent value="overview">Content</TabsContent>
* ```
*
* @see {@link https://base-ui.com/react/components/tabs | Base UI Documentation}
*/
declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare namespace Tabs {
type Props = TabsProps;
type State = BaseTabs.Root.State;
}
declare namespace TabsList {
type Props = TabsListProps;
type State = BaseTabs.List.State;
}
declare namespace TabsTrigger {
type Props = TabsTriggerProps;
type State = BaseTabs.Tab.State;
}
declare namespace TabsContent {
type Props = TabsContentProps;
type State = BaseTabs.Panel.State;
}
export { Tabs, TabsContent, TabsList, TabsTrigger };
//# sourceMappingURL=tabs.d.ts.map