Component Reference
Complete reference for all 18 Cookest UI components — React and Flutter side by side.
Component Reference
Every component is available in both React and Flutter with matching visual output and similar API patterns.
Button
Triggers actions. Supports four variants, three sizes, loading state, and icon slots.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Variant | variant | variant | primary, secondary, ghost, danger |
| Size | size | size | sm, md, lg |
| Loading | loading | loading | boolean / bool |
| Full width | fullWidth | fullWidth | boolean / bool |
| Leading icon | iconLeft | iconLeft | ReactNode / Widget |
| Trailing icon | iconRight | iconRight | ReactNode / Widget |
Input
Text field with label, validation, and icon support.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Label | label | label | string / String |
| Placeholder | placeholder | placeholder | string / String |
| Error | error | error | string / String |
| Helper text | helperText | helperText | string / String |
| Size | inputSize | inputSize | sm, md, lg |
Textarea
Multi-line text input mirroring the Input visual language.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Label | label | label | string / String |
| Max length | maxLength | maxLength | number / int |
| Show count | showCount | showCount | boolean / bool |
| Auto resize | autoResize | — | boolean |
| Min rows | minRows | minLines | number / int |
| Max rows | maxRows | maxLines | number / int |
| Size | inputSize | inputSize | sm, md, lg |
Card
Container with optional header, body, and footer sections.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Variant | variant | variant | default/standard, interactive, outlined |
| Padding | padding | padding | none, sm, md, lg |
Sub-components: CardHeader / CkCardHeader, CardBody / CkCardBody, CardFooter / CkCardFooter
Badge
Small label for statuses and tags.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Variant | variant | variant | default/standard, success, warning, error, info |
| Size | size | size | sm, md, lg |
| Dot | dot | dot | boolean / bool |
| Removable | removable | removable | boolean / bool |
Avatar
User image with initials fallback and group layout.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Image | src | imageUrl | URL string |
| Alt text | alt | alt | string / String |
| Size | size | size | xs, sm, md, lg, xl |
Group: AvatarGroup / CkAvatarGroup with max prop for overflow count.
Modal
Dialog overlay with backdrop, transitions, and close behavior.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Title | title | title | string / String |
| Size | size | size | sm, md, lg |
| Close on backdrop | closeOnBackdrop | closeOnBackdrop | boolean / bool |
| Footer | footer | footer | ReactNode / Widget |
Tooltip
Hover/focus hint with directional positioning.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Content | content | message | string / String |
| Position | position | position | top, bottom, left, right |
| Delay | delay (ms) | waitDuration | number / Duration |
Toggle
Switch control with label and description.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Checked | checked | value | boolean / bool |
| Label | label | label | string / String |
| Description | description | description | string / String |
| Size | toggleSize | toggleSize | sm, md, lg |
Select
Dropdown with search support.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Options | options | options | SelectOption[] / List<CkSelectOption> |
| Value | value | value | string / String |
| Searchable | searchable | searchable | boolean / bool |
| Placeholder | placeholder | placeholder | string / String |
Skeleton
Loading placeholders.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Variant | variant | variant | text, circular, rectangular |
| Lines | lines | lines | number / int |
Presets: SkeletonCard / CkSkeletonCard — full card loading placeholder.
Alert
Glassmorphism notification banner with colored accent bar and ambient shadow.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Variant | variant | variant | info, success, warning, error |
| Size | size | — | sm, md, lg |
| Title | title | title | string / String |
| Dismissible | dismissible | dismissible | boolean / bool |
| Icon | icon | icon | ReactNode / Widget |
| Visible | visible | — | boolean |
The React Alert uses
backdrop-blur-sm, a 4px colored left accent bar, andshadow-{color}/15ambient shadows for depth.
Divider
Visual separator.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Orientation | orientation | orientation | horizontal, vertical |
| Label | label | label | string / String |
Slider
Range input with track, custom thumb, and optional marks.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Value | value | value | number / double |
| Min / Max | min, max | min, max | number / double |
| Step | step | step | number / double |
| Color | color | color | primary, blue, amber, rose |
| Size | size | size | sm, md, lg |
| Show value | showValue | showValue | boolean / bool |
| Marks | marks | marks | SliderMark[] / List<CkSliderMark> |
| Disabled | disabled | disabled | boolean / bool |
Progress
Progress bar — determinate or indeterminate.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Value | value | value | number 0–100 / double (null = indeterminate) |
| Color | color | color | primary, blue, amber, rose, green |
| Size | size | size | sm, md, lg |
| Striped | striped | striped | boolean / bool |
| Animated | animated | animated | boolean / bool |
| Show label | showLabel | showLabel | boolean / bool |
Spinner
Animated loading ring with a breathing dual-arc design.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Color | color | color | primary, blue, amber, rose, white, muted |
| Size | size | size | sm, md, lg, xl |
| Stroke width | strokeWidth | strokeWidth | number / double |
Tabs
Tab navigation with animated indicator.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Variant | variant | variant | underline, pills, boxed |
| Items | items | items | TabItem[] / List<CkTabItem> |
| Default tab | defaultTab | initialTab | string / String |
| Full width | fullWidth | fullWidth | boolean / bool |
| On change | onChange | onChanged | (id: string) => void / ValueChanged<String> |
TabItem / CkTabItem fields: id, label, icon?, badge?, content?
Accordion
Animated expandable panels.
| Prop / Param | React | Flutter | Values |
|---|---|---|---|
| Variant | variant | variant | default, bordered, separated |
| Multiple | multiple | multiple | boolean / bool |
| Default open | defaultOpen | defaultOpen | string[] / Set<String> |
| Items | items | items | AccordionItem[] / List<CkAccordionItem> |
AccordionItem / CkAccordionItem fields: id, title, content, subtitle?, icon?, disabled?