Site settings
Change the appearance of the site to suit your preferences
CardSelect
A card select is a button that shows or hides a card on top of your UI
A basic card select
<CardSelect> <CardSelectTrigger>Ways to travel</Heading> <CardSelectContent> <Heading>Ways to travel</Heading> <Text> There are lots of ways to travel. Buses, trains and ferries are just three. </Text> </CardSelectContent> </CardSelect>
Different variants of card selects
<Stack flexDirection="row" gap={2}> <CardSelect> <CardSelectTrigger variant="core">Core</Heading> <CardSelectContent> Core </CardSelectContent> </CardSelect> <CardSelect> <CardSelectTrigger variant="ghost">Ghost</Heading> <CardSelectContent> Ghost </CardSelectContent> </CardSelect> <CardSelect> <CardSelectTrigger variant="floating">Floating</Heading> <CardSelectContent> Floating </CardSelectContent> </CardSelect> </Stack>
Different sizes of card selects
<Flex gap="2" flexWrap="wrap" alignItems="center"> <CardSelect> <CardSelectTrigger size="sm">Small</Heading> <CardSelectContent> Small </CardSelectContent> </CardSelect> <CardSelect> <CardSelectTrigger size="md">Medium</Heading> <CardSelectContent> Medium </CardSelectContent> </CardSelect> <CardSelect> <CardSelectTrigger size="lg">Large</Heading> <CardSelectContent> Large </CardSelectContent> </CardSelect> </Stack>
Card select with an icon
<CardSelect> <CardSelectTrigger icon={<TrainOutline24Icon />}>Here is some more info</Heading> <CardSelectContent> Here is some more info </CardSelectContent> </CardSelect>
Card selects without chevron:
<CardSelect> <CardSelectTrigger withChevron={false} icon={<TrainOutline24Icon />}>Here is some more info</Heading> <CardSelectContent> Here is some more info </CardSelectContent> </CardSelect>
Controllable card select
() => { const [isOpen, setIsOpen] = React.useState(false); return ( <CardSelect onOpenChange={(details) => setIsOpen(details.open)} open={isOpen} > <CardSelectTrigger>Open me</CardSelectTrigger> <CardSelectContent> <Button variant="secondary" size="md" onClick={() => setIsOpen(false)}> Click to close </Button> </CardSelectContent> </CardSelect> ); };