- Overview
- Getting Started
How to install & use Deri Ui
Step-by-step instructions for Next.js and React. Copy components and start building in minutes.
Developer: Deribew Shimelis
Email: deribew.tech@gmail.com
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
Production build
npm run build # build for production npm run start # start production server (Next.js)
Website template kits
Ready-made Ethiopian school and university homepages built with Deri Ui components. Copy the template folder, swap branding in the data files, and deploy.
Optional: run npm run fetch-university-logos to cache institution logos locally.
What to copy into your project
| Item | Path | Required? |
|---|---|---|
| UI components | components/ui/ | Yes |
| Tailwind styles | styles/tailwind.css | Yes (for matching design) |
| Branding config | app.config.ts | Optional |
| ViewCode helper | components/ViewCode.tsx | Optional |
| Logo component | components/DeriLogo.tsx | Optional |
| School templates | components/templates/school/ | Optional |
| University templates | components/templates/university/ | Optional |
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.