Foundations
Components
- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
Accordion
Tidy up your content with our Accordion - a neat stack of titles ready to reveal their secrets on a single tap
Example
1import { Accordion } from '@haktos/sugarcoat-ui';23<Accordion variant='stacked'>4 <Accordion.Item value='firstItem'>5 <Accordion.Header>First item</Accordion.Header>6 <Accordion.Content>7 <Typography.Paragraph>Section Content One</Typography.Paragraph>8 </Accordion.Content>9 </Accordion.Item>10 <Accordion.Item value='secondItem'>11 <Accordion.Header>Second Item</Accordion.Header>12 <Accordion.Content>13 <Typography.Paragraph>Section Content Two</Typography.Paragraph>14 </Accordion.Content>15 </Accordion.Item>16</Accordion>;17
API Reference
It builds on top of Radix-UI Accordion
Component Properties
Accordion
Acts as RadixUI's Accordion.Root. Most of the props available here can be used on the Accordion component
Prop | Type | Default | Explanation |
---|---|---|---|
variant | enum | stacked | The variant style of the accordion list. |
type | enum | single | Determines whether one or multiple items can be opened at the same time. |
Accordion.Item
A styled wrapper around RadixUI's Accordion.Item. Check here for the original props available
Accordion.Header
Prop | Type | Default | Explanation |
---|---|---|---|
arrow | boolean | true | (Optional) Show animated arrow on the right of the heading |