Beta: needs approval. Mods are in beta: ask Lucra for access to install one. The tables below are generated from Lucra's
ui.json, so they always match what Lucra accepts.
A mod's tree may only use these components and props. Inputs keep their value in Lucra and send it, by the field's name, with every action. An action ID is any string your mod handles. A sticker name is one of Lucra's stickers.
Slots
| Slot | Where | Root |
|---|---|---|
creator.panel | A panel on a creator's sheet. | Section |
nav.page | A page of its own, with a tab in the brand workspace sidebar. | Section |
program.panel | A panel on a program's detail. | Section |
submission.panel | A panel on a submission's detail. | Section |
Components
| Component | Props | Children |
|---|---|---|
Avatar | text?: string, onClick?: action ID, ring?: "page" | "surface", shape?: "circle" | "rounded-square", size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | any |
AvatarFallback | text?: string, onClick?: action ID | any |
AvatarGroup | text?: string, onClick?: action ID, max?: number, ring?: "page" | "surface", size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl", total?: number | any |
AvatarImage | text?: string, onClick?: action ID, fallbackSeed?: string | any |
Badge | label: string, variant?: "default" | "secondary" | "outline" | "muted" | "success" | "warning" | "attention" | "destructive" | none |
Button | label: string, variant?: "default" | "secondary" | "outline" | "ghost", size?: "default" | "sm" | "lg", disabled?: boolean, action: action ID | none |
Calendar | none | none |
Card | text?: string, onClick?: action ID, size?: "default" | "media" | "sticker", radius?: "surface" | "card" | "sticker", tone?: "default" | "flat" | "sticker" | "outlined" | any |
CardButton | disabled?: boolean, text?: string, onClick?: action ID, radius?: "none" | "inherit" | "card" | "control", tone?: "surface" | "plain" | any |
CardContent | text?: string, onClick?: action ID | any |
CardMedia | text?: string, onClick?: action ID, radius?: "default" | "none" | "surface", tone?: "default" | "muted" | any |
Checkbox (input) | label: string, name: field name, value?: boolean | none |
Choice (input) | label: string, name: field name, value?: string, options: object[] | none |
DatePicker (input) | name: field name, autoComplete?: string, captionLayout?: "label" | "dropdown", defaultValue?: string, id: string, max?: string, min?: string, placeholder?: string, value?: string | none |
Empty | title: string, description?: string, sticker?: sticker name, size?: "page" | "compact" | none |
Footnote | text: string | none |
InfoTip | text?: string, label?: string | any |
InputGroup | text?: string, onClick?: action ID | any |
InputGroupAddon | text?: string, onClick?: action ID, align?: "inline-start" | "inline-end" | "block-start" | "block-end" | any |
InputGroupInput (input) | name: field name, disabled?: boolean, placeholder?: string, value?: value, text?: string, onClick?: action ID | any |
Kbd | text?: string, onClick?: action ID | any |
Label | text?: string, onClick?: action ID, variant?: "default" | "compact" | any |
LabelHint | text?: string | any |
LandingPicture | none | none |
List | none | Row |
LoadingBlock | label: string | none |
LogoTile | text?: string, decorative?: boolean, fallback?: string, fit?: "cover" | "contain", name: string, size?: "xs" | "sm" | "md" | "lg" | any |
LucraErrorState | description?: string, size?: "page" | "compact", title?: string | none |
LucraSheetActions | primary: object | none |
LucraSheetBody | text?: string, onClick?: action ID | any |
LucraSheetChoice | checked: boolean | none |
LucraSheetEmpty | description?: string, title: string | none |
LucraSheetIconButton | disabled?: boolean, text?: string, onClick?: action ID | any |
LucraSheetLoadingRow | label: string | none |
LucraSheetPending | description?: string, error?: value, label: string, title?: string | none |
LucraSheetPositionLines | currentIndex: number, label: string, onSelect?: action ID, pages: string[] | none |
LucraSheetRowAmount | value: string, state?: string, positive?: boolean | none |
LucraSheetTitle | actions?: string, backLabel?: string, backMode?: "step" | "leave", text?: string, closeLabel?: string, leading?: string, subtitle?: string, title: string | any |
LucraSheetToolbar | backLabel?: string, closeLabel?: string, leading?: string, title?: string | none |
Metric | label: string, value: string | none |
Metrics | none | Metric |
PageTransition | text?: string, routeKey: string | any |
Row | title: string, description?: string, trailing?: string, sticker?: sticker name, tone?: "default" | "destructive", action?: action ID | none |
ScrollMoreFrame | text?: string, onClick?: action ID | any |
Section | title?: string, count?: integer | any |
SectionHeader | as?: "h2" | "h3", description?: string, id?: string, title: string, truncate?: boolean | none |
SidebarNavCount | count: value, label: string | none |
Spinner | text?: string, onClick?: action ID, size?: value, strokeWidth?: value | any |
StickerHero | actions?: string, description?: string, size?: "status" | "page" | "sheet" | "compact" | "celebrate", sticker?: string, title: string, titleAs?: "h2" | "p" | "h1" | none |
SwapText | text: string | none |
Table | text?: string, onClick?: action ID, pagination?: value, pageSize?: number, sizing?: "fill" | "content" | any |
TableBody | text?: string, onClick?: action ID | any |
TableCell | text?: string, onClick?: action ID, tone?: "default" | "muted" | "emphasis", column?: "number" | "default" | "action" | "selection" | any |
TableContainer | text?: string, onClick?: action ID | any |
TableHead | text?: string, onClick?: action ID, align?: "center" | "end" | "start", column?: "number" | "default" | "action" | "selection" | any |
TableHeader | text?: string, onClick?: action ID | any |
TableRow | text?: string, onClick?: action ID, variant?: "default" | "subtle" | "interactive", leaving?: boolean | any |
TableRowActionItem | text?: string, onClick?: action ID, disabled?: boolean, variant?: "default" | "destructive" | any |
TableRowActionLabel | text?: string | any |
TableRowActions | text?: string, disabled?: boolean, enableContextMenu?: boolean, isolateRowEvents?: boolean, label: string, modal?: boolean, width?: "sm" | "md" | "lg" | "trigger" | any |
TableRowActionSeparator | text?: string, onClick?: action ID | any |
TableTabs (input) | name: field name, ariaControlsPrefix: string, ariaLabel: string, disabled?: boolean, items: object[], value: string | none |
TextArea (input) | label: string, name: field name, value?: string, placeholder?: string | none |
TextField (input) | label: string, name: field name, value?: string, placeholder?: string, type?: "text" | "email" | "url" | "number" | "tel" | none |
TruncateText | text?: string, lines?: 2 | 3 | any |
UrlInput (input) | name: field name, disabled?: boolean, placeholder?: string, value?: value, text?: string, onClick?: action ID, variant?: "default" | "auth" | any |
UrlLines (input) | name: field name, text?: string, onClick?: action ID, value: string, placeholder?: string, rows?: number, required?: boolean | any |
WorkspaceDataSurface | text?: string, toolbar?: string | any |
WorkspaceToolbar | text?: string | any |