Chakra UI Accordion Example - Chakra-ui Typing CST Test

Chakra UI Accordion Example — Chakra-ui Code

Demonstrates collapsible sections using Chakra UI Accordion.

import React from 'react';
import { ChakraProvider, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

const AccordionExample = () => (
	<ChakraProvider theme={theme}>
		<Accordion mt={10} mx='auto' maxW='md'>
		<AccordionItem>
		<AccordionButton>Section 1<AccordionIcon /></AccordionButton>
		<AccordionPanel pb={4}>Content of Section 1</AccordionPanel>
		</AccordionItem>
		<AccordionItem>
		<AccordionButton>Section 2<AccordionIcon /></AccordionButton>
		<AccordionPanel pb={4}>Content of Section 2</AccordionPanel>
		</AccordionItem>
		</Accordion>
	</ChakraProvider>
);

export default AccordionExample;

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.

More Chakra-ui Typing Exercises

Practice Other Languages