Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Clickable rows with text, optional labels, and images that perform a single action. Use for navigation menus, link lists, and action-oriented interfaces.
Basic Usage
Text Styles
Choose between title (bold/semibold) and field (normal/medium) text styles to create visual hierarchy.
With Circle Images
Circle images work great for user profiles, avatars, or personal content.
Link List
Create lists of external links with proper target="_blank" handling and automatic chevron indicators.
Multiple Actions on a Screen
Group related actions for the same piece of content — for example, different things a user can do with a recipe.
Card Variant
Display action rows as individual cards instead of a list with separators.
API Reference
ActionRowItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | Required. Main text content |
label | string | - | Secondary text below main text |
image | string | - | Image URL |
imageAlt | string | - | Alt text for image (defaults to text) |
id | string | number | - | Unique identifier |
textStyle | "title" | "field" | "title" | Text weight (title=bold, field=normal) |
imageStyle | "square" | "circle" | "square" | Image shape |
imagePosition | "left" | "right" | "left" | Image placement |
href | string | - | Navigation URL (renders as link) |
onClick | () => void | - | Click handler (renders as button) |
target | "_blank" | "_self" | "_self" | Link target (with proper rel) |
ariaLabel | string | - | Custom ARIA label for accessibility |
ActionRowItemProps (Component)
| Prop | Type | Default | Description |
|---|---|---|---|
item | ActionRowItem | - | Required. Action row data |
size | "default" | "compact" | "default" | Size variant |
variant | "default" | "card" | "default" | Visual variant |
textStyle | "title" | "field" | "title" | Default text style (item can override) |
imageStyle | "square" | "circle" | "square" | Default image style (item can override) |
imagePosition | "left" | "right" | "left" | Default image position (item can override) |
showChevron | boolean | false | Show chevron icon (auto-shown for links) |
onClick | () => void | - | Additional click handler |
as | "div" | "article" | "article" | Root element (when not link/button) |
classNames | object | - | Custom class names for sub-elements |
ActionRowCollectionProps
| Prop | Type | Default | Description |
|---|---|---|---|
items | ActionRowItem[] | - | Required. Array of action row items |
size | "default" | "compact" | "default" | Size for all items |
variant | "default" | "card" | "default" | Visual variant (default=separators, card=individual cards) |
textStyle | "title" | "field" | "title" | Default text style for all items |
imageStyle | "square" | "circle" | "square" | Default image style for all items |
imagePosition | "left" | "right" | "left" | Default image position for all items |
showChevron | boolean | false | Show chevron for all items |
limit | number | - | Limit number of displayed items |
onItemClick | (item, index) => void | - | Click handler for all items |
className | string | - | Custom class name |