diff --git a/src/components/RLAutocomplete/RLAutocomplete.tsx b/src/components/RLAutocomplete/RLAutocomplete.tsx
index 64de0bf..10a3802 100644
--- a/src/components/RLAutocomplete/RLAutocomplete.tsx
+++ b/src/components/RLAutocomplete/RLAutocomplete.tsx
@@ -9,6 +9,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLAutocomplete = forwardRef<RLAutocompleteRef, RLAutocompleteProps>(
   (
     {
+      className,
       value,
       onChange,
       options = [],
@@ -137,7 +138,7 @@ export const RLAutocomplete = forwardRef<RLAutocompleteRef, RLAutocompleteProps>
     )}
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <label
           className={`block mb-[2px] ${errorMessage ? 'error' : ''} ${labelClassName || ''}`}
           style={errorMessage ? { color: 'var(--sl-color-danger-500)' } : undefined}
diff --git a/src/components/RLAutocomplete/types.ts b/src/components/RLAutocomplete/types.ts
index cc7fb7c..61a96bb 100644
--- a/src/components/RLAutocomplete/types.ts
+++ b/src/components/RLAutocomplete/types.ts
@@ -2,6 +2,7 @@ import type { RLSelectOptionType } from '../RLSelect'
 import type { RLInputRuleType, AutoCompleteChangeEvent, AutoCompleteCompleteEvent } from '../utils/types'
 
 export interface RLAutocompleteProps {
+  className?: string
   value?: string
   onChange?: (value: string) => void
   options?: RLSelectOptionType[]
diff --git a/src/components/RLCheckbox/RLCheckbox.tsx b/src/components/RLCheckbox/RLCheckbox.tsx
index 6454abc..4cd3c78 100644
--- a/src/components/RLCheckbox/RLCheckbox.tsx
+++ b/src/components/RLCheckbox/RLCheckbox.tsx
@@ -8,6 +8,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLCheckbox = forwardRef<RLCheckboxRef, RLCheckboxProps>(
   (
     {
+      className,
       checked,
       onChange,
       name,
@@ -90,7 +91,7 @@ export const RLCheckbox = forwardRef<RLCheckboxRef, RLCheckboxProps>(
     const combinedClassName = `flex items-center ${errorMessage ? 'error' : ''}`
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <SlCheckbox
           ref={checkboxRef}
           className={combinedClassName}
diff --git a/src/components/RLCheckbox/types.ts b/src/components/RLCheckbox/types.ts
index 60eee3d..c4372b0 100644
--- a/src/components/RLCheckbox/types.ts
+++ b/src/components/RLCheckbox/types.ts
@@ -8,6 +8,7 @@ import type {
 } from '../utils/types'
 
 export interface RLCheckboxProps {
+  className?: string
   checked?: boolean
   onChange?: (checked: boolean) => void
   name?: string
diff --git a/src/components/RLCrud/RLCrud.tsx b/src/components/RLCrud/RLCrud.tsx
index e9102bd..530efd8 100644
--- a/src/components/RLCrud/RLCrud.tsx
+++ b/src/components/RLCrud/RLCrud.tsx
@@ -17,6 +17,7 @@ export const RLCrud = forwardRef<RLCrudRef, RLCrudProps>(
   (
     {
       id,
+      className,
       primary_key,
       singular_label,
       headers,
@@ -128,7 +129,6 @@ export const RLCrud = forwardRef<RLCrudRef, RLCrudProps>(
         }
 
         setItems(response.result as Record<string, unknown>[])
-        setCurrentPage(response.page.currentPage)
         setTotalRows(response.page.totalRows)
       } catch (e) {
         // eslint-disable-next-line no-console
@@ -291,7 +291,7 @@ export const RLCrud = forwardRef<RLCrudRef, RLCrudProps>(
     }))
 
     return (
-      <div>
+      <div className={className}>
         <RLCrudFilters
           ref={filtersRef}
           className="w-full"
diff --git a/src/components/RLCrud/types.ts b/src/components/RLCrud/types.ts
index 3685fe0..e86494e 100644
--- a/src/components/RLCrud/types.ts
+++ b/src/components/RLCrud/types.ts
@@ -39,6 +39,7 @@ export interface RLCrudProps {
   id: string
   primary_key: string
   singular_label: string
+  className?: string
   headers: RLCrudHeaderType[]
   filters: Omit<RLCrudFilterType, 'label'>[]
   filters_title?: string
diff --git a/src/components/RLCrudAction/RLCrudAction.tsx b/src/components/RLCrudAction/RLCrudAction.tsx
index 3372e70..9acb55f 100644
--- a/src/components/RLCrudAction/RLCrudAction.tsx
+++ b/src/components/RLCrudAction/RLCrudAction.tsx
@@ -3,6 +3,7 @@ import { RLTooltip } from '../RLTooltip'
 import { RLIcon } from '../RLIcon'
 
 export const RLCrudAction = ({
+  className,
   icon,
   tooltip = '',
   placement = 'top',
@@ -10,13 +11,15 @@ export const RLCrudAction = ({
   onClick
 }: RLCrudActionProps) => {
   return (
-    <RLTooltip placement={placement} content={tooltip} distance={distance}>
-      <RLIcon
-        className="text-2xl cursor-pointer hover:opacity-40"
-        name={icon}
-        onClick={onClick}
-      />
-    </RLTooltip>
+    <span className={className}>
+      <RLTooltip placement={placement} content={tooltip} distance={distance}>
+        <RLIcon
+          className="text-2xl cursor-pointer hover:opacity-40"
+          name={icon}
+          onClick={onClick}
+        />
+      </RLTooltip>
+    </span>
   )
 }
 
diff --git a/src/components/RLCrudAction/types.ts b/src/components/RLCrudAction/types.ts
index e514949..7beb7f8 100644
--- a/src/components/RLCrudAction/types.ts
+++ b/src/components/RLCrudAction/types.ts
@@ -1,4 +1,5 @@
 export interface RLCrudActionProps {
+  className?: string
   icon: string
   tooltip?: string
   placement?: 'top' | 'bottom' | 'left' | 'right'
diff --git a/src/components/RLCrudForm/RLCrudForm.tsx b/src/components/RLCrudForm/RLCrudForm.tsx
index 3758baf..a9f2885 100644
--- a/src/components/RLCrudForm/RLCrudForm.tsx
+++ b/src/components/RLCrudForm/RLCrudForm.tsx
@@ -8,6 +8,7 @@ import type { RLInputRuleType } from '../utils/types'
 export const RLCrudForm = forwardRef<RLCrudFormRef, RLCrudFormProps>(
   (
     {
+      className,
       value,
       type,
       fields: initialFields,
@@ -150,7 +151,7 @@ export const RLCrudForm = forwardRef<RLCrudFormRef, RLCrudFormProps>(
         <div slot="label">{title}</div>
         <form
           name={`${type}-crud-form`}
-          className="flex flex-col gap-8"
+          className={`flex flex-col gap-8 ${className ?? ''}`}
           onSubmit={handleConfirm}
         >
           {Object.values(fields).map((field) => (
diff --git a/src/components/RLCrudForm/types.ts b/src/components/RLCrudForm/types.ts
index 9283650..b302856 100644
--- a/src/components/RLCrudForm/types.ts
+++ b/src/components/RLCrudForm/types.ts
@@ -32,6 +32,7 @@ export interface RLCrudFormFieldType {
 }
 
 export interface RLCrudFormProps {
+  className?: string
   value?: { [key: string]: RLCrudInputValueType }
   type: 'add' | 'edit'
   fields: RLCrudFormFieldType[]
diff --git a/src/components/RLCrudInput/RLCrudInput.tsx b/src/components/RLCrudInput/RLCrudInput.tsx
index 54ab105..c4cf7c5 100644
--- a/src/components/RLCrudInput/RLCrudInput.tsx
+++ b/src/components/RLCrudInput/RLCrudInput.tsx
@@ -26,6 +26,7 @@ type InputRefType =
 export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
   (
     {
+      className,
       inputName,
       label,
       type,
@@ -56,6 +57,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLInput
             ref={inputRef as React.Ref<RLInputRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string}
@@ -71,6 +73,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLTextArea
             ref={inputRef as React.Ref<RLTextAreaRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string}
@@ -86,6 +89,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLNumberInput
             ref={inputRef as React.Ref<RLNumberInputRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as number | null}
@@ -101,6 +105,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLCheckbox
             ref={inputRef as React.Ref<RLCheckboxRef>}
+            className={className}
             name={inputName}
             label={label}
             checked={value as boolean}
@@ -115,6 +120,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLSelect
             ref={inputRef as React.Ref<RLSelectRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string | string[] | null}
@@ -131,6 +137,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
       case 'color':
         return (
           <RLColorPicker
+            className={className}
             name={inputName}
             label={label}
             value={value as string}
@@ -144,6 +151,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLImageUpload
             ref={inputRef as React.Ref<RLImageUploadRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string | null}
@@ -161,6 +169,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLAutocomplete
             ref={inputRef as React.Ref<RLAutocompleteRef>}
+            className={className}
             label={label}
             value={value as string}
             onChange={(v) => onChange?.(v)}
@@ -177,6 +186,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLDropdown
             ref={inputRef as React.Ref<RLDropdownRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string | string[] | null}
@@ -195,6 +205,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLDatePicker
             ref={inputRef as React.Ref<RLDatePickerRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as Date | Date[] | null}
diff --git a/src/components/RLCrudInput/types.ts b/src/components/RLCrudInput/types.ts
index 3f1ab91..a7aae9f 100644
--- a/src/components/RLCrudInput/types.ts
+++ b/src/components/RLCrudInput/types.ts
@@ -18,6 +18,7 @@ export type RLCrudInputFieldType =
   | 'textarea'
 
 export interface RLCrudInputProps {
+  className?: string
   inputName: string
   label: string
   type: RLCrudInputFieldType
diff --git a/src/components/RLDatePicker/RLDatePicker.tsx b/src/components/RLDatePicker/RLDatePicker.tsx
index 3c36bf1..97979d0 100644
--- a/src/components/RLDatePicker/RLDatePicker.tsx
+++ b/src/components/RLDatePicker/RLDatePicker.tsx
@@ -11,6 +11,7 @@ import { RLInput } from '../RLInput'
 export const RLDatePicker = forwardRef<RLDatePickerRef, RLDatePickerProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -114,7 +115,7 @@ export const RLDatePicker = forwardRef<RLDatePickerRef, RLDatePickerProps>(
     }, [])
 
     return (
-      <SlDropdown open={isDropdownOpen || undefined} hoist onSlShow={handleShow} onSlHide={handleHide}>
+      <SlDropdown className={className} open={isDropdownOpen || undefined} hoist onSlShow={handleShow} onSlHide={handleHide}>
         <div className="relative" slot="trigger">
           <RLInput
             className={`date-input ${errorMessage ? 'error' : ''}`}
diff --git a/src/components/RLDatePicker/types.ts b/src/components/RLDatePicker/types.ts
index 59b6161..485178d 100644
--- a/src/components/RLDatePicker/types.ts
+++ b/src/components/RLDatePicker/types.ts
@@ -1,6 +1,7 @@
 import type { RLInputRuleType } from '../utils/types'
 
 export interface RLDatePickerProps {
+  className?: string
   value?: Date | Date[] | null
   onChange?: (value: Date | Date[] | null) => void
   name?: string
diff --git a/src/components/RLDropdown/RLDropdown.tsx b/src/components/RLDropdown/RLDropdown.tsx
index 093a981..506c2e9 100644
--- a/src/components/RLDropdown/RLDropdown.tsx
+++ b/src/components/RLDropdown/RLDropdown.tsx
@@ -17,6 +17,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLDropdown = forwardRef<RLDropdownRef, RLDropdownProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -189,7 +190,7 @@ export const RLDropdown = forwardRef<RLDropdownRef, RLDropdownProps>(
     }
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         {label && (
           <label
             htmlFor={name}
diff --git a/src/components/RLDropdown/types.ts b/src/components/RLDropdown/types.ts
index adcee3f..0c0c3cf 100644
--- a/src/components/RLDropdown/types.ts
+++ b/src/components/RLDropdown/types.ts
@@ -2,6 +2,7 @@ import type { RLInputRuleType } from '../utils/types'
 import type { RLSelectOptionType } from '../RLSelect'
 
 export interface RLDropdownProps {
+  className?: string
   value?: string | string[] | null
   onChange?: (value: string | string[] | null) => void
   name: string
diff --git a/src/components/RLFileInput/RLFileInput.tsx b/src/components/RLFileInput/RLFileInput.tsx
index f6ddc21..f272217 100644
--- a/src/components/RLFileInput/RLFileInput.tsx
+++ b/src/components/RLFileInput/RLFileInput.tsx
@@ -17,6 +17,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLFileInput = forwardRef<RLFileInputRef, RLFileInputProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -154,7 +155,7 @@ export const RLFileInput = forwardRef<RLFileInputRef, RLFileInputProps>(
     )
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <label
           htmlFor={name}
           className={`pb-4 ${errorMessage ? 'error' : ''}`}
diff --git a/src/components/RLFileInput/types.ts b/src/components/RLFileInput/types.ts
index 483955e..1184936 100644
--- a/src/components/RLFileInput/types.ts
+++ b/src/components/RLFileInput/types.ts
@@ -10,6 +10,7 @@ export interface RLFileInputErrorEvent {
 }
 
 export interface RLFileInputProps {
+  className?: string
   value?: File | File[] | null
   onChange?: (files: File | File[] | null) => void
   name?: string
diff --git a/src/components/RLNumberInput/RLNumberInput.tsx b/src/components/RLNumberInput/RLNumberInput.tsx
index 9384521..c676150 100644
--- a/src/components/RLNumberInput/RLNumberInput.tsx
+++ b/src/components/RLNumberInput/RLNumberInput.tsx
@@ -8,6 +8,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLNumberInput = forwardRef<RLNumberInputRef, RLNumberInputProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -124,7 +125,7 @@ export const RLNumberInput = forwardRef<RLNumberInputRef, RLNumberInputProps>(
     )
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <SlInput
           className={errorMessage ? 'error' : undefined}
           type="number"
diff --git a/src/components/RLNumberInput/types.ts b/src/components/RLNumberInput/types.ts
index 5a69961..b83ffd6 100644
--- a/src/components/RLNumberInput/types.ts
+++ b/src/components/RLNumberInput/types.ts
@@ -10,6 +10,7 @@ import type {
 } from '../utils/types'
 
 export interface RLNumberInputProps {
+  className?: string
   value?: number | null
   onChange?: (value: number | null) => void
   name?: string
diff --git a/src/components/RLPaginator/RLPaginator.tsx b/src/components/RLPaginator/RLPaginator.tsx
index d9f8bfb..97307e3 100644
--- a/src/components/RLPaginator/RLPaginator.tsx
+++ b/src/components/RLPaginator/RLPaginator.tsx
@@ -7,6 +7,7 @@ import { RLSelect } from '../RLSelect'
 export const RLPaginator = forwardRef<HTMLDivElement, RLPaginatorProps>(
   (
     {
+      className,
       page = 1,
       onPageChange,
       totalRows,
@@ -72,7 +73,7 @@ export const RLPaginator = forwardRef<HTMLDivElement, RLPaginatorProps>(
     )
 
     return (
-      <div ref={ref} className="flex items-center gap-4">
+      <div ref={ref} className={`flex items-center gap-4 ${className ?? ''}`}>
         <RLButton onClick={firstPage} disabled={page === 1}>
           <RLIcon name="pageFirst" />
         </RLButton>
diff --git a/src/components/RLPaginator/types.ts b/src/components/RLPaginator/types.ts
index a364dc1..11ba1ed 100644
--- a/src/components/RLPaginator/types.ts
+++ b/src/components/RLPaginator/types.ts
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 
 export interface RLPaginatorProps {
+  className?: string
   page?: number
   onPageChange?: (page: number) => void
   totalRows: number
diff --git a/src/components/RLRadioGroup/RLRadioGroup.tsx b/src/components/RLRadioGroup/RLRadioGroup.tsx
index c5e5a90..737cfe2 100644
--- a/src/components/RLRadioGroup/RLRadioGroup.tsx
+++ b/src/components/RLRadioGroup/RLRadioGroup.tsx
@@ -9,6 +9,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLRadioGroup = forwardRef<RLRadioGroupRef, RLRadioGroupProps>(
   (
     {
+      className,
       value,
       onChange,
       label,
@@ -68,7 +69,7 @@ export const RLRadioGroup = forwardRef<RLRadioGroupRef, RLRadioGroupProps>(
     const combinedClassName = errorMessage ? 'error' : undefined
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <SlRadioGroup
           className={combinedClassName}
           value={value}
diff --git a/src/components/RLRadioGroup/types.ts b/src/components/RLRadioGroup/types.ts
index 74348de..96f7b2c 100644
--- a/src/components/RLRadioGroup/types.ts
+++ b/src/components/RLRadioGroup/types.ts
@@ -8,6 +8,7 @@ export interface RadioOption {
 }
 
 export interface RLRadioGroupProps {
+  className?: string
   value?: string
   onChange?: (value: string) => void
   label?: string
diff --git a/src/components/RLSelect/RLSelect.tsx b/src/components/RLSelect/RLSelect.tsx
index 8002968..ab9bf41 100644
--- a/src/components/RLSelect/RLSelect.tsx
+++ b/src/components/RLSelect/RLSelect.tsx
@@ -10,6 +10,7 @@ import { RLIcon } from '../RLIcon'
 export const RLSelect = forwardRef<RLSelectRef, RLSelectProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -169,7 +170,7 @@ export const RLSelect = forwardRef<RLSelectRef, RLSelectProps>(
     const combinedClassName = `min-w-full listbox ${errorMessage ? 'error' : ''}`
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <SlSelect
           className={combinedClassName}
           hoist
diff --git a/src/components/RLSelect/types.ts b/src/components/RLSelect/types.ts
index 2206529..f0afeac 100644
--- a/src/components/RLSelect/types.ts
+++ b/src/components/RLSelect/types.ts
@@ -20,6 +20,7 @@ export interface RLSelectOptionType {
 }
 
 export interface RLSelectProps {
+  className?: string
   value?: string | string[] | null
   onChange?: (value: string | string[] | null) => void
   name?: string
diff --git a/src/components/RLTextArea/RLTextArea.tsx b/src/components/RLTextArea/RLTextArea.tsx
index 1ba5061..5226802 100644
--- a/src/components/RLTextArea/RLTextArea.tsx
+++ b/src/components/RLTextArea/RLTextArea.tsx
@@ -8,6 +8,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLTextArea = forwardRef<RLTextAreaRef, RLTextAreaProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -93,7 +94,7 @@ export const RLTextArea = forwardRef<RLTextAreaRef, RLTextAreaProps>(
     const combinedClassName = errorMessage ? 'error' : undefined
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <SlTextarea
           className={combinedClassName}
           value={value ?? ''}
diff --git a/src/components/RLTextArea/types.ts b/src/components/RLTextArea/types.ts
index 5fc2449..8d60199 100644
--- a/src/components/RLTextArea/types.ts
+++ b/src/components/RLTextArea/types.ts
@@ -8,6 +8,7 @@ import type {
 } from '../utils/types'
 
 export interface RLTextAreaProps {
+  className?: string
   value?: string
   onChange?: (value: string) => void
   name?: string