Framer Design System

Bringing Create UI to Framer. The same tokens, component logic, and variant depth you already know, now available for Framer projects. Design and ship live sites from a single, unified system.

Webflow Design System

Bringing Create UI to Webflow. The same token system, component structure, and variant depth, now available for Webflow projects. Manage everything from design to launch with one consistent system.

Color Picker

A component for selecting and adjusting colors. Includes a spectrum, hue and opacity controls, hex and RGB inputs, and preset swatches.

Time Picker

An input for selecting a specific time. Supports 12 and 24 hour formats, minute intervals, and keyboard entry.

Notification Banner

A prominent banner for surfacing announcements, alerts, and system messages. Supports multiple intents, optional actions, and dismissible variants for both inline and page-level placement.

Dialog / Confirm

A focused modal for confirmations and critical decisions. Includes title, description, and action buttons, with intent-based styling for destructive, warning, and standard confirmations.

File Format Icon Family

Filter Bar

A horizontal control surface for filtering and refining data sets. Supports dropdowns, search, active filter chips, and quick reset, designed for tables, lists, and dashboards.

Date Picker

A calendar-based input for selecting dates. Supports single dates, date ranges, min and max constraints, and keyboard navigation.

File Upload

A component for uploading files via click or drag and drop. Includes file previews, progress states, validation, and support for single or multiple files.

Step Indicator

A progress component for multi-step flows and wizards. Shows completed, active, and upcoming steps, with support for horizontal and vertical orientations, numbers, and icons.

Sidebar

A vertical navigation component for dashboards and app layouts. Supports nested items, collapsible sections, icons, and an expanded or collapsed state for space-efficient navigation.

Navigation Bar

A top-level navigation component for app and site headers. Includes logo, links, actions, and responsive behavior, with support for mobile menus and sticky positioning.

Slider / Range Slider

A flexible slider component for selecting values along a track. Includes both a single-value slider and a range slider for selecting a span between two points. Full support for sizes, states, and theming.