> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget System Overview

> Build dynamic, data-driven UI components with our widget system

# Widget System

The LyznFlow widget system allows you to create dynamic, reusable UI components using a JSX-like template syntax. Widgets are compiled server-side and rendered on both web and mobile platforms.

## Quick Start

```jsx theme={null}
<Card padding="lg" radius="lg">
  <Title level={1} value="Hello World" />
  <Text value="This is a simple widget" />
  <Button label="Click Me" variant="primary" />
</Card>
```

## Key Features

* **Cross-Platform**: Write once, render on web and React Native
* **Data Binding**: Dynamic templates with JavaScript expressions
* **Type-Safe**: Full TypeScript support
* **Themeable**: Built-in light/dark mode support
* **Composable**: Nest components to build complex UIs

## Component Categories

### Layout Components

* [Box](/widgets/components/layout/box) - Flexible container with styling
* [Row](/widgets/components/layout/row) - Horizontal flex layout
* [Col](/widgets/components/layout/col) - Vertical flex layout
* [Card](/widgets/components/layout/card) - Styled card with shadow and gradients
* [Spacer](/widgets/components/layout/spacer) - Flexible spacing
* [Divider](/widgets/components/layout/divider) - Visual separator

### Typography

* [Text](/widgets/components/typography/text) - Basic text with styling
* [Title](/widgets/components/typography/title) - Headings (h1-h6)
* [Caption](/widgets/components/typography/caption) - Small descriptive text
* [Label](/widgets/components/typography/label) - Form labels
* [Markdown](/widgets/components/typography/markdown) - Render markdown content

### Form Components

* [Button](/widgets/components/forms/button) - Interactive button
* [Input](/widgets/components/forms/input) - Text input field
* [Textarea](/widgets/components/forms/textarea) - Multi-line text input
* [Select](/widgets/components/forms/select) - Dropdown selection
* [Checkbox](/widgets/components/forms/checkbox) - Checkbox input
* [RadioGroup](/widgets/components/forms/radio) - Radio button group
* [DatePicker](/widgets/components/forms/datepicker) - Date selection
* [Form](/widgets/components/forms/form) - Form container with context

### Media Components

* [Image](/widgets/components/media/image) - Display images
* [Icon](/widgets/components/media/icon) - Lucide icons
* [Badge](/widgets/components/media/badge) - Status badges
* [Chart](/widgets/components/media/chart) - Data visualization

## Template Syntax

### Basic Usage

```jsx theme={null}
<Text value="Static text" />
```

### Data Binding

```jsx theme={null}
<Text value={userName} />
<Title level={2} value={`Hello, ${userName}!`} />
```

### Conditional Rendering

```jsx theme={null}
{isLoggedIn && <Text value="Welcome back!" />}
{status === "active" ? <Badge color="green" /> : <Badge color="gray" />}
```

### Lists and Iteration

```jsx theme={null}
{tasks.map((task) => (
  <Row key={task.id}>
    <Checkbox checked={task.completed} />
    <Text value={task.title} />
  </Row>
))}
```

## Next Steps

* [Template Syntax Guide](/widgets/api/template-syntax)
* [Data Binding](/widgets/api/data-binding)
* [Actions & Events](/widgets/api/actions)
* [Example Widgets](/widgets/examples/task-list)