OpenUI
OpenUI is a full-stack Generative UI framework — a compact streaming-first language, a React runtime with built-in component libraries, and ready-to-use chat interfaces — that is up to 67% more token-efficient than JSON.
Most AI applications are limited to returning text (as markdown) or rendering pre-built UI responses. Markdown isn't interactive, and pre-built responses are rigid (they don't adapt to the context of the conversation).
Generative UI fundamentally changes this relationship. Instead of merely providing content, the AI composes the interface itself. It dynamically selects, configures, and composes components from a predefined library to create a purpose-built interface tailored to the user's immediate request, be it an interactive chart, a complex form, or a multi-tab dashboard.
OpenUI is the Generative UI framework powering Mitigate's chat interface. To enable it, select OpenUI as the Output Format in your workspace settings.
Examples
E-commerce
root = Stack([carousel])carousel = Carousel([product1, product2, product3, product4, product5], "card")product1 = Stack([img1, md1, meta1, cart1], "column", "l")img1 = Image("Wireless Headphones", "/docs/openui/wireless-headphones.png")md1 = MarkDownRenderer("## Wireless Headphones\nPremium sound quality with active noise cancellation")meta1 = Stack([code1, price1], "row", "s", "center", "between")code1 = TextContent("10-01-0002", "small")price1 = MarkDownRenderer("**€ 249.00**")cart1 = AddToCartForm("wireless-headphones", "Add to Cart", 1, 1, 10)product2 = Stack([img2, md2, meta2, cart2], "column", "l")img2 = Image("Bluetooth Speaker", "/docs/openui/bluetooth-speaker.png")md2 = MarkDownRenderer("## Bluetooth Speaker\nPortable audio with 20 hours of battery life")meta2 = Stack([code2, price2], "row", "s", "center", "between")code2 = TextContent("10-01-0017", "small")price2 = MarkDownRenderer("**€ 89.50**")cart2 = AddToCartForm("bluetooth-speaker", "Add to Cart", 1, 1, 10)product3 = Stack([img3, md3, meta3, cart3], "column", "l")img3 = Image("USB-C Hub", "/docs/openui/usb-c-hub.png")md3 = MarkDownRenderer("## USB-C Hub\nMulti-port connectivity for HDMI, USB-A and SD cards")meta3 = Stack([code3, price3], "row", "s", "center", "between")code3 = TextContent("10-02-0043", "small")price3 = MarkDownRenderer("**€ 64.90**")cart3 = AddToCartForm("usb-c-hub", "Add to Cart", 1, 1, 10)product4 = Stack([img4, md4, meta4, cart4], "column", "l")img4 = Image("Mechanical Keyboard", "/docs/openui/mechanical-keyboard.png")md4 = MarkDownRenderer("## Mechanical Keyboard\nTactile typing experience with hot-swappable switches")meta4 = Stack([code4, price4], "row", "s", "center", "between")code4 = TextContent("10-03-0011", "small")price4 = MarkDownRenderer("**€ 159.00**")cart4 = AddToCartForm("mechanical-keyboard", "Add to Cart", 1, 1, 10)product5 = Stack([img5, md5, meta5, cart5], "column", "l")img5 = Image("Laptop Stand", "/docs/openui/laptop-stand.png")md5 = MarkDownRenderer("## Laptop Stand\nErgonomic design")meta5 = Stack([code5, price5], "row", "s", "center", "between")code5 = TextContent("10-04-0008", "small")price5 = MarkDownRenderer("**€ 47.53**")cart5 = AddToCartForm("laptop-stand", "Add to Cart", 1, 1, 10)Kanban Board
root = Stack([header, board])header = Card([headerButtons], "clear", "row", "none", "center", "between")headerButtons = Buttons([addBtn, filterBtn], "row")addBtn = Button("+ Add Task", Action([@ToAssistant("Add a new task to the kanban board")]), "primary", "normal", "small")filterBtn = Button("Filter", Action([@ToAssistant("Filter tasks on the kanban board")]), "secondary", "normal", "small")board = Stack([todoCol, inProgressCol, doneCol], "row", "m", "start")todoCol = Card([todoHeader, todoSep, todo1, todo2, todo3, todo4], "sunk", "column", "s")todoHeader = Stack([todoLabel, todoBadge], "row", "s", "center", "between")todoLabel = TextContent("📋 To Do", "small-heavy")todoBadge = Tag("4", null, "sm", "neutral")todoSep = Separator("horizontal")todo1 = Card([todo1Header, todo1Tags, todo1Footer], "card", "column", "xs")todo1Header = CardHeader("Redesign login page", "Update UI to match new brand guidelines")todo1Tags = TagBlock(["UI", "Design"])todo1Footer = Buttons([Button("Move →", Action([@ToAssistant("Move 'Redesign login page' to In Progress")]), "tertiary", "normal", "extra-small")], "row")todo2 = Card([todo2Header, todo2Tags, todo2Footer], "card", "column", "xs")todo2Header = CardHeader("Set up CI/CD pipeline", "Automate build and deploy process")todo2Tags = TagBlock(["DevOps", "Backend"])todo2Footer = Buttons([Button("Move →", Action([@ToAssistant("Move 'Set up CI/CD pipeline' to In Progress")]), "tertiary", "normal", "extra-small")], "row")todo3 = Card([todo3Header, todo3Tags, todo3Footer], "card", "column", "xs")todo3Header = CardHeader("Write API documentation", "Document all REST endpoints")todo3Tags = TagBlock(["Docs", "API"])todo3Footer = Buttons([Button("Move →", Action([@ToAssistant("Move 'Write API documentation' to In Progress")]), "tertiary", "normal", "extra-small")], "row")todo4 = Card([todo4Header, todo4Tags, todo4Footer], "card", "column", "xs")todo4Header = CardHeader("Accessibility audit", "Ensure WCAG 2.1 compliance")todo4Tags = TagBlock(["QA", "Design"])todo4Footer = Buttons([Button("Move →", Action([@ToAssistant("Move 'Accessibility audit' to In Progress")]), "tertiary", "normal", "extra-small")], "row")inProgressCol = Card([inProgressHeader, inProgressSep, inp1, inp2, inp3], "sunk", "column", "s")inProgressHeader = Stack([inProgressLabel, inProgressBadge], "row", "s", "center", "between")inProgressLabel = TextContent("🔄 In Progress", "small-heavy")inProgressBadge = Tag("3", null, "sm", "info")inProgressSep = Separator("horizontal")inp1 = Card([inp1Header, inp1Tags, inp1Footer], "card", "column", "xs")inp1Header = CardHeader("User authentication module", "JWT-based auth with refresh tokens")inp1Tags = TagBlock(["Backend", "Security"])inp1Footer = Buttons([Button("← Back", Action([@ToAssistant("Move 'User authentication module' back to To Do")]), "tertiary", "normal", "extra-small"), Button("Move →", Action([@ToAssistant("Move 'User authentication module' to Done")]), "tertiary", "normal", "extra-small")], "row")inp2 = Card([inp2Header, inp2Tags, inp2Footer], "card", "column", "xs")inp2Header = CardHeader("Dashboard analytics", "Build charts and KPI widgets")inp2Tags = TagBlock(["Frontend", "Data"])inp2Footer = Buttons([Button("← Back", Action([@ToAssistant("Move 'Dashboard analytics' back to To Do")]), "tertiary", "normal", "extra-small"), Button("Move →", Action([@ToAssistant("Move 'Dashboard analytics' to Done")]), "tertiary", "normal", "extra-small")], "row")inp3 = Card([inp3Header, inp3Tags, inp3Footer], "card", "column", "xs")inp3Header = CardHeader("Mobile responsive layout", "Ensure all pages work on small screens")inp3Tags = TagBlock(["Frontend", "UI"])inp3Footer = Buttons([Button("← Back", Action([@ToAssistant("Move 'Mobile responsive layout' back to To Do")]), "tertiary", "normal", "extra-small"), Button("Move →", Action([@ToAssistant("Move 'Mobile responsive layout' to Done")]), "tertiary", "normal", "extra-small")], "row")doneCol = Card([doneHeader, doneSep, done1, done2, done3], "sunk", "column", "s")doneHeader = Stack([doneLabel, doneBadge], "row", "s", "center", "between")doneLabel = TextContent("✅ Done", "small-heavy")doneBadge = Tag("3", null, "sm", "success")doneSep = Separator("horizontal")done1 = Card([done1Header, done1Tags], "card", "column", "xs")done1Header = CardHeader("Project setup & scaffolding", "Repo, folder structure, and tooling")done1Tags = TagBlock(["DevOps", "Setup"])done2 = Card([done2Header, done2Tags], "card", "column", "xs")done2Header = CardHeader("Database schema design", "ERD and migration scripts")done2Tags = TagBlock(["Backend", "Database"])done3 = Card([done3Header, done3Tags], "card", "column", "xs")done3Header = CardHeader("Wireframes approved", "All screens signed off by stakeholders")done3Tags = TagBlock(["Design", "Planning"])Layout
Stack
root = Stack([a, b, c], "row", "m")a = TextContent("Item 1")b = TextContent("Item 2")c = TextContent("Item 3")Tabs
root = Tabs([tabReact, tabVue])tabReact = TabItem("react", "React", reactContent)tabVue = TabItem("vue", "Vue", vueContent)reactContent = [TextContent("React is a library by Meta for building UIs."), Callout("info", "Note", "React uses JSX syntax.")]vueContent = [TextContent("Vue is a progressive framework by Evan You."), Callout("success", "Tip", "Vue has a gentle learning curve.")]Accordion
root = Accordion([acc1, acc2, acc3])acc1 = AccordionItem("getting-started", "Getting Started", [TextContent("Follow the installation guide to get started.")])acc2 = AccordionItem("configuration", "Configuration", [TextContent("Configure your project settings in the config file.")])acc3 = AccordionItem("deployment", "Deployment", [TextContent("Deploy your app to production with a single command.")])Steps
root = Steps([step1, step2, step3])step1 = StepsItem("Install", "Run npm install to add dependencies.")step2 = StepsItem("Configure", "Set up your configuration file.")step3 = StepsItem("Deploy", "Push to production.")Carousel
root = Carousel([[slide1], [slide2], [slide3]])slide1 = TextContent("Slide 1: Welcome to OpenUI")slide2 = TextContent("Slide 2: Build beautiful interfaces")slide3 = TextContent("Slide 3: Ship with confidence")Separator
root = Stack([above, sep, below])above = TextContent("Content above")sep = Separator()below = TextContent("Content below")Modal
root = Stack([openBtn, modal])openBtn = Buttons([Button("Open Modal", Action([@Set($showModal, true)]), "primary")])modal = Modal("Example Modal", $showModal, [body], "md")body = Stack([TextContent("This is the content inside the modal."), modalBtns])modalBtns = Buttons([Button("Close", Action([@Set($showModal, false)]), "secondary")])Content
Card
root = Card([header, body])header = CardHeader("Example Card", "A subtitle for the card")body = TextContent("This is card content with a description.")TextContent
root = Stack([t1, t2, t3, t4, t5])t1 = TextContent("Large Heavy Text", "large-heavy")t2 = TextContent("Large text", "large")t3 = TextContent("Default sized text content")t4 = TextContent("Small heavy text", "small-heavy")t5 = TextContent("Small text", "small")MarkDownRenderer
root = MarkDownRenderer("# Heading\n\nA paragraph with **bold** and *italic* text.\n\n- Item one\n- Item two\n- Item three\n\n```js\nconsole.log(\"hello\")\n```")Callout
root = Stack([c1, c2, c3, c4, c5])c1 = Callout("info", "Information", "This is an informational callout.")c2 = Callout("success", "Success", "Operation completed successfully.")c3 = Callout("warning", "Warning", "Please review before proceeding.")c4 = Callout("error", "Error", "Something went wrong.")c5 = Callout("neutral", "Neutral", "A neutral message.")TextCallout
root = Stack([c1, c2, c3, c4, c5])c1 = TextCallout("neutral", "Neutral", "A neutral message.")c2 = TextCallout("info", "Info", "A short informational message.")c3 = TextCallout("success", "Success", "Action completed.")c4 = TextCallout("warning", "Warning", "Be careful with this action!")c5 = TextCallout("danger", "Danger", "This action is destructive.")Image
Default aspect ratio 3:2 and scale fill:
root = Image("Landscape image", "/docs/openui/landscape-imageblock.png")Aspect ratio 16:9:
root = Image("Landscape image", "/docs/openui/landscape-imageblock.png", "16:9")Aspect ratio 4:3:
root = Image("Landscape image", "/docs/openui/landscape-imageblock.png", "4:3")Aspect ratio 4:3 with scale fill, the default, which crops the image to the frame:
root = Image("Landscape image cropped to the frame", "/docs/openui/landscape-imageblock.png", "4:3", "fill")Aspect ratio 4:3 with scale fit, which shows the whole image inside the frame:
root = Image("Landscape image fitted into the frame", "/docs/openui/landscape-imageblock.png", "4:3", "fit")ImageBlock
root = ImageBlock("/docs/openui/landscape-imageblock.png", "A captioned image")ImageGallery
root = ImageGallery([{ src: "/docs/openui/gallery-photo-1.png", alt: "Photo 1" }, { src: "/docs/openui/gallery-photo-2.png", alt: "Photo 2" }, { src: "/docs/openui/gallery-photo-3.png", alt: "Photo 3" }])CodeBlock
root = CodeBlock("javascript", "const greeting = \"Hello, World!\";\nconsole.log(greeting);\n\nfunction add(a, b) {\n return a + b;\n}")Tables
Table
root = Stack([searchRow, tbl])$search = ""$sortField = "country"filtered = @Filter(rows, "country", "contains", $search)sorted = @Sort(filtered, $sortField, "asc")searchRow = Stack([searchInput, sortSelect], "row", "m", "center")searchInput = FormControl("Search", Input("search", "Filter by country...", "text", null, $search))sortSelect = FormControl("Sort by", Select("sort", sortOpts, "Sort by...", null, $sortField))sortOpts = [SelectItem("country", "Country"), SelectItem("capital", "Capital"), SelectItem("population", "Population"), SelectItem("continent", "Continent"), SelectItem("gdp", "GDP (USD B)")]tbl = Table([colCountry, colCapital, colPop, colContinent, colGdp, colStatus])colCountry = Col("Country", sorted.country)colCapital = Col("Capital", sorted.capital)colPop = Col("Population (M)", sorted.population, "number")colContinent = Col("Continent", sorted.continent)colGdp = Col("GDP (USD B)", sorted.gdp, "number")colStatus = Col("Status", @Each(sorted, "r", Tag(r.status, null, "sm", r.status == "Developed" ? "success" : r.status == "Emerging" ? "warning" : "info")))rows = [{country: "United States", capital: "Washington D.C.", population: 331, continent: "Americas", gdp: 25462, status: "Developed"}, {country: "China", capital: "Beijing", population: 1412, continent: "Asia", gdp: 17963, status: "Emerging"}, {country: "Germany", capital: "Berlin", population: 83, continent: "Europe", gdp: 4072, status: "Developed"}, {country: "India", capital: "New Delhi", population: 1393, continent: "Asia", gdp: 3385, status: "Emerging"}, {country: "Brazil", capital: "Brasília", population: 214, continent: "Americas", gdp: 1920, status: "Emerging"}, {country: "France", capital: "Paris", population: 68, continent: "Europe", gdp: 2778, status: "Developed"}, {country: "Japan", capital: "Tokyo", population: 125, continent: "Asia", gdp: 4231, status: "Developed"}, {country: "Australia", capital: "Canberra", population: 26, continent: "Oceania", gdp: 1693, status: "Developed"}, {country: "Nigeria", capital: "Abuja", population: 218, continent: "Africa", gdp: 477, status: "Developing"}, {country: "Canada", capital: "Ottawa", population: 38, continent: "Americas", gdp: 2140, status: "Developed"}, {country: "South Korea", capital: "Seoul", population: 52, continent: "Asia", gdp: 1665, status: "Developed"}, {country: "Mexico", capital: "Mexico City", population: 130, continent: "Americas", gdp: 1293, status: "Emerging"}, {country: "Italy", capital: "Rome", population: 60, continent: "Europe", gdp: 1997, status: "Developed"}, {country: "Argentina", capital: "Buenos Aires", population: 45, continent: "Americas", gdp: 630, status: "Emerging"}, {country: "Egypt", capital: "Cairo", population: 104, continent: "Africa", gdp: 387, status: "Developing"}, {country: "South Africa", capital: "Pretoria", population: 60, continent: "Africa", gdp: 405, status: "Developing"}, {country: "United Kingdom", capital: "London", population: 67, continent: "Europe", gdp: 3070, status: "Developed"}, {country: "Spain", capital: "Madrid", population: 47, continent: "Europe", gdp: 1418, status: "Developed"}, {country: "Indonesia", capital: "Jakarta", population: 273, continent: "Asia", gdp: 1319, status: "Emerging"}, {country: "Turkey", capital: "Ankara", population: 85, continent: "Europe", gdp: 906, status: "Emerging"}]Charts
BarChart
Grouped
root = BarChart(labels, [s1, s2], "grouped")labels = ["Oct", "Nov", "Dec"]s1 = Series("Product A", [120, 150, 180])s2 = Series("Product B", [90, 110, 140])Stacked
root = BarChart(labels, [s1, s2], "stacked")labels = ["Oct", "Nov", "Dec"]s1 = Series("Product A", [120, 150, 180])s2 = Series("Product B", [90, 110, 140])LineChart
Linear
root = LineChart(labels, [s1, s2], "linear")labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]s1 = Series("Visitors", [1200, 1900, 3000, 5000, 4200, 5500])s2 = Series("Page Views", [3600, 5700, 9000, 15000, 12600, 16500])Natural
root = LineChart(labels, [s1, s2], "natural")labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]s1 = Series("Visitors", [1200, 1900, 3000, 5000, 4200, 5500])s2 = Series("Page Views", [3600, 5700, 9000, 15000, 12600, 16500])Step
root = LineChart(labels, [s1, s2], "step")labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]s1 = Series("Visitors", [1200, 1900, 3000, 5000, 4200, 5500])s2 = Series("Page Views", [3600, 5700, 9000, 15000, 12600, 16500])AreaChart
Linear
root = AreaChart(labels, [s1, s2], "linear")labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]s1 = Series("Visitors", [1200, 1900, 3000, 5000, 4200, 5500])s2 = Series("Page Views", [3600, 5700, 9000, 15000, 12600, 16500])Natural
root = AreaChart(labels, [s1, s2], "natural")labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]s1 = Series("Visitors", [1200, 1900, 3000, 5000, 4200, 5500])s2 = Series("Page Views", [3600, 5700, 9000, 15000, 12600, 16500])Step
root = AreaChart(labels, [s1, s2], "step")labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]s1 = Series("Visitors", [1200, 1900, 3000, 5000, 4200, 5500])s2 = Series("Page Views", [3600, 5700, 9000, 15000, 12600, 16500])RadarChart
root = RadarChart(labels, [s1, s2])labels = ["Frontend", "Backend", "DevOps", "Design", "Testing"]s1 = Series("Alice", [90, 70, 60, 80, 75])s2 = Series("Bob", [60, 90, 80, 50, 85])HorizontalBarChart
Grouped
root = HorizontalBarChart(labels, [s1, s2], "grouped")labels = ["Alice", "Bob", "Carol", "Dave"]s1 = Series("Tasks Completed", [42, 38, 55, 29])s2 = Series("Tasks Pending", [8, 12, 5, 21])Stacked
root = HorizontalBarChart(labels, [s1, s2], "stacked")labels = ["Alice", "Bob", "Carol", "Dave"]s1 = Series("Tasks Completed", [42, 38, 55, 29])s2 = Series("Tasks Pending", [8, 12, 5, 21])PieChart
Pie
root = PieChart(["Chrome", "Safari", "Firefox", "Other"], [65, 18, 10, 7], "pie")Donut
root = PieChart(["Chrome", "Safari", "Firefox", "Other"], [65, 18, 10, 7], "donut")RadialChart
root = RadialChart(["Tasks", "Bugs", "Reviews"], [78, 92, 65])SingleStackedBarChart
root = SingleStackedBarChart(["Completed", "In Progress", "Pending"], [60, 25, 15])ScatterChart
root = ScatterChart([series1], "Height (cm)", "Weight (kg)")series1 = ScatterSeries("Adults", [p1, p2, p3, p4, p5])p1 = Point(165, 60)p2 = Point(170, 65)p3 = Point(175, 72)p4 = Point(180, 80)p5 = Point(185, 85)Forms
Form
root = Form("contact", btns, [nameField, emailField, countryField, msgField])nameField = FormControl("Name", Input("name", "Your name", "text", { required: true, minLength: 2 }))emailField = FormControl("Email", Input("email", "you@example.com", "email", { required: true, email: true }))countryField = FormControl("Country", Select("country", countryOpts, "Select...", { required: true }))msgField = FormControl("Message", TextArea("message", "Tell us more...", 4, { required: true, minLength: 10 }))countryOpts = [SelectItem("us", "United States"), SelectItem("uk", "United Kingdom"), SelectItem("de", "Germany")]btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary"), Button("Cancel", Action([@ToAssistant("Cancel")]), "secondary")])FormControl
root = Form("username", btns, [usernameField])usernameField = FormControl("Username", Input("username", "Enter your username", "text", { required: true }))btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary")])Label
root = Label("Email address")Input
root = Form("inputs", btns, [i1, i2, i3])i1 = FormControl("Text", Input("text", "Enter text", "text"))i2 = FormControl("Email", Input("email", "you@example.com", "email"))i3 = FormControl("Password", Input("password", "Enter password", "password"))btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary")])TextArea
root = Form("description", btns, [descField])descField = FormControl("Description", TextArea("description", "Write a description...", 4))btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary")])Select
root = Form("country", btns, [countryField])countryField = FormControl("Country", Select("country", opts, "Choose a country..."))opts = [SelectItem("us", "United States"), SelectItem("uk", "United Kingdom"), SelectItem("de", "Germany"), SelectItem("fr", "France")]btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary")])DatePicker
root = Form("date", btns, [dateField])dateField = FormControl("Date", DatePicker("date", "single"))btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary")])Slider
root = Form("volume", btns, [volumeField])volumeField = FormControl("Volume", Slider("volume", "continuous", 0, 100))btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary")])CheckBoxGroup
root = Form("interests", btns, [interestsField])interestsField = FormControl("Interests", CheckBoxGroup("interests", [c1, c2, c3]))c1 = CheckBoxItem("Frontend", "Frontend development", "frontend")c2 = CheckBoxItem("Backend", "Backend development", "backend")c3 = CheckBoxItem("DevOps", "DevOps engineering", "devops")btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary")])RadioGroup
root = Form("plan", btns, [planField])planField = FormControl("Plan", RadioGroup("plan", [r1, r2, r3]))r1 = RadioItem("Free", "Basic features", "free")r2 = RadioItem("Pro", "Advanced features", "pro")r3 = RadioItem("Enterprise", "Full access", "enterprise")btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary")])SwitchGroup
root = Form("settings", btns, [settingsField])settingsField = FormControl("Settings", SwitchGroup("settings", [s1, s2]))s1 = SwitchItem("Enable notifications", "Receive alerts", "notifications")s2 = SwitchItem("Dark mode", "Use dark theme", "darkMode")btns = Buttons([Button("Submit", Action([@ToAssistant("Submit")]), "primary")])Buttons
Button
Large
root = Buttons([b1, b2, b3, b4])b1 = Button("Primary", Action([@ToAssistant("Primary")]), "primary", "normal", "large")b2 = Button("Secondary", Action([@ToAssistant("Secondary")]), "secondary", "normal", "large")b3 = Button("Tertiary", Action([@ToAssistant("Tertiary")]), "tertiary", "normal", "large")b4 = Button("Destructive", Action([@ToAssistant("Destructive")]), "primary", "destructive", "large")Medium
root = Buttons([b1, b2, b3, b4])b1 = Button("Primary", Action([@ToAssistant("Primary")]), "primary", "normal", "medium")b2 = Button("Secondary", Action([@ToAssistant("Secondary")]), "secondary", "normal", "medium")b3 = Button("Tertiary", Action([@ToAssistant("Tertiary")]), "tertiary", "normal", "medium")b4 = Button("Destructive", Action([@ToAssistant("Destructive")]), "primary", "destructive", "medium")Small
root = Buttons([b1, b2, b3, b4])b1 = Button("Primary", Action([@ToAssistant("Primary")]), "primary", "normal", "small")b2 = Button("Secondary", Action([@ToAssistant("Secondary")]), "secondary", "normal", "small")b3 = Button("Tertiary", Action([@ToAssistant("Tertiary")]), "tertiary", "normal", "small")b4 = Button("Destructive", Action([@ToAssistant("Destructive")]), "primary", "destructive", "small")Extra Small
root = Buttons([b1, b2, b3, b4])b1 = Button("Primary", Action([@ToAssistant("Primary")]), "primary", "normal", "extra-small")b2 = Button("Secondary", Action([@ToAssistant("Secondary")]), "secondary", "normal", "extra-small")b3 = Button("Tertiary", Action([@ToAssistant("Tertiary")]), "tertiary", "normal", "extra-small")b4 = Button("Destructive", Action([@ToAssistant("Destructive")]), "primary", "destructive", "extra-small")Data Display
TagBlock
root = TagBlock(["React", "TypeScript", "Node.js", "Python"])Tag
Large
root = Stack([t1, t2, t3, t4, t5], "row", "s")t1 = Tag("Neutral", null, "lg", "neutral")t2 = Tag("Info", null, "lg", "info")t3 = Tag("Success", null, "lg", "success")t4 = Tag("Warning", null, "lg", "warning")t5 = Tag("Danger", null, "lg", "danger")Medium
root = Stack([t1, t2, t3, t4, t5], "row", "s")t1 = Tag("Neutral", null, "md", "neutral")t2 = Tag("Info", null, "md", "info")t3 = Tag("Success", null, "md", "success")t4 = Tag("Warning", null, "md", "warning")t5 = Tag("Danger", null, "md", "danger")Small
root = Stack([t1, t2, t3, t4, t5], "row", "s")t1 = Tag("Neutral", null, "sm", "neutral")t2 = Tag("Info", null, "sm", "info")t3 = Tag("Success", null, "sm", "success")t4 = Tag("Warning", null, "sm", "warning")t5 = Tag("Danger", null, "sm", "danger")Commerce
AddToCartForm
root = AddToCartForm("WH-1001", "Add to cart", 1, 1, 10)