An interactive component which expands/collapses a panel.
import React from 'react';import * as Collapsible from '@radix-ui/react-collapsible';import { RowSpacingIcon, Cross2Icon } from '@radix-ui/react-icons';import './styles.css';const CollapsibleDemo = () => {const [open, setOpen] = React.useState(false);return (<Collapsible.Root className="CollapsibleRoot" open={open} onOpenChange={setOpen}><div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><span className="Text" style={{ color: 'white' }}>@peduarte starred 3 repositories</span><Collapsible.Trigger asChild><button className="IconButton">{open ? <Cross2Icon /> : <RowSpacingIcon />}</button></Collapsible.Trigger></div><div className="Repository"><span className="Text">@radix-ui/primitives</span></div><Collapsible.Content><div className="Repository"><span className="Text">@radix-ui/colors</span></div><div className="Repository"><span className="Text">@stitches/react</span></div></Collapsible.Content></Collapsible.Root>);};export default CollapsibleDemo;
Full keyboard navigation.
Can be controlled or uncontrolled.
Install the component from your command line.
Import the components and piece the parts together.
Contains all the parts of a collapsible.
The button that toggles the collapsible.
The component that contains the collapsible content.
Use the --radix-collapsible-content-width
and/or --radix-collapsible-content-height
CSS variables to animate the size of the content when it opens/closes. Here's a demo:
Adheres to the Disclosure WAI-ARIA design pattern.