String(user.id)}
selectable
selectedKeys={selectedRows}
onSelectionChange={(keys, items) => {
setSelectedRows(keys)
console.log('Selected row IDs:', keys)
console.log('Selected row objects:', items)
}}
/>
```
**DropdownMenu**:
- **Description:** Headless-style dropdown menu primitive with custom trigger support, outside-click close behavior, and nested submenus.
- **Placement behavior:**
- Root menu opens **down or up** based on viewport space (or can be forced).
- Root menu opens **right or left** based on viewport space and will clamp inside the viewport to avoid horizontal overflow.
- Nested submenus open **right or left** based on side space (or can be forced).
- **Use case:**
- Nested navigation or action menus where each menu item can itself open another submenu.
- Context menus launched from custom triggers like icon buttons, cards, or toolbar actions.
- **Core Components:**
- **`DropdownMenu`**: Root wrapper with controlled/uncontrolled open state.
- **`DropdownMenuTrigger`**: Trigger button or custom trigger with `asChild`.
- **`DropdownMenuContent`**: Root menu panel.
- **`DropdownMenuItem`**: Clickable item (button or custom child with `asChild`).
- **`DropdownMenuSub`**: Nested menu wrapper.
- **`DropdownMenuSubTrigger`**: Trigger for nested menu.
- **`DropdownMenuSubContent`**: Nested panel.
- **Root Props (`DropdownMenu`):**
- **`open`**: `boolean` — optional controlled state.
- **`defaultOpen`**: `boolean` — default: `false`.
- **`onOpenChange`**: `(open: boolean) => void` — optional callback.
- **`placement`**: `'auto' | 'top' | 'bottom'` — default: `'auto'`.
- **`className`**: `string` — optional.
- **Content Props (`DropdownMenuContent`):**
- **`side`**: `'auto' | 'left' | 'right'` — default: `'auto'`. Controls root horizontal direction.
- **`align`**: `'start' | 'end'` — default: `'start'`. Used as fallback preference when `side="auto"`.
- **`sideOffset`**: `number` — default: `8`. Gap between trigger and content.
- **Usage:**
```jsx
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent
} from '@stackloop/ui'
Open menuDashboardProductsNew ArrivalsCategoriesToolsHome console.log('Signed out')}>Sign out
```
**Tooltip**:
- **Description:** Portal-based tooltip for short hints and context text. It renders outside normal layout flow (so it does not affect element positioning), supports top/bottom/left/right placement, auto-flips when space is limited, and stays visible above overflow-clipped containers.
- **Props:**
- **`children`**: `ReactNode` — required. Trigger element.
- **`content`**: `ReactNode` — required. Tooltip body.
- **`side`**: `'top' | 'bottom' | 'left' | 'right'` — preferred side (default: `'bottom'`).
- **`offset`**: `number` — gap between trigger and tooltip (default: `10`).
- **`delay`**: `number` — open delay in ms (default: `120`).
- **`showArrow`**: `boolean` — default: `true`.
- **`arrowSize`**: `number` — default: `10`.
- **`open`**, **`defaultOpen`**, **`onOpenChange`** — controlled/uncontrolled visibility.
- **`className`**, **`arrowClassName`**, **`disabled`** — optional styling/behavior controls.
- **Usage:**
```jsx
import { Tooltip, Button } from '@stackloop/ui'
```
**Select**:
- **Description:** **Form-specific** select component with label, error, hint, and validation support. Specifically designed for use in forms with proper semantics, accessibility, and validation integration. Use this component when building forms. It includes form-focused features like `required`, hint text, and better integration with form libraries (React Hook Form, Formik, etc.).
- **Props:**
- **`options`**: `{ value: string; label: string; icon?: ReactNode; disabled?: boolean }[]` — required. Array of selectable options with optional icons and disabled state.
- **`value`**: `string` — optional. Currently selected value.
- **`onChange`**: `(value: string) => void` — required. Callback fired when selection changes.
- **`placeholder`**: `string` — default: `'Select an option'`. Shown when no value is selected.
- **`label`**: `string` — optional. Label displayed above the select.
- **`error`**: `string` — optional. Error message displayed below select with error styling.
- **`hint`**: `string` — optional. Helper text displayed below select when no error is present.
- **`searchable`**: `boolean` — default: `false`. Enables search input to filter options.
- **`clearable`**: `boolean` — default: `true`. Shows clear button when value is selected.
- **`required`**: `boolean` — optional. Displays asterisk (*) next to label and sets aria-required.
- **`disabled`**: `boolean` — optional. Disables the select.
- **`className`**: `string` — optional. Additional CSS classes for the wrapper.
- **Features:**
- **Form Integration:** Works seamlessly with form libraries (React Hook Form, Formik, etc.)
- **Validation Support:** Built-in error and hint display with animated transitions
- **Accessibility:** Full ARIA attributes, keyboard navigation, and screen reader support
- **Search:** Optional searchable mode with real-time filtering
- **Icons:** Support for icons in options for better visual recognition
- **Disabled Options:** Individual options can be disabled while keeping select active
- **Clearable:** Optional clear button to reset selection
- **Touch-Friendly:** Optimized for mobile with proper touch targets
- **Usage:**
```jsx
import { Select } from '@stackloop/ui'
import { User, Settings, Bell } from 'lucide-react'
// Basic usage
// With icons and search
},
{ value: 'settings', label: 'Settings', icon: },
{ value: 'notifications', label: 'Notifications', icon: , disabled: true }
]}
value={selected}
onChange={setSelected}
searchable
placeholder="Choose a page"
/>
// With error and hint
// With React Hook Form
import { useForm, Controller } from 'react-hook-form'
const { control, formState: { errors } } = useForm()
(
)}
/>
```
**MultiSelect**:
- **Description:** Multi-select component that allows selecting multiple items with chips display. Each selected item appears as a removable chip with an X button. Perfect for selecting multiple options like staff members, tags, skills, etc.
- **Props:**
- **`options`**: `{ value: string; label: string; icon?: ReactNode; disabled?: boolean }[]` — required. Array of selectable options with optional icons and disabled state.
- **`value`**: `string[]` — optional. Array of currently selected values (default: `[]`).
- **`onChange`**: `(values: string[]) => void` — required. Callback fired when selections change, receives array of selected values.
- **`placeholder`**: `string` — default: `'Select options...'`. Shown when no items are selected.
- **`label`**: `string` — optional. Label displayed above the multi-select.
- **`error`**: `string` — optional. Error message displayed below with error styling.
- **`hint`**: `string` — optional. Helper text displayed below when no error is present.
- **`searchable`**: `boolean` — default: `false`. Enables search input to filter options.
- **`clearable`**: `boolean` — default: `true`. Shows "Clear all" option in dropdown when items are selected.
- **`maxItems`**: `number` — optional. Maximum number of items that can be selected.
- **`chipVariant`**: `'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'` — default: `'primary'`. Styles for the selected item chips.
- **`required`**: `boolean` — optional. Displays asterisk (*) next to label and sets aria-required.
- **`disabled`**: `boolean` — optional. Disables the multi-select.
- **`className`**: `string` — optional. Additional CSS classes for the wrapper.
- **Features:**
- **Chips Display:** Selected items show as removable chips with X buttons inline in the button
- **Multi-Select:** Choose multiple items from a list with checkboxes in the dropdown
- **Form Integration:** Works seamlessly with form libraries (React Hook Form, Formik, etc.)
- **Validation Support:** Built-in error and hint display with animated transitions
- **Accessibility:** Full ARIA attributes, keyboard navigation, and screen reader support
- **Search:** Optional searchable mode with real-time filtering across all options
- **Icons:** Support for icons in options for better visual recognition
- **Disabled Options:** Individual options can be disabled
- **Max Items:** Optional limit on the number of items that can be selected
- **Clear All:** "Clear all" button in dropdown to remove all selected items at once
- **Remove Individual:** Click X on any chip to remove just that item
- **Touch-Friendly:** Optimized for mobile with proper touch targets
- **Usage:**
```jsx
import { MultiSelect } from '@stackloop/ui'
import { Users, Award, Code } from 'lucide-react'
// Basic multi-select for team members
const [selectedStaff, setSelectedStaff] = useState([])
// With icons and search
},
{ value: 'vue', label: 'Vue.js', icon: },
{ value: 'angular', label: 'Angular', icon: },
{ value: 'node', label: 'Node.js', icon: }
]}
value={skills}
onChange={setSkills}
searchable
placeholder="Select your skills"
/>
// With max items limit and chip styling
// With React Hook Form
import { useForm, Controller } from 'react-hook-form'
const { control, formState: { errors } } = useForm()
v?.length > 0 || 'Please select at least one assignee' }}
render={({ field }) => (
)}
/>
```
**BottomSheet**:
- **Description:** Mobile bottom sheet with header and optional close button.
- **Props:**
- **`isOpen`**: `boolean` — required.
- **`onClose`**: `() => void` — required.
- **`title`**: `string` — optional.
- **`children`**: `ReactNode` — required.
- **`showCloseButton`**: `boolean` — default: `true`.
- **`className`**: `string` — optional.
- **Usage:**
```jsx
import { BottomSheet } from '@stackloop/ui'
setOpen(false)} title="Actions">...
```
**DatePicker**:
- **Description:** Date picker with day grid, min/max date constraints, and fast custom month/year pickers.
- **Props:**
- **`value`**: `Date` — optional.
- **`onChange`**: `(date: Date) => void` — required.
- **`label`**: `string` — optional.
- **`required`**: `boolean` — optional. Shows required marker (`*`) and `aria-required`.
- **`placeholder`**: `string` — default: `'Select date'`.
- **`error`**: `string` — optional.
- **`hint`**: `string` — optional. Shown only when `error` is not present.
- **`disabled`**: `boolean` — optional.
- **`minDate`** / **`maxDate`**: `Date` — optional.
- **`animate`**: `boolean` — default: `true`.
- **`className`**: `string` — optional.
- **Features:**
- **Custom Month Menu:** Scrollable month dropdown/dropup (no native browser select).
- **Custom Year Menu:** Scrollable year dropdown/dropup that supports quick jumps across many years.
- **Adaptive Positioning:** Month/year menus open upward when there is insufficient viewport space below.
- **Usage:**
```jsx
import { DatePicker } from '@stackloop/ui'
```
**DualSlider**:
- **Description:** Two linked sliders showing relative portions.
- **Props:**
- **`value1`**, **`value2`**: `number` — required.
- **`onChange`**: `(v1:number, v2:number)=>void` — required.
- **`label1`**, **`label2`**: `string` — required.
- **`min`** (default `0`), **`max`** (default `100`), **`step`** (default `1`), **`unit`** (default `'%')`, **`disabled`**, **`className`**.
- **Usage:**
```jsx
import { DualSlider } from '@stackloop/ui'
{}} label1="A" label2="B" />
```
**Pagination**:
- **Description:** Pagination with previous/next and numeric buttons.
- **Props:**
- **`currentPage`**: `number` — required.
- **`totalPages`**: `number` — required.
- **`onPageChange`**: `(page:number)=>void` — required.
- **`totalItems`**, **`itemsPerPage`**, **`className`** — optional.
- **Usage:**
```jsx
import { Pagination } from '@stackloop/ui'
```
**Badge**:
- **Description:** Inline badge with color variants and optional dot.
- **Props:**
- **`children`**: `ReactNode` — required.
- **`variant`**: `'default'|'primary'|'success'|'warning'|'danger'|'info'` — default: `'default'`.
- **`size`**: `'sm'|'md'|'lg'` — default: `'md'`.
- **`dot`**: `boolean` — default: `false`.
- **`className`**: `string` — optional.
- **Usage:**
```jsx
import { Badge } from '@stackloop/ui'
New
```
**Spinner**:
- **Description:** Animated loading spinner with size variants and optional label.
- **Props:**
- **`size`**: `'sm' | 'md' | 'lg' | 'xl'` — default: `'md'`. Controls spinner dimensions (sm=16px, md=32px, lg=48px, xl=64px).
- **`variant`**: `'primary' | 'secondary' | 'white'` — default: `'primary'`. Color variant of the spinner.
- **`label`**: `string` — optional. Text displayed below spinner.
- **`className`**: `string` — optional. Additional CSS classes for the wrapper.
- **Usage:**
```jsx
import { Spinner } from '@stackloop/ui'
// Basic spinner
// With label
// Custom size and variant
// In a button
```
**Toast**:
- **Description:** Context-based toast notification system with variants, actions, and customizable positioning. Provides non-intrusive feedback messages that auto-dismiss.
- **Components:**
- **`ToastProvider`**: Wrapper component that manages toast state and rendering. Must wrap your app or components that use toasts.
- **`useToast`**: Hook to trigger toasts from any component within the provider.
- **ToastProvider Props:**
- **`children`**: `ReactNode` — required. Your app content.
- **`position`**: `'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'` — default: `'top-right'`. Where toasts appear on screen.
- **`maxToasts`**: `number` — default: `5`. Maximum number of toasts shown at once.
- **useToast() Returns:**
- **`addToast(toast)`**: Function to create a new toast notification.
- **`removeToast(id)`**: Function to manually dismiss a toast.
- **`toasts`**: Array of currently active toasts.
- **Toast Object:**
- **`message`**: `string` — required. Toast content text.
- **`variant`**: `'success' | 'error' | 'warning' | 'info' | 'default'` — optional (default: `'default'`). Visual style with corresponding icon.
- **`duration`**: `number` — optional (default: `5000`ms). Auto-dismiss time in milliseconds. Set to `0` for persistent toast.
- **`action`**: `{ label: string; onClick: () => void }` — optional. Action button within the toast.
- **Features:**
- **Auto-dismiss**: Toasts automatically disappear after duration
- **Manual dismiss**: Click X button or call `removeToast(id)`
- **Variants with icons**: Visual feedback with CheckCircle, AlertCircle, AlertTriangle, Info icons
- **Action buttons**: Add clickable actions to toasts
- **Animations**: Smooth enter/exit animations with Framer Motion
- **Position control**: Place toasts anywhere on screen
- **Max limit**: Prevents toast overflow
- **Responsive**: Adapts to mobile screens
- **Usage:**
```jsx
import { ToastProvider, useToast } from '@stackloop/ui'
// 1. Wrap your app with ToastProvider
function App() {
return (
)
}
// 2. Use toasts in any component
function MyComponent() {
const { addToast } = useToast()
const handleSuccess = () => {
addToast({
message: 'Profile updated successfully!',
variant: 'success',
duration: 3000
})
}
const handleError = () => {
addToast({
message: 'Failed to save changes',
variant: 'error',
duration: 5000
})
}
const handleWithAction = () => {
addToast({
message: 'New message received',
variant: 'info',
duration: 0, // Persistent until dismissed
action: {
label: 'View',
onClick: () => navigate('/messages')
}
})
}
const handleWarning = () => {
addToast({
message: 'Your session will expire in 5 minutes',
variant: 'warning'
})
}
return (
)
}
// 3. Bottom-centered positioning
```
**FloatingActionButton (FAB)**:
- **Description:** Floating action button with expanded action list support.
- **Props:**
- **`icon`**, **`label`**, **`onClick`**, **`actions`** (array of `{label, icon, onClick, variant, labelClassName?, labelStyle?}`) — optional.
- **`variant`**: `'primary'|'secondary'` — default: `'primary'`.
- **`position`**: `'bottom-right'|'bottom-left'|'bottom-center'` — default: `'bottom-right'`.
- **`disabled`**, **`className`**.
- **Action Props:**
- **`label`**: `string` — Action label text.
- **`icon`**: `ReactNode` — Icon for the action button.
- **`onClick`**: `() => void` — Action callback.
- **`variant`**: `'primary'|'success'|'danger'|'warning'` — Action button color variant.
- **`labelClassName`**: `string` — Custom CSS classes for the label (e.g., remove background: `'!bg-transparent !border-0 text-white'`).
- **`labelStyle`**: `CSSProperties` — Inline styles for the label.
- **Usage:**
```jsx
import { FloatingActionButton as FAB } from '@stackloop/ui'
// Simple FAB
{}} />
// FAB with actions and custom label styling
,
onClick: () => {},
variant: 'primary',
labelClassName: 'bg-blue-500 text-white border-blue-600'
},
{
label: 'Upload',
icon: ,
onClick: () => {},
variant: 'success',
labelClassName: '!bg-transparent !border-0 text-white shadow-none'
}
]}
/>
```
**AudioRecorder**:
- **Description:** Browser audio recorder component using MediaRecorder.
- **Props:**
- **`onRecordingComplete`**: `(audioBlob: Blob) => void` — required.
- **`label`**: `string` — default: `'Record Audio'`.
- **`maxDuration`**: `number` — default: `300` seconds.
- **`disabled`**, **`className`**.
- **Usage:**
```jsx
import { AudioRecorder } from '@stackloop/ui'
{ /* handle */ }} />
```
**Drawer**:
- **Description:** Side drawer that slides in from the left or right.
- **Props:**
- **`isOpen`**: `boolean` — required.
- **`onClose`**: `() => void` — required.
- **`children`**: `ReactNode` — required.
- **`title`**: `string` — optional.
- **`position`**: `'left'|'right'` — default: `'right'`.
- **`className`**: `string` — optional.
- **Usage:**
```jsx
import { Drawer } from '@stackloop/ui'
setOpen(false)} title="Menu">...
```
**Toggle**:
- **Description:** Switch control with label and description.
- **Props:**
- **`label`**: `string` — optional.
- **`description`**: `string` — optional.
- **`onChange`**: `(checked:boolean)=>void` — optional.
- **`className`**: `string` — optional.
- Inherits input attributes such as `checked`, `disabled`.
- **Usage:**
```jsx
import { Toggle } from '@stackloop/ui'
console.log(v)} />
```
**StatusBadges** (OfflineBadge, SyncIndicator):
- **OfflineBadge Props:** `isOffline: boolean` (required), `className?: string`.
- **SyncIndicator Props:** `status: 'synced'|'syncing'|'unsynced'|'error'` (required), `count?: number`, `className?: string`.
- **Usage:**
```jsx
import { OfflineBadge, SyncIndicator } from '@stackloop/ui'
```
**Slider**:
- **Description:** Single-value slider with optional unit and label.
- **Props:**
- **`value`**: `number` — required.
- **`onChange`**: `(value:number)=>void` — required.
- **`min`** (default `0`), **`max`** (default `100`), **`step`** (default `1`), **`label`**, **`showValue`** (default `true`), **`unit`** (default `'%')`, **`disabled`**, **`className`**.
- **Usage:**
```jsx
import { Slider } from '@stackloop/ui'
```
**RadioPills**:
- **Description:** Radio group styled as pill buttons.
- **Props:**
- **`options`**: `{ value: string; label: string; icon?: ReactNode }[]` — required.
- **`value`**: `string` — optional.
- **`onChange`**: `(v:string)=>void` — optional.
- **`name`**: `string` — required.
- **`disabled`**: `boolean` — optional.
- **`className`**: `string` — optional.
- **Usage:**
```jsx
import { RadioPills } from '@stackloop/ui'
```
**Textarea**:
- **Description:** Multiline input with label, error and helper text.
- **Props:**
- **`label`**: `string` — optional.
- **`error`**: `string` — optional.
- **`helperText`**: `string` — optional.
- **`className`**: `string` — optional.
- Inherits native `textarea` attributes.
- **Usage:**
```jsx
import { Textarea } from '@stackloop/ui'
```
**ThumbnailGrid**:
- **Description:** Grid to display thumbnails for images, documents, audio with optional remove/view actions.
- **Props:**
- **`items`**: `{ id, name, url, type:'image'|'document'|'audio', size? }[]` — required.
- **`onRemove`**: `(id:string)=>void` — optional.
- **`onView`**: `(item)=>void` — optional.
- **`columns`**: `2|3|4` — default: `3`.
- **`className`**.
- **Usage:**
```jsx
import { ThumbnailGrid } from '@stackloop/ui'
{}} />
```
**Accordion**:
- **Description:** Expandable/collapsible content sections with smooth animations. Supports single or multiple open items with customizable styling.
- **Props:**
- **`items`**: `{ id: string; title: string|ReactNode; content: string|ReactNode; disabled?: boolean; icon?: ReactNode }[]` — required.
- **`variant`**: `'default'|'bordered'` — default: `'default'`. Controls border styling (top border only for default, full border for bordered).
- **`allowMultiple`**: `boolean` — default: `false`. When `false`, only one item can be open at a time. When `true`, multiple items can be open.
- **`defaultOpen`**: `string[]` — default: `[]`. Array of item IDs that should be open initially.
- **`onChange`**: `(openItems: string[]) => void` — optional. Called whenever the open state changes.
- **`className`**: `string` — optional.
- **Features:**
- Smooth height and opacity animations on expand/collapse using Framer Motion.
- No rounded borders, only border-top styling for clean appearance.
- Optional icons support for each accordion item.
- Disabled state support for individual items.
- Hover effects and smooth transitions.
- **Usage:**
```jsx
import { Accordion } from '@stackloop/ui'
// Single open mode (default)
// Multiple open mode
},
{
id: 'section2',
title: 'Section 2',
content: 'Content 2'
}
]}
allowMultiple={true}
defaultOpen={['section1']}
onChange={(openItems) => console.log(openItems)}
/>
```
**Card**:
- **Description:** Generic card container with variants and content subcomponents.
- **Props:**
- **`children`**: `ReactNode` — required.
- **`variant`**: `'default'|'outlined'|'elevated'` — default: `'default'`.
- **`padding`**: `'sm'|'md'|'lg'|'none'` — default: `'md'`.
- **`onClick`**: `() => void` — optional.
- **`hover`**: `boolean` — default: `false`.
- **`className`**: `string` — optional.
- **Subcomponents:** `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`.
- **Usage:**
```jsx
import { Card, CardTitle, CardContent } from '@stackloop/ui'
TitleBody
```
**FileUpload (CameraCapture, FileUploader)**:
- **CameraCapture Props:** `onCapture(file:File) => void` (required), `onRemove?`, `preview?`, `label?`, `disabled?`, `className?`.
- **FileUploader Props:** `onUpload(files:File[]) => void` (required), `accept?` (default `'*/*'`), `multiple?` (default `false`), `label?`, `disabled?`, `className?`.
- **Usage:**
```jsx
import { FileUploader, CameraCapture } from '@stackloop/ui'
{}} multiple accept="image/*" />
{}} />
```
**StepProgress**:
- **Description:** Horizontal stepper (desktop) and compact dots view (mobile) showing progress.
- **Props:**
- **`steps`**: `{ label: string; description?: string }[]` — required.
- **`currentStep`**: `number` — required.
- **`className`**: optional.
- **Usage:**
```jsx
import { StepProgress } from '@stackloop/ui'
```
**CreditBar**:
- **Description:** Thin footer attribution bar for showing developer/company credit. Perfect for "Built with ❤️ by..." displays.
- **Props:**
- **`text`**: `string` — default: `'Built by StackLoop'`. The company/developer name to display.
- **`showHeart`**: `boolean` — default: `true`. Shows heart emoji in "Built with ❤️ by..." format.
- **`href`**: `string` — optional. Link URL to make the credit clickable.
- **`position`**: `'fixed' | 'relative' | 'sticky'` — default: `'fixed'`. Positioning of the bar.
- **`backgroundColor`**: `string` — default: `'bg-gray-900'`. Tailwind background class.
- **`textColor`**: `string` — default: `'text-gray-400'`. Tailwind text color class.
- **`className`**: `string` — optional. Additional CSS classes.
- **Usage:**
```jsx
import { CreditBar } from '@stackloop/ui'
// Simple usage with heart
// Displays: "Built with ❤️ by StackLoop"
// With link
// Without heart
// Custom styling
```
---
## Next.js Best Practices
### App Router
All components work seamlessly with Next.js 13+ App Router. They include the `'use client'` directive:
```tsx
// app/page.tsx
import { Button, Card } from '@stackloop/ui'
export default function Page() {
return (
)
}
```
### Server Components
To use these components with Server Components, import them in client components:
```tsx
// components/ClientWrapper.tsx
'use client'
import { Button } from '@stackloop/ui'
export function ClientButton() {
return
}
```
```tsx
// app/page.tsx (Server Component)
import { ClientButton } from '@/components/ClientWrapper'
export default function Page() {
return
}
```
### Styling Considerations
- The library uses Tailwind CSS v4 with `@theme` directive
- Ensure your Next.js project is configured for Tailwind CSS v4
- All animations use Framer Motion and are optimized for performance
## Browser Support
- Modern browsers (Chrome, Firefox, Safari, Edge)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Audio recording requires MediaRecorder API support
## License
MIT
---
For questions, issues, or contributions, please visit the [GitHub repository](https://github.com/AtutiBonface/@stackloop/ui).