Welcome to Deri Ui
Deri Ui is a frontend UI kit built with Next.js and Tailwind CSS. Browse components, copy the code, and use it in your own projects.
Copy-ready frontend UI components
Deri Ui
Copy-ready frontend UI components
Deri Ui is a frontend UI kit built with Next.js and Tailwind CSS. Browse components, copy the code, and use it in your own projects.
Developed by
Deribew Shimelis
deribew.tech@gmail.com
Built with Next.js, React, Tailwind CSS, and Redux Toolkit.
15
20
120+
100+
Ethiopian Universities
Ethiopian college & university website templates
Admas University
Unity University
HERQA Accredited · MIDROC Technology Group
St. Mary's University
HERQA Accredited · Distance Education Network
Rift Valley University
Queens' College
HERQA Accredited Private College
Royal College (ሮያል ኮሌጅ)
ETA Licensed Private College · Education Page
Alpha University College
HERQA Accredited
Addis Ababa Medical College
Health Sciences Accredited
Ethiopian Schools
Ethiopian school website templates
Addis Ababa
— Sandford International School
Addis Ababa
— International Community School of Addis Ababa
Addis Ababa
— One Planet International School
School of Nations
Radical Academy
STEM-Focused Ethiopian National Curriculum
Zagol Academy
KB Academy
Gibson Academy
Ethiopian National Curriculum
Live Interactions
Welcome to Deri Ui
How to use Deri Ui
Browse
Explore components, pages, and layouts from the sidebar navigation.
Preview
See each example live with light/dark mode and responsive layouts.
Copy
Copy the source code from any demo and paste it into your project.
Customize
Adapt styles, props, and structure to match your product needs.
Quick Start
- 1Run
npm installthennpm run dev - 2Open Deri Ui Kit for interactive demos
- 3Read the full Getting Started guide for Next.js & React
Example: Deri Logo Component
Setup — Next.js & React
Full guide →Install & run
Clone the repo, run npm install, then npm run dev.
Browse components
Open /components/deri-ui or any page from the sidebar.
Copy code
Use View Code → Copy Code on any demo block.
Paste in your page
Import the component in pages/ or app/ and customize props.
Use template kits
Browse /templates/schools or /templates/universities for full website layouts.
Step 1 — Install & run (Next.js)
# Install the published package in any React app
npm install deri-ui
# Then configure Tailwind (see packages/deri-ui/README.md)
# presets: [require('deri-ui/tailwind.preset')]
# Local docs site (this repo)
npm install
npm run build:ui
npm run dev
# http://localhost:3000Step 2 — Use a component in a page
Step 3 — Copy from demos
Browse by category
View all interactions →University Templates
15 Ethiopian private colleges & universities — Admas, Unity, St. Mary's, RVU & more.
School Templates
20 complete Ethiopian private school websites — IB, Cambridge, American & national curriculum.
Getting Started
Install, setup for Next.js & React, and copy components into your app.
Deri Ui Kit
Banners, toasts, skeletons, empty states, and interactive blocks.
Components
Cards, modals, tabs, accordions, and more ready-to-use blocks.
Elements
Buttons, alerts, badges, typography, and foundational UI pieces.
Forms
Inputs, validation, wizards, editors, and form layouts.
Tables
Basic tables and advanced datatables with sorting and export.
Apps
Calendar, chat, invoice, mailbox, and other app-style demos.
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.