diff --git a/components/accordions.mdx b/components/accordions.mdx index 7aa0c4c8d..dc927af59 100644 --- a/components/accordions.mdx +++ b/components/accordions.mdx @@ -87,16 +87,22 @@ Group related accordions together using ``. This creates a cohes ## Properties - - Title in the Accordion preview. - +### title - - Detail below the title in the Accordion preview. - +*Type:* `string` *Required:* Yes - - Whether the Accordion is open by default. - +Title in the Accordion preview. + +### description + +*Type:* `string` + +Detail below the title in the Accordion preview. + +### defaultOpen + +*Type:* `boolean` *Default:* `false` + +Whether the Accordion is open by default. diff --git a/components/banner.mdx b/components/banner.mdx index 951a63ace..5e7edfd35 100644 --- a/components/banner.mdx +++ b/components/banner.mdx @@ -33,10 +33,14 @@ To add a banner, use the `banner` property in your `docs.json`: ## Properties - - The banner message. Supports plain text and Markdown formatting. - +### content - - Whether users can dismiss the banner. When `true`, users can close the banner and it won't reappear for their session. Defaults to `false`. - \ No newline at end of file +*Type:* `string` *Required:* Yes + +The banner message. Supports plain text and Markdown formatting. + +### dismissible + +*Type:* `boolean` *Default:* `false` + +Whether users can dismiss the banner. When `true`, users can close the banner and it won't reappear for their session. \ No newline at end of file diff --git a/components/cards.mdx b/components/cards.mdx index db1151f79..69b2bfad0 100644 --- a/components/cards.mdx +++ b/components/cards.mdx @@ -100,32 +100,46 @@ Use the [Columns component](/components/columns) to organize multiple cards side ## Properties - - The title displayed on the card - +### title + +*Type:* `string` *Required:* Yes + +The title displayed on the card. - - Icon color as a hex code (for example, `#FF6B6B`). - +### color + +*Type:* `string` + +Icon color as a hex code (for example, `#FF6B6B`). + +### href + +*Type:* `string` + +URL to navigate to when the card is clicked. + +### horizontal + +*Type:* `boolean` + +Display the card in a compact horizontal layout. + +### img + +*Type:* `string` + +URL or local path to an image displayed at the top of the card. + +### cta - - URL to navigate to when the card is clicked. - +*Type:* `string` - - Display the card in a compact horizontal layout. - +Custom text for the action button. - - URL or local path to an image displayed at the top of the card. - +### arrow - - Custom text for the action button. - +*Type:* `boolean` - - Show or hide the link arrow icon. - +Show or hide the link arrow icon. diff --git a/components/expandables.mdx b/components/expandables.mdx index 45f8a91e6..1f6ce20ac 100644 --- a/components/expandables.mdx +++ b/components/expandables.mdx @@ -36,10 +36,14 @@ Use expandables to show and hide nested content within response fields. Expandab ## Properties - - The name of the object you are showing. - +### title - - Set to `true` for the expandable to open when the page loads - +*Type:* `string` + +The name of the object you are showing. + +### defaultOpen + +*Type:* `boolean` *Default:* `false` + +Set to `true` for the expandable to open when the page loads. diff --git a/components/fields.mdx b/components/fields.mdx index ac86c323f..6274ee238 100644 --- a/components/fields.mdx +++ b/components/fields.mdx @@ -22,39 +22,51 @@ The `` component is used to define parameters for your APIs or SDKs. ### Properties - - Whether the parameter is a query, path, body, or header. Followed by the - parameter name. - +#### query, path, body, or header + +*Type:* `string` + +Whether the parameter is a query, path, body, or header. Followed by the parameter name. - - Expected type of the parameter's value. +#### type + +*Type:* `string` + +Expected type of the parameter's value. - Supports `number`, `string`, `boolean`, `object`. +Supports `number`, `string`, `boolean`, `object`. Arrays can be defined using the `[]` suffix. For example `string[]`. - +#### required - - Indicate whether the parameter is required. - +*Type:* `boolean` - - Indicate whether the parameter is deprecated. - +Indicate whether the parameter is required. - - Default value populated when the request value is empty - +#### deprecated - - Placeholder text for the input in the playground. - +*Type:* `boolean` - - Description of the parameter (Markdown-enabled). - +Indicate whether the parameter is deprecated. + +#### default + +*Type:* `any` + +Default value populated when the request value is empty. + +#### placeholder + +*Type:* `string` + +Placeholder text for the input in the playground. + +#### children + +*Type:* `string` + +Description of the parameter (Markdown-enabled). ## Response field @@ -72,30 +84,44 @@ The `` component defines the return values of an API. ### Properties - - The name of the response value. - +#### name - - Expected type of the response value. This can be any arbitrary string. - +*Type:* `string` *Required:* Yes - - The default value. - +The name of the response value. - - Indicate whether the response is required. - +#### type - - Whether a field is deprecated. - +*Type:* `string` *Required:* Yes - - Labels that are shown before the name of the field. - +Expected type of the response value. This can be any arbitrary string. - - Labels that are shown after the name of the field. - +#### default + +*Type:* `string` + +The default value. + +#### required + +*Type:* `boolean` + +Indicate whether the response is required. + +#### deprecated + +*Type:* `boolean` + +Whether a field is deprecated. + +#### pre + +*Type:* `string[]` + +Labels that are shown before the name of the field. + +#### post + +*Type:* `string[]` + +Labels that are shown after the name of the field. diff --git a/components/frames.mdx b/components/frames.mdx index 3ff1c4438..90ae74b8c 100644 --- a/components/frames.mdx +++ b/components/frames.mdx @@ -20,9 +20,11 @@ You can add additional context to an image using the optional `caption` prop. ## Properties - - Optional caption text to show centered under your component. - +### caption + +*Type:* `string` + +Optional caption text to show centered under your component. diff --git a/components/icons.mdx b/components/icons.mdx index 58c234a5b..c8c2125a9 100644 --- a/components/icons.mdx +++ b/components/icons.mdx @@ -28,10 +28,14 @@ Icons are placed inline when used within a paragraph. - - The color of the icon as a hex code (for example, `#FF5733`). - +### color - - The size of the icon in pixels. - +*Type:* `string` + +The color of the icon as a hex code (for example, `#FF5733`). + +### size + +*Type:* `number` + +The size of the icon in pixels. diff --git a/components/steps.mdx b/components/steps.mdx index 3f5b1ba1e..bddad0b96 100644 --- a/components/steps.mdx +++ b/components/steps.mdx @@ -36,30 +36,42 @@ Use steps to display a series of sequential actions or events. You can add as ma ## Steps properties - - A list of `Step` components. - +### children - - The size of the step titles. One of `p`, `h2`, and `h3`. - +*Type:* `ReactElement[]` *Required:* Yes + +A list of `Step` components. + +### titleSize + +*Type:* `string` *Default:* `p` + +The size of the step titles. One of `p`, `h2`, and `h3`. ## Individual step properties - - The content of a step either as plain text or components. - +### children + +*Type:* `string | ReactNode` *Required:* Yes + +The content of a step either as plain text or components. - - The title is the primary text for the step and shows up next to the indicator. - +### title + +*Type:* `string` + +The title is the primary text for the step and shows up next to the indicator. + +### stepNumber + +*Type:* `number` + +The number of the step. + +### titleSize - - The number of the step. - +*Type:* `string` *Default:* `p` - - The size of the step titles. One of `p`, `h2`, and `h3`. - +The size of the step titles. One of `p`, `h2`, and `h3`. diff --git a/components/tabs.mdx b/components/tabs.mdx index 7aa270a1e..4a9a2b3d1 100644 --- a/components/tabs.mdx +++ b/components/tabs.mdx @@ -56,14 +56,20 @@ Use tabs to organize content into multiple panels that users can switch between. ## Properties - - The title of the tab. Short titles are easier to navigate. - +### title - - A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon. - +*Type:* `string` *Required:* Yes - - For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. - +The title of the tab. Short titles are easier to navigate. + +### icon + +*Type:* `string` + +A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon. + +### iconType + +*Type:* `string` + +For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. diff --git a/components/tooltips.mdx b/components/tooltips.mdx index c48fb94b7..fd50d5c55 100644 --- a/components/tooltips.mdx +++ b/components/tooltips.mdx @@ -14,14 +14,20 @@ Use tooltips to provide additional context or definitions when a user hovers ove ## Properties - - The text displayed in the tooltip. - +### tip - - The call-to-action text for a link within the tooltip. - +*Type:* `string` *Required:* Yes - - URL for the call-to-action link. Required when using `cta`. - +The text displayed in the tooltip. + +### cta + +*Type:* `string` + +The call-to-action text for a link within the tooltip. + +### href + +*Type:* `string` + +URL for the call-to-action link. Required when using `cta`. diff --git a/components/update.mdx b/components/update.mdx index 6e13f200c..e75831d85 100644 --- a/components/update.mdx +++ b/components/update.mdx @@ -37,14 +37,20 @@ Use multiple `Update` components to create [changelogs](/guides/changelogs). ## Props - - Label for the update. Appears to the left of the update and creates an anchor link. Labels should be unique. - +### label - - Tags for the update. Shown as filters in the right side panel. - +*Type:* `string` *Required:* Yes - - Description of the update. Appears below the label and tag. - +Label for the update. Appears to the left of the update and creates an anchor link. Labels should be unique. + +### tags + +*Type:* `string[]` + +Tags for the update. Shown as filters in the right side panel. + +### description + +*Type:* `string` + +Description of the update. Appears below the label and tag.