Deri Ui

Copy-ready components for your next project

Built by Deribew Shimelis. Browse, preview, and copy banners, cards, alerts, and more.

Start Building View Overview

npm install deri-ui — DU* package exports

Published API

Install with npm install deri-ui. Every export starts with DU.

DUBadge

Components

Elements

Widgets

DUCard

Tailwind-only card with variants.

Progress72%

DUChart

Mon

Tue

Wed

Thu

Fri

More DU* elements — dropdown, tooltip, search, table…

Elements

Frontend UI coverage

Button groups, overlays, search, tree, table, file upload, and more — all DU*.

0+CtrlK

Data

DUTable

Name	Role
Ada	Admin
Lin	Editor

Click to upload or drag and drop

SVG, PNG, JPG or PDF

Deri Ui

Copy-ready frontend UI components

Interactive components by Deribew Shimelis

deribew.tech@gmail.com

Tip: Click any component below, then use View Code to copy it into your app.

Always customize colors, spacing, and text to match your brand.

Components

Downloads

120+

Themes

Layouts

📋

Copy & Paste

Every block includes source code you can copy directly.

🌙

Dark Mode

All components support light and dark themes out of the box.

📱

Responsive

Layouts adapt from mobile to desktop automatically.

Promo Banner — CTA hero strip

New

Launch faster with Deri Ui

Pre-built blocks for dashboards, landing pages, and admin panels.

Explore

Info Banner — inline notices

Payment completed successfully.

Unable to save changes. Please try again.

Alert Banner — dismissible

Deri Ui Ready

Copy components and use them in your project.

Empty State — no data placeholder

📭

No components saved

Browse the library and bookmark your favorite blocks.

Browse Library

Loading Skeleton — placeholder shimmer

Chip Group — multi-select tags

Avatar Group — stacked users

Theme Toggle — light / dark / system

Progress Ring — animated fill

Progress72%

UI Completion

Interactive Button — ripple effect

Toast Stack — temporary notifications

Deri Logo — animated brand mark

Deri Ui

Copy-ready frontend UI components