Deri Ui

Copy-ready frontend UI components

Loading UI kit...

Personalize your preview workspace

Deribew Shimelis

deribew.tech@gmail.com

Active: light · vertical · full · LTR

Choose how Deri Ui looks in your browser.

Switch between sidebar layouts for your workflow.

Semi-dark sidebar and header

Full-width canvas or boxed content area.

LTR for English, RTL for Arabic and similar languages.

Control how the top bar sticks while scrolling.

Animation when navigating between pages.

Interface language for menus and labels.

Changes are saved automatically in your browser.

DUHero

Landing

Marketing hero with CTAs and gradient backdrop.

import { DUHero } from 'deri-ui';

Build with Deri

Reusable DU* components.

typescript

<DUHero title="Build faster" description="…" primaryLabel="Start" onPrimary={go} />

Prop	Type	Default	Description
title / description / eyebrow	string \| ReactNode	—	Copy
primaryLabel / secondaryLabel	string	—	CTA labels
onPrimary / onSecondary	() => void	—	Handlers

import { DUHero } from 'deri-ui';

<DUHero title="Build faster" description="…" primaryLabel="Start" onPrimary={go} />

Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.