pnpm dlx dreamy add transitionsBase usage of the Collapse component.
Hello
export function Collapsed() {
const { isOpen, onToggle } = useControllable();
return (
<>
<Button
w={"min-content"}
onClick={onToggle}
>
Toggle
</Button>
<Collapse
w={"full"}
isOpen={isOpen}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}Base usage of the Scale component.
Hello
export function Scaled() {
const { isOpen, onToggle } = useControllable();
return (
<>
<Button
w={"min-content"}
onClick={onToggle}
>
Toggle
</Button>
<Scale
w={"full"}
isOpen={isOpen}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Scale>
</>
);
}Use Collapse with a fixed startingHeight to truncate long text and reveal it with a show more / show less control.
export function TextCollapsed() {
const { isOpen, onToggle } = useControllable();
return (
<VStack alignItems="flex-start" gap={2} w="full">
<Collapse
animateOpacity={false}
endingHeight="auto"
isOpen={isOpen}
startingHeight="4.5em"
w="full"
>
<Text>
Dreamy UI is a modern React component library built for accessible,
themeable interfaces. It pairs headless hooks with Panda CSS recipes
so you can compose buttons, overlays, forms, and layout primitives
without fighting your design system. Transitions like Collapse make
it easy to reveal long copy, FAQ answers, or descriptions without a
jarring layout shift. Each component is designed to be copied into
your project, customized with tokens, and extended with the same
patterns you see in the docs. Whether you are building a marketing
page, a dashboard, or a complex form flow, Dreamy UI gives you
polished defaults with room to adapt every detail.
</Text>
</Collapse>
<Button
alignSelf="flex-start"
color="primary"
onClick={onToggle}
variant="link"
whiteSpace="nowrap"
>
{isOpen ? "Show less" : "Show more"}
</Button>
</VStack>
);
}You can set the starting and ending height of the content by setting the startingHeight and endingHeight props.
Hello
export function Collapsed() {
const { isOpen, onToggle } = useControllable();
return (
<>
<Button
w={"min-content"}
onClick={onToggle}
>
Toggle
</Button>
<Collapse
w={"full"}
isOpen={isOpen}
startingHeight={10}
endingHeight={80}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}You can disable the opacity animation by setting the animateOpacity prop to false. This option works for both the Collapse and Scale components.
Hello
export function Collapsed() {
const { isOpen, onToggle } = useControllable();
return (
<>
<Button
w={"min-content"}
onClick={onToggle}
>
Toggle
</Button>
<Collapse
w={"full"}
isOpen={isOpen}
animateOpacity={false}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}You can unmount component on exit animation by setting the unmountOnExit prop to true. This option works for both the Collapse and Scale components.
export function Collapsed() {
const { isOpen, onToggle } = useControllable();
return (
<>
<Button
w={"min-content"}
onClick={onToggle}
>
Toggle
</Button>
<Collapse
w={"full"}
isOpen={isOpen}
unmountOnExit
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}You can set the initial scale of the content by setting the initialScale prop. This option works for only for Scale component.
Hello
export function Scaled() {
const { isOpen, onToggle } = useControllable();
return (
<>
<Button
w={"min-content"}
onClick={onToggle}
>
Toggle
</Button>
<Scale
w={"full"}
isOpen={isOpen}
initialScale={0}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Scale>
</>
);
}