components.ai

The open-source design tool for creativesBuild custom design tools without writing any code. Create responsive components, pages, and sites that you can use in any type of web project. Style markup templates with curated themes or your own design tokens.StudioVisually design custom design tools, generative components, pages, and sitesAa🎨 ThemeImport or define design tokens to use in all of your designs. Dedicated tools for creating accessible color systems, responsive type scales, layered box shadows, and more.Markdown_PublisherGenerative styles + markdownSyntax highlightingCustomize the look of your code examplesColor scalesScale-based palette generatorColorPreview colors against common UIProductA growing set of generative components for UI and graphic design.ExploreCycle through generated designs or create your own from scratch with the ease of parametric controls.AugmentManipulate parameters until the design is just right. Lock inputs for properties or combinations of properties you like to find your visual language.NavigateVote generated designs up or down to curate future output. Save as many iterations as you want.Multi-format exportExport designs in a growing list of formats including: React, JS, JSON, JSX, SVG, PNG, HTML, CSS, CSS custom properties, and Sass.One-click publishInstantly share your designs with colleagues or clients to present or collaborate. Publish hosted web pages along with hosted assets for styles as JS, JSON, and CSS.Constraint-based designsDesign with scales and systems. Components automatically use your defined brand guidelines, retaining the ability to override with custom values at any time.Theme importStart using your visual brand immediately. Audit and edit or use to drive constraints for generative components.Automated accessibility docsRapid visual feedback loops for contrast scores and accessible combinations available in a theme.Responsive themesDon't just design for a single screen size. Easily target values across your defined breakpoints. Manage responsive typography, layout, and spacing.1000+ fontsFull support for the entire Google Font Library + any fonts you have installed locally.Variable font supportThe first design tool with full support for variable fonts. Automatically exposes all custom axis so you can get the fine-grained control variable fonts were meant to enable.Curated design assetsBrowse curated presets to customize or use in your designs.Used by thousands of creatives at places likeExploreA gallery of responsive components that are easy to customize29 APR 2022Card linkA basic card component that takes an image, title, text, and kicker content. 19 JUN 2022Card link 5A soft card with soft interactions29 JUL 2018Card link 7A soft card with bold typographyBadgeBadge outlineText GradientsAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy ZzView moreTheme importCreate a theme from your existing website's visual brand. We'll parse your CSS for colors, typography, motion, shadows, and spacing values to use as design tokens.Example: https://components.ai🎨 Create themeThemes Modular scales for color, typography, shadows, and motion, optimized for designing digital interfaces. Easy to modify or extend to fit your brand. Export as CSS, Custom properties, JS, JSON, or Sass to use in any type of web project.LCH - Natural156 colors7,768 accessible combinationsLCH - B-Spline132 colors5,252 accessible combinationsLCH - Monotone156 colors7,256 accessible combinationsLCH - Linear156 colors7,256 accessible combinationsLAB - Natural168 colors8,816 accessible combinationsLAB - B-Spline156 colors8,212 accessible combinationsLAB - Monotone132 colors5,390 accessible combinationsLAB - Linear180 colors10,918 accessible combinationsRGB - Natural168 colors8,868 accessible combinationsRGB - B-Spline168 colors9,042 accessible combinationsRGB - Monotone168 colors8,494 accessible combinationsRGB - Linear168 colors9,332 accessible combinationsNotesWorkflows powered by generative design{ css.gui }CSS.GUIA growing collection of open source visual editors for CSS.Read moreYear One ReviewDevelopments and highlights over the past year.Read moreAn Interview with Elliot Jay StocksOn creative process, running a label, and designing album covers with Components AI.Read moreGenerative Logo DesignA brief walkthrough of the thinking and process behind the design of our generative logo.Read moreAaComputational Theming: ColorAn introduction to computational methods to ensure your designs are visually accessible.Read moreLearn CSSUse Studio to explore interactive and editable examples that you can use to rapidly learn how CSS works for each property.border-radiusbackground-image: gradientsbox-shadowTtext-shadowTry Components AI for freeContinue with GoogleOrEmailWe'll email you a link for a one-click, password free login.Already have an account? Log in --- NotesGenerative and parametric designCSS.GUIYear OneAn Interview with Elliot Jay StocksComputational Theming: ColorGenerative Logo --- ChangelogNotes highlighting changes we have made and potential changes in the future. Not a comprehensive list of changes and bug fixes.Enhance exportExport designs as production-ready web components.Import HTML, SVG, and MarkdownQuickly add design superpowers to your semantic markup, markdown, and vector graphics.Component StudioCreate, edit, share, and publish components, pages, and generative art pieces.Tables and .zip foldersWe've added a visual editor to create tables in Markdown or HTML.Gradient color stopsWe've made some updates to our generator algorithm around how we calculate color stop values.SVG gridWe've added new type of generative SVG component to quickly create grid based vector graphics.Custom Markdown Syntax highlightingCustom syntax highlighting for your markdown codeblocksSyntax highlightingGenerative syntax highlighting themes. Instantly create dark or lightmodes based on your brand colors.Markdown + generative designCycle through a wide range of aesthetic styles applied to your markdown content. Publish or export as HTML, CSS, and Markdown.ColorColor scale updateTheme UI updateColors editorColor pickerThemeDeriving the next step in color scalesOur color group editor in themes allows us to detect color scales as part of the grouping. When you add a color, the algorithm makes a best guess at the subsequent step in the scale.Color scale, Voronoi, and Delaunay updatesText shadow componentPublishing textIn addition to publishing and sharing gradients, you can now add your own custom text as well.Gradients: Updated add layer designDesign improvements Publish and shareDesigns can now be published and sharedBox shadow componentExplore the powerful world of box-shadows with our new layer based editor.Import colors from URLWe've integrated the CSS Stats API into our theme editor to quickly allow you to get up and running with your current brand colors.Improved editing in grid viewGrid view only updates the property being adjusted instead of a full regeneration on each edit.GradientYou can do some amazing things with CSS gradients. Explore the world of linear, radial, and conic gradients with our first layer-based component.JSX to PNGAn API to convert JSX styled with the convenience of Theme UI into an image. --- Log inContinue with GoogleOrEmailWe'll email you a link for a one-click, password free login.