--- title: How to Build Custom Security UI with Turbine Widgets and AI description: Turbine Widgets are custom web components built with the Lit framework that extend the Swimlane Turbine security platform UI on case records and dashboards.... canonical: https://daily.dev/posts/how-to-build-custom-security-ui-with-turbine-widgets-and-ai-crud2zduj twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to Build Custom Security UI with Turbine Widgets and AI | daily.dev og:description: Turbine Widgets are custom web components built with the Lit framework that extend the Swimlane Turbine security platform UI on case records and dashboards.... og:url: https://daily.dev/posts/how-to-build-custom-security-ui-with-turbine-widgets-and-ai-crud2zduj og:image: https://api.daily.dev/og/posts/cRUd2zDuJ.png og:image:alt: How to Build Custom Security UI with Turbine Widgets and AI og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to Build Custom Security UI with Turbine Widgets and AI **[Security Boulevard](https://daily.dev/sources/securityboulevard)** · 7 min read · 0 upvotes · 0 comments ## Summary Turbine Widgets are custom web components built with the Lit framework that extend the Swimlane Turbine security platform UI on case records and dashboards. There are three ways to build them: import a ready-made widget from the Swimlane CDN with a single line, code one from scratch by extending SwimlaneElement, or describe the desired widget in plain language to Hero AI which generates the code and shows a live preview. The widget catalog includes over 100 examples with full source code, including an ROI Calculator, Case Summary, and MITRE ATT&CK Heatmap widget. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Embedding Agentic RAG Widgets](https://daily.dev/posts/embedding-agentic-rag-widgets-b9d38g9r7) · Telerik · 0 upvotes · 0 comments - [Rails UI Components](https://daily.dev/posts/rails-ui-components-a1vdhwzh9) · Ruby Flow · 26 upvotes · 2 comments - [Accelerate Enterprise UI Development with Agentic AI Workflows](https://daily.dev/posts/accelerate-enterprise-ui-development-with-agentic-ai-workflows-e37r3c34n) · Syncfusion · 1 upvotes · 0 comments - [Upgraded Custom ASPM Dashboards: Build Security Views That Match How Your Teams Work](https://daily.dev/posts/upgraded-custom-aspm-dashboards-build-security-views-that-match-how-your-teams-work-lqnrgwpld) · Security Boulevard · 0 upvotes · 0 comments - [Building Interactive UI with Headless Experience Layer](https://daily.dev/posts/building-interactive-ui-with-headless-experience-layer-flq4q13jy) · Salesforce Developers Blog · 0 upvotes · 0 comments --- Tags: [#security](https://daily.dev/tags/security), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/how-to-build-custom-security-ui-with-turbine-widgets-and-ai-crud2zduj) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How to Build Custom Security UI with Turbine Widgets and AI","url":"https://daily.dev/posts/how-to-build-custom-security-ui-with-turbine-widgets-and-ai-crud2zduj","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-build-custom-security-ui-with-turbine-widgets-and-ai-crud2zduj"},"datePublished":"2026-07-09T14:13:13.884Z","dateModified":"2026-07-09T14:13:40.696Z","description":"Turbine Widgets are custom web components built with the Lit framework that extend the Swimlane Turbine security platform UI on case records and dashboards....","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/035d455c01fb2bd7aaaeaaf19c75f2b3?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/035d455c01fb2bd7aaaeaaf19c75f2b3?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Security Boulevard","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Security Boulevard","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/3613c832180040de8d85bb29f74395be","url":"https://daily.dev/sources/securityboulevard"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-to-build-custom-security-ui-with-turbine-widgets-and-ai-crud2zduj","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"security,web-components","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Security Boulevard","item":"https://daily.dev/sources/securityboulevard"},{"@type":"ListItem","position":3,"name":"How to Build Custom Security UI with Turbine Widgets and AI"}]} ```