diff --git a/packages/components/src/checkbox/checkbox-group.tsx b/packages/components/src/checkbox/checkbox-group.tsx
index fea00aa5ff..daba9eb1ae 100644
--- a/packages/components/src/checkbox/checkbox-group.tsx
+++ b/packages/components/src/checkbox/checkbox-group.tsx
@@ -6,6 +6,15 @@ import { Stack } from '../stack'
 import { useId } from '@vtex/shoreline-utils'
 import { Label } from '../label'
 
+/**
+ * Checkbox groups allow users to select multiple options from a list.
+ *
+ * @example
+ * <CheckboxGroup label="Checkbox group">
+ *  <Checkbox value="1">Option 1</Checkbox>
+ *  <Checkbox value="2">Option 2</Checkbox>
+ * </CheckboxGroup>
+ */
 export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(
   function CheckboxGroup(props, ref) {
     const {
@@ -46,9 +55,25 @@ export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(
 )
 
 export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Whether the checkbox group is in an error state
+   */
   error?: boolean
+  /**
+   * Checkbox group description
+   */
   description?: ReactNode
+  /**
+   * Checkbox group error message
+   */
   errorText?: ReactNode
+  /**
+   * Checkbox group label
+   */
   label: ReactNode
+  /**
+   * Whether the checkbox group is horizontal or vertical
+   * @default false
+   */
   horizontal?: boolean
 }
diff --git a/packages/components/src/confirmation-modal/confirmation-modal.tsx b/packages/components/src/confirmation-modal/confirmation-modal.tsx
index 26a2a331a4..c40682864b 100644
--- a/packages/components/src/confirmation-modal/confirmation-modal.tsx
+++ b/packages/components/src/confirmation-modal/confirmation-modal.tsx
@@ -111,8 +111,17 @@ export interface ConfirmationModalProps
    * Object containing all messages to be displayed internally in the modal. They include "title", "ok" and "cancel".
    */
   messages?: {
+    /**
+     * The title of the modal.
+     */
     title?: string
+    /**
+     * The text of the confirm button.
+     */
     confirm?: string
+    /**
+     * The text of the cancel button.
+     */
     cancel?: string
   }
 }
diff --git a/packages/components/src/field/field-description.tsx b/packages/components/src/field/field-description.tsx
index e2a65ef654..b49e18054c 100644
--- a/packages/components/src/field/field-description.tsx
+++ b/packages/components/src/field/field-description.tsx
@@ -22,5 +22,9 @@ export const FieldDescription = forwardRef<
 })
 
 export interface FieldDescriptionProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Enables component composition
+   * @default false
+   */
   asChild?: boolean
 }
diff --git a/packages/components/src/field/field-error.tsx b/packages/components/src/field/field-error.tsx
index 4cfd0f8f5c..6f0536b82f 100644
--- a/packages/components/src/field/field-error.tsx
+++ b/packages/components/src/field/field-error.tsx
@@ -30,5 +30,9 @@ export const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(
 )
 
 export interface FieldErrorProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Enables component composition
+   * @default false
+   */
   asChild?: boolean
 }
diff --git a/packages/components/src/field/field-provider.tsx b/packages/components/src/field/field-provider.tsx
index 8f9f4dea7d..d4c0093264 100644
--- a/packages/components/src/field/field-provider.tsx
+++ b/packages/components/src/field/field-provider.tsx
@@ -14,6 +14,12 @@ export function FieldProvider(props: FieldProviderProps) {
 }
 
 export interface FieldProviderProps {
+  /**
+   * Field store
+   */
   store: Store<FieldContextType>
+  /**
+   * Children to be rendered within the provider
+   */
   children?: React.ReactNode
 }
diff --git a/packages/components/src/field/field.tsx b/packages/components/src/field/field.tsx
index ba183edf1c..192b85249e 100644
--- a/packages/components/src/field/field.tsx
+++ b/packages/components/src/field/field.tsx
@@ -56,7 +56,19 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
 })
 
 export interface FieldProps extends React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * Enables component composition
+   * @default false
+   */
   asChild?: boolean
+  /**
+   * Whether the field is in an error state
+   * @default false
+   */
   error?: boolean
+  /**
+   * Space between the field's children
+   * @default 'normal'
+   */
   space?: 'normal' | 'large'
 }
diff --git a/packages/components/src/filter/filter-popover.tsx b/packages/components/src/filter/filter-popover.tsx
index 4ff8929c68..c3ecd9393f 100644
--- a/packages/components/src/filter/filter-popover.tsx
+++ b/packages/components/src/filter/filter-popover.tsx
@@ -57,8 +57,17 @@ export const FilterPopover = forwardRef<HTMLDivElement, FilterPopoverProps>(
 )
 
 export interface FilterPopoverProps extends PopoverProps {
+  /**
+   * Filter messages
+   */
   messages?: {
+    /**
+     * Apply button text message
+     */
     apply: string
+    /**
+     * Clear button text message
+     */
     clear: string
   }
 }
diff --git a/packages/components/src/filter/filter-provider.tsx b/packages/components/src/filter/filter-provider.tsx
index 0c608a9982..eb2a53818a 100644
--- a/packages/components/src/filter/filter-provider.tsx
+++ b/packages/components/src/filter/filter-provider.tsx
@@ -80,16 +80,46 @@ export function FilterProvider(props: FilterProviderProps) {
 }
 
 export interface FilterProviderProps {
+  /**
+   * Children of FilterProvider
+   */
   children: ReactNode
+  /**
+   * Whether the filter is open
+   */
   open?: boolean
+  /**
+   * Callback to set the filter open state
+   */
   setOpen?: React.Dispatch<React.SetStateAction<boolean>>
+  /**
+   * Whether the filter is open by default
+   */
   defaultOpen?: boolean
+  /**
+   * Whether the filter is searchable
+   */
   searchValue?: string
+  /**
+   * Callback to set the filter search value
+   */
   setSearchValue?: React.Dispatch<React.SetStateAction<string>>
+  /**
+   * Whether the filter is searchable by default
+   */
   defaultSearchValue?: string
+  /**
+   * Filter value
+   */
   value?: string | string[]
+  /**
+   * Callback to set the filter value
+   */
   setValue?:
     | React.Dispatch<React.SetStateAction<string>>
     | React.Dispatch<React.SetStateAction<string[]>>
+  /**
+   * Filter default value
+   */
   defaultValue?: string | string[]
 }
diff --git a/packages/components/src/filter/filter.tsx b/packages/components/src/filter/filter.tsx
index bff51fb570..fcf83f8c10 100644
--- a/packages/components/src/filter/filter.tsx
+++ b/packages/components/src/filter/filter.tsx
@@ -62,7 +62,16 @@ type InheritedProps = Pick<
   Pick<FilterPopoverProps, 'messages'>
 
 export interface FilterProps extends InheritedProps {
+  /**
+   * Filter label
+   */
   label: string
+  /**
+   * Filter children
+   */
   children: ReactNode
+  /**
+   * Additional className
+   */
   className?: string
 }
diff --git a/packages/components/src/icon-button/icon-button.tsx b/packages/components/src/icon-button/icon-button.tsx
index f460c96679..d90e472ff1 100644
--- a/packages/components/src/icon-button/icon-button.tsx
+++ b/packages/components/src/icon-button/icon-button.tsx
@@ -29,5 +29,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 )
 
 export interface IconButtonProps extends ButtonProps {
+  /**
+   * Icon button label. Needed for accessibility.
+   */
   label: ReactNode
 }
diff --git a/packages/components/src/label/label.tsx b/packages/components/src/label/label.tsx
index 9077123d90..e9388006dc 100644
--- a/packages/components/src/label/label.tsx
+++ b/packages/components/src/label/label.tsx
@@ -12,6 +12,12 @@ import { useFieldContext } from '../field'
 
 const useMessage = createMessageHook(messages)
 
+/**
+ * Label component
+ *
+ * @example
+ * <Label>Label</Label>
+ */
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   props,
   ref
@@ -42,6 +48,14 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
 })
 
 export interface LabelProps extends ComponentPropsWithoutRef<'label'> {
+  /**
+   * Enables component composition
+   * @default false
+   */
   asChild?: boolean
+  /**
+   * Whether the input linked to this label is optional
+   * @default false
+   */
   optional?: boolean
 }
diff --git a/packages/components/src/radio/radio-group.tsx b/packages/components/src/radio/radio-group.tsx
index ae80b0d166..503c7aac8c 100644
--- a/packages/components/src/radio/radio-group.tsx
+++ b/packages/components/src/radio/radio-group.tsx
@@ -12,6 +12,15 @@ import { Field, FieldDescription, FieldError } from '../field'
 import { Stack } from '../stack'
 import { Label } from '../label'
 
+/**
+ * Radio groups allow users to select one option from a list.
+ * @example
+ * <RadioGroup label="Radio group">
+ *  <Radio value="1">Option 1</Radio>
+ *  <Radio value="2">Option 2</Radio>
+ *  <Radio value="3">Option 3</Radio>
+ * </RadioGroup>
+ */
 export const RadioGroup = forwardRef<HTMLInputElement, RadioGroupProps>(
   function Radio(props, ref) {
     const {
@@ -55,19 +64,53 @@ export const RadioGroup = forwardRef<HTMLInputElement, RadioGroupProps>(
 )
 
 export interface RadioGroupState {
+  /**
+   * The value of the active radio
+   */
   value?: string | number | null
+  /**
+   * The callback to set the active radio
+   */
   setValue?: ((value: string | number | null) => void) | undefined
+  /**
+   * The id of the active radio group item
+   */
   activeId?: string | null
+  /**
+   * Default active id of the radio group
+   */
   defaultActiveId?: string | null
+  /**
+   * Default value of the radio group
+   */
   defaultValue?: string | number | null
 }
 
 export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Whether the radio group is in an error state
+   */
   error?: boolean
+  /**
+   * Radio group description
+   */
   description?: string
+  /**
+   * Radio group error message
+   */
   errorText?: string
+  /**
+   * Radio group label
+   */
   label: ReactNode
+  /**
+   * Whether the radio group is horizontal or vertical
+   * @default false
+   */
   horizontal?: boolean
+  /**
+   * Radio group state
+   */
   state?: RadioStore
 }
 
diff --git a/packages/components/src/radio/radio.tsx b/packages/components/src/radio/radio.tsx
index c29768e9fe..9de165ece2 100644
--- a/packages/components/src/radio/radio.tsx
+++ b/packages/components/src/radio/radio.tsx
@@ -5,6 +5,16 @@ import { useId } from '@vtex/shoreline-utils'
 
 import { Label } from '../label'
 
+/**
+ * Radio inputs allow users to select one option from a list. It should be used inside a RadioGroup component.
+ *
+ * @example
+ * <RadioGroup label="Radio group">
+ *  <Radio value="1">Option 1</Radio>
+ *  <Radio value="2">Option 2</Radio>
+ *  <Radio value="3">Option 3</Radio>
+ * </RadioGroup>
+ */
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
   props,
   ref
@@ -40,6 +50,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
 })
 
 export interface RadioProps extends ComponentPropsWithoutRef<'input'> {
+  /**
+   * Wether is disabled
+   * @default false
+   */
   error?: boolean
+  /**
+   * The value of the radio
+   */
   value: string
 }
diff --git a/packages/components/src/search/search.tsx b/packages/components/src/search/search.tsx
index 1debbc63df..f4ae208d47 100644
--- a/packages/components/src/search/search.tsx
+++ b/packages/components/src/search/search.tsx
@@ -6,6 +6,11 @@ import { useId, useMergeRef } from '@vtex/shoreline-utils'
 import { Spinner } from '../spinner'
 import { VisuallyHidden } from '@vtex/shoreline-primitives'
 
+/**
+ * Search component
+ * @example
+ * <Search placeholder="Search" />
+ */
 export const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(
   props,
   forwardedRef
diff --git a/packages/components/src/select/select.tsx b/packages/components/src/select/select.tsx
index 7e9401f76b..cfd13e945b 100644
--- a/packages/components/src/select/select.tsx
+++ b/packages/components/src/select/select.tsx
@@ -77,7 +77,14 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 
 export interface SelectProps
   extends Omit<ComponentPropsWithoutRef<'select'>, 'onChange'> {
+  /**
+   * Whether is in error state
+   */
   error?: boolean
+  /**
+   * Whether is disabled
+   * @default false
+   */
   disabled?: boolean
   /**
    * Callback for value change
diff --git a/packages/components/src/skeleton/skeleton.tsx b/packages/components/src/skeleton/skeleton.tsx
index f7104a77f8..24d28fad58 100644
--- a/packages/components/src/skeleton/skeleton.tsx
+++ b/packages/components/src/skeleton/skeleton.tsx
@@ -1,6 +1,11 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 
+/**
+ * Skeleton represents a loading state
+ * @example
+ * <Skeleton shape="circle" style={{ width: 200, height: 200 }} />
+ */
 export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
   function Skeleton(props, ref) {
     const { shape = 'rect', ...otherProps } = props
diff --git a/packages/components/src/tag/tag.tsx b/packages/components/src/tag/tag.tsx
index 80a887352c..f2ba2515a6 100644
--- a/packages/components/src/tag/tag.tsx
+++ b/packages/components/src/tag/tag.tsx
@@ -34,7 +34,15 @@ export const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(
 })
 
 export interface TagProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Tag variant
+   * @default 'primary'
+   */
   variant?: 'primary' | 'secondary'
+  /**
+   * Tag color
+   * @default 'gray'
+   */
   color?:
     | 'gray'
     | 'red'
@@ -46,5 +54,9 @@ export interface TagProps extends ComponentPropsWithoutRef<'div'> {
     | 'blue'
     | 'orange'
     | 'yellow'
+  /**
+   * Tag size
+   * @default 'normal'
+   */
   size?: 'normal' | 'large'
 }
diff --git a/packages/components/src/text/text.tsx b/packages/components/src/text/text.tsx
index 2ccc6e4659..1a8729e3f6 100644
--- a/packages/components/src/text/text.tsx
+++ b/packages/components/src/text/text.tsx
@@ -2,6 +2,11 @@ import type { AnyObject } from '@vtex/shoreline-utils'
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 
+/**
+ * Text component
+ * @example
+ * <Text variant="context">Hello world</Text>
+ */
 export const Text = forwardRef(function Text(props: TextProps, ref: any) {
   const { children, variant = 'context', ...otherProps } = props
 
diff --git a/packages/components/src/textarea/textarea.tsx b/packages/components/src/textarea/textarea.tsx
index 7fc7303895..147125d85f 100644
--- a/packages/components/src/textarea/textarea.tsx
+++ b/packages/components/src/textarea/textarea.tsx
@@ -4,6 +4,11 @@ import { useControlledState, useStore } from '@vtex/shoreline-utils'
 
 import { useFieldContext } from '../field'
 
+/**
+ * Textarea fields allow merchants to enter multiple lines of text.
+ * @example
+ * <Textarea label="Label" maxLength={120} optional resizable={false} />
+ */
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   function Textarea(props, ref) {
     const {
@@ -58,8 +63,18 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
 export interface TextareaProps
   extends Omit<ComponentPropsWithoutRef<'textarea'>, 'onChange'> {
+  /**
+   * Whether is in error state
+   */
   error?: boolean
+  /**
+   * Whether the textarea is optional or not
+   */
   optional?: boolean
+  /**
+   * Whether the textarea is resizable or not
+   * @default true
+   */
   resizable?: boolean
   /**
    * Callback for value change
diff --git a/packages/components/src/toast/toast.tsx b/packages/components/src/toast/toast.tsx
index 07a87fdef1..90aa34dfc3 100644
--- a/packages/components/src/toast/toast.tsx
+++ b/packages/components/src/toast/toast.tsx
@@ -18,6 +18,8 @@ import { Button } from '../button'
 
 /**
  * Toast component
+ * @example
+ * <Toast variant="success">Success!</Toast>
  */
 export function Toast(props: ToastProps) {
   const { id, variant = 'informational', children, loading, onDismiss } = props
@@ -86,10 +88,27 @@ function getIcon(variant: ToastVariant = 'informational') {
 }
 
 interface ToastProps {
+  /**
+   * Toast variant
+   * @default 'informational'
+   */
   variant?: ToastVariant
+  /**
+   * Toast children
+   */
   children?: ReactNode
+  /**
+   * Callback to be called when the toast is dismissed
+   */
   onDismiss?: MouseEventHandler<HTMLButtonElement>
+  /**
+   * Toast id
+   */
   id?: string
+  /**
+   * How long the toast should be visible for in milliseconds
+   * @default 5000
+   */
   duration?: number
   loading?: boolean
 }