Devie UI

Installation

1
Prerequisites

At the very least, you need React.

Components are tested with React 19+, and include the "use client" directive when client-side JS is required. If you are on lower version of React, you can try to use Devie UI by removing the unsupported directives.

2
Install Dependencies

Devie UI components are based Base UI primitives. clsx is used for constructing classNames.

npm i @base-ui-components/react clsx

Icons used throughout the examples are from the Lucide icon library.

npm install lucide-react
If you prefer to use your own icon, you can skip the installation of Lucide, and substitute any icons to the solution of your choice when adding Devie UI components in your project.

Both Base UI and Lucide are tree-shakeable, so your app bundle will contain only the components that you actually use.

3
Create Default Theme Variables

All components are styled using a set of CSS Variables.

You need to define these variables in your project.

globals.scss
@layer devie {
  :root {
    --devie__color__text: #111111;
    --devie__color__text-sub: #848385;
    --devie__color__line: #d7d7d7;
    --devie__color__background: #ffffff;
    --devie__color__background-sub: #f5f5f5;
    --devie__color__primary: #5739da;
    --devie__color__primary-label: #ffffff;
    --devie__color__danger: #df5449;
    --devie__color__danger-label: #ffffff;
    --devie__color__success: #0da841;
    --devie__color__success-label: #ffffff;
    --devie__color__warning: #ff7e28;
    --devie__color__warning-label: #ffffff;
 
    --devie__color__litteral-gray: #6b7280;
    --devie__color__litteral-brown: #a16207;
    --devie__color__litteral-orange: #ea580c;
    --devie__color__litteral-yellow: #d97706;
    --devie__color__litteral-green: #16a34a;
    --devie__color__litteral-blue: #2563eb;
    --devie__color__litteral-purple: #9333ea;
    --devie__color__litteral-pink: #ec4899;
    --devie__color__litteral-red: #dc2626;
 
    --devie__effect__hover-p1: rgba(0, 0, 0, 0.07);
    --devie__effect__hover-p2: rgba(255, 255, 255, 0.5);
    --devie__effect__disabled-p1: rgba(0, 0, 0, 0.25);
    --devie__effect__disabled-p2: rgba(255, 255, 255, 0.5);
    --devie__spacing__x05: 4px;
    --devie__spacing__x1: 8px;
    --devie__spacing__x2: 16px;
    --devie__spacing__x3: 24px;
    --devie__spacing__x4: 32px;
    --devie__spacing__x5: 40px;
    --devie__spacing__x6: 48px;
    --devie__spacing__x7: 56px;
    --devie__spacing__x8: 64px;
    --devie__font-size__title1: 32px;
    --devie__font-size__title2: 24px;
    --devie__font-size__title3: 20.5px;
    --devie__font-size__normal: 16px;
    --devie__font-size__small: 14px;
    --devie__font-family:
      "Work Sans", "Work Sans Fallback", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --devie__radius: 8px;
    --devie__radius-strong: 16px;
    --devie__shadow__menu:
      0px 10px 30px -16px rgba(0, 0, 0, 0.1), 0px 4px 10px -6px
      rgba(0, 0, 0, 0.25);
  }
}
Alternatively, you can also use your project's preferred styling solution if they support variables — as long as they are accessible when applying the styling rules.

Learn how to customize your theme(s) by visiting the Theming section.

4
All Set

You can now browse the Components and add the ones needed to your project.