Let your interface resonate like never before

Meet Crumbs-UI — a UI-kit that harmonizes the art of design with the precision of musical composition. Start your journey with the perfect blend of creativity and functionality

Try for free

Let your interface resonate like never before

Meet Crumbs-UI — a UI-kit that harmonizes the art of design with the precision of musical composition. Start your journey with the perfect blend of creativity and functionality

Try for free

Crumbs-UI: where code meets design

UI-components for developers

React

TypeScript

Lightweight

Config-based

Sync design and code effortlessly with pre-built React components. Scalable, customizable, and clean. Whether you’re working on a startup or a large-scale project, this kit has everything you need to get started fast

Crumbs-UI is built on top UX/UI practices, maximizing Figma’s potential. With smart structure, flexible styles, and clear docs, it streamlines design for professionals

Modern UI-kit for designers

Figma

Tokens

Autolayout

Atomic system

From indie hacks to full-scale products — one UI-kit to rule them all

Code

Install our
npm-package

Import the
components

Design

Duplicate the
Crumbs-UI

Use default
or customize

Sync code &
Figma

Scale with
confidence

What is Crumbs? Short overview

FOR ANY DEVICES AND SCREENS

CRAFTED WITH ACCESSIBILITY

AWESOME THEME FROM THE BOX

CODE-DESIGN SYNC

Tokens as the basis for flexible configuration

Colors

Radius

Typography

Opacity

Elevation

Icons

Spacings

Boarders

UI components to build anything

A

Accordion (WIP)

Action button (WIP)

Autocomplete (WIP)

Avatar (WIP)

B

Badge (WIP)

BreadCrumbs

Button

C

Checkbox

Chip (WIP)

Code block (WIP)

D

Data table (WIP)

Divider

Drawer (WIP)

I

Inline Dialog (WIP)

L

M

P

Pagination (WIP)

Pop-up (WIP)

Progress bar

R

Radiobutton

S

Scrollbar (WIP)

Search

Segment control

Select

Slider (WIP)

Snackbar (WIP)

Steps (WIP)

Switch

T

Tab (WIP)

Textarea

Tooltip (WIP)

How much does Crumbs-UI cost?

Beta

FREE

Npm package + Figma-file

Light theme

Base components

Base icons

First public version

Get Crumbs-UI

We test, you win

Every part of our UI kit has been put to the test in real projects by our team, both in design and coding. We also share it with our peers to get their honest opinions.
Got feedback? We’d love to hear from you!

Share feedback

FAQ

Crumbs-UI, being built on React, primarily supports web platforms. This means it's designed for use in modern web browsers across various devices (desktop, tablet, mobile) where React applications can run.

The accompanying Figma file provides the design assets for these components, allowing designers to work on the UI across their preferred design environment.

Let your interface resonate like never before

Let your interface resonate like never before

Crumbs-UI: where code meets design

UI-components for developers

Modern UI-kit for designers

From indie hacks to full-scale products — one UI-kit to rule them all

How much does Crumbs-UI cost?

Beta

FREE

Npm package + Figma-file

Light theme

Base components

Base icons

First public version

We test, you win

Every part of our UI kit has been put to the test in real projects by our team, both in design and coding. We also share it with our peers to get their honest opinions. Got feedback? We’d love to hear from you!

Every part of our UI kit has been put to the test in real projects by our team, both in design and coding. We also share it with our peers to get their honest opinions.
Got feedback? We’d love to hear from you!