Chakra UI Tabs Example - Chakra-ui Typing CST Test
Loading…
Chakra UI Tabs Example — Chakra-ui Code
Shows tab navigation using Chakra UI Tabs component.
import React from 'react';
import { ChakraProvider, Tabs, TabList, TabPanels, Tab, TabPanel, extendTheme } from '@chakra-ui/react';
const theme = extendTheme({});
const TabsExample = () => (
<ChakraProvider theme={theme}>
<Tabs variant='enclosed' mt={10} mx='auto' maxW='md'>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel><p>Content of Tab 1</p></TabPanel>
<TabPanel><p>Content of Tab 2</p></TabPanel>
<TabPanel><p>Content of Tab 3</p></TabPanel>
</TabPanels>
</Tabs>
</ChakraProvider>
);
export default TabsExample;Chakra-ui Language Guide
Chakra UI is a modular and accessible React component library that provides a set of composable, themeable, and responsive UI components.
Primary Use Cases
- ▸React-based web applications
- ▸Dashboards and admin panels
- ▸Rapid prototyping with composable components
- ▸Responsive and accessible UI projects
- ▸Customizable component libraries with theming
Notable Features
- ▸Accessible components with built-in ARIA support
- ▸Style props for inline styling
- ▸Themeable design system with global overrides
- ▸Composable components (Box, Stack, Flex)
- ▸Responsive props and utility-first styling
Origin & Creator
Created by Segun Adebayo in 2019 as a modern, developer-friendly React UI library.
Industrial Note
Chakra UI is popular for React projects that need quick prototyping, accessible components, and highly customizable UI without enforcing a specific design system.