Supercharge building Webflow apps

Ship faster with Webflow's design system, Svelte components and user-friendly CLI that streamline your workflow.

Hero

What's included?

Complete app-building toolkit

Accelerate your workflow with pre-built components, design systems, and intuitive CLI tools.

Figma logo

Figma UI Kit

Leverage Webflow's design system to skip the basics and dive straight into crafting your app's features.

Extended design system: Built on top of Webflow's design system with additional variables, variants, and components while maintaining full compatibility.
25 components: A comprehensive library of production-ready UI components matching Webflow's design system.
Auto Layout 5.0: Components that automatically resize and reflow as you edit content.
Themes: Design and adapt your app to Webflow's default, brighter or darker mode.
Perfectly aligned with code: Pixel perfect components that match both Figma and Svelte components.
Svelte logo

Svelte components

Streamline your Webflow projects with powerful, plug-and-play building blocks.

Accessible components: All components are built on top of Bits UI headless component library.
Typescript support: Each component is fully typed with TypeScript, so you can move fast without breaking things.
Semantic variables: Color, spacing, and typography variables with meaningful names that match their purpose in the interface.
Svelte icons: 200+ icons compatible with the Figma file. Optimized and ready for use.
Themes: Automatically synchronized with the Webflow interface appearance settings.

CLI for faster workflow

Webflow Svelte CLI is a tool designed to simplify the process of adding components in a project.

How it works

Features

Everything you need to build Webflow apps

Simplify design and development cycles with our optimized, time-saving assets and components.

Source code

Get access to all of the source code from our versatile Webflow app components.

Avatar.svelte
Button.svelte
<script lang="ts">
import { Avatar } from 'bits-ui';
import { Account } from '$lib/components/icons';

type $$Props = Avatar.Props & {
image?: string | null;
fallback?: string | null;
icon
font-family
bg-primary-hover
icon
spacing-12x
bg-success-transparent
icon
font-size-xl
icon
font-family
bg-primary-hover
icon
spacing-12x
bg-success-transparent
icon
font-size-xl
bg-purple
icon
spacing-1x
bg-pink-hover
icon
line-height-md
icon
radius-2xl
bg-purple
icon
spacing-1x
bg-pink-hover
icon
line-height-md
icon
radius-2xl
icon
icon-xl
icon
font-size-sm
bg-warning-hover
icon
spacing-8x
bg-critical-hover
icon
icon-xl
icon
font-size-sm
bg-warning-hover
icon
spacing-8x
bg-critical-hover
icon
icon-md
bg-success-hover
icon
font-size-lg
icon
radius-lg
bg-purple-transparent
icon
icon-md
bg-success-hover
icon
font-size-lg
icon
radius-lg
bg-purple-transparent

Variables & Styles

Maintain consistent design with variables and styles for colors, typography, and spacing.

Themes

Automatically detects and syncs with Webflow's interface appearance settings.

Webflow app brighter themeWebflow app default themeWebflow app darker theme

Accessible components

Production-ready components to help you build interfaces faster and with confidence.

Account
Storage alertUsed 90% of available space.

200+ Icons

Fully compatible with the Figma file. Optimized and ready for immediate use.

icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon

State Communication

WCAG 2.1 Compliance

Keyboard Navigation

WAI-ARIA Compliance

State Communication

WCAG 2.1 Compliance

Keyboard Navigation

WAI-ARIA Compliance

Accessible components

All components ensure accessibility standards, leveraging Bits UI headless component library.

Benefits

Bridge design and development

Seamlessly transition from Figma designs to functional UI with our integrated kit and Svelte component library.

Kickstart your app

Streamline your workflow and focus on what truly matters. 200+ hours saved means more time for innovation and growth.

Build logic, not components

Focus on creating business logic rather than endlessly crafting individual components.

Develop app in no time

Pre-made components allow fast app building and shipping in record time.

performance
graphic with figma, svelte, and webflow logo

Keep consistency with ease

From concept to flawless execution, ensure every detail aligns perfectly with your vision and brand standards.

Improved accuracy

Effectively minimizes discrepancies between design and final product.

Scalability

Easily extend the system as new design patterns and components are needed.

Pricing

Choose the perfect plan for your needs

Pay once for a powerful set of tools to boost your workflow. No subscriptions or hidden fees.

Personal

$119

A single license for solo designers, developers, and freelancers.

License for 1 user
Figma UI Kit (25 components)
Svelte components (25 components)
Unlimited projects
Lifetime access
Buy personal license

One-time payment - Plus local taxes

Team

$249

Up to 5 users. Perfect for design teams, agencies, and startups.

License for up to 5 users
Figma UI Kit (25 components)
Svelte components (25 components)
Unlimited projects
Lifetime access
Buy team license

One-time payment - Plus local taxes

Secure 256-bit SSL Encrypted payments by Lemon Squeezy. The standard local tax rate may be charged, following the law of your country.

FAQs

Everything you need to know

Find answers to common questions about Figma UI Kit and Svelte component library.

General

Licensing

Payments & Billing

Support

Build your app today

Improve the design and development process with the Figma UI Kit and Svelte component library for Webflow apps.

Get access