Collapse

import { Collapse } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
children	React.ReactNode	—
className	string	—
in	boolean	—
duration	number	—

Example

This is the example the design-system sync renders and verifies for this component.

import { Collapse, Typography, Chip } from "@rebasepro/ui";

// Ported from FavouritesView: a row of pinned-collection chips that collapses
// away entirely when the list is empty.
export const Expanded = () => (
    <div className="p-4 w-72">
        <Typography variant="caption" color="secondary" className="block mb-1">Favourites</Typography>
        <Collapse in>
            <div className="flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]">
                <Chip size="small" colorScheme="blue">Posts</Chip>
                <Chip size="small" colorScheme="teal">Authors</Chip>
                <Chip size="small" colorScheme="purple">Products</Chip>
            </div>
        </Collapse>
    </div>
);