​

Widget System

​

Quick Start

<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 - Flexible container with styling
• Row - Horizontal flex layout
• Col - Vertical flex layout
• Card - Styled card with shadow and gradients
• Spacer - Flexible spacing
• Divider - Visual separator

​

Typography

• Text - Basic text with styling
• Title - Headings (h1-h6)
• Caption - Small descriptive text
• Label - Form labels
• Markdown - Render markdown content

​

Form Components

• Button - Interactive button
• Input - Text input field
• Textarea - Multi-line text input
• Select - Dropdown selection
• Checkbox - Checkbox input
• RadioGroup - Radio button group
• DatePicker - Date selection
• Form - Form container with context

​

Media Components

• Image - Display images
• Icon - Lucide icons
• Badge - Status badges
• Chart - Data visualization

​

Template Syntax

​

Basic Usage

<Text value="Static text" />

​

Data Binding

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

​

Conditional Rendering

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

​

Lists and Iteration

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

​

Next Steps

• Template Syntax Guide
• Data Binding
• Actions & Events
• Example Widgets