Olkoo · Private Component Library

Digital
Ndop

Olkoo's unified React component library — inspired by the intricate weave and vibrant geometry of Cameroonian Ndop textile art.

npm install @olkoo/web-ui-kit
Browse Components ↓ Open Registry →
Design Tokens

The Ndop Palette

Five colours drawn from the Bamileke Ndop cloth — each carrying cultural meaning and a precise design role.

Ndop Indigo
#0B1E36
Primary · Deep cloth base
Woven White
#F5F0E8
Primary-fg · Cotton threads
Royal Gold
#D4A843
Accent · Geometric embellishment
Ceremonial Red
#E8483F
Destructive · Ceremonial marker
Prestige Teal
#1B7C6E
Success · Royal prestige
Typography

Three typefaces, one voice

Each font carries a distinct role — from ceremonial headlines to functional UI text and precise code.

Fraunces Display --f-display
Digital
Ndop
Woven from Ndop cloth
Inspired by the intricate geometry of Cameroonian textile art
Light 300 Bold 700 Extra 800 Black 900
Inter Body --f-body
User interface · Forms · Labels
A typeface carefully crafted for screen legibility — variable, precise, and at home in both dense forms and spacious layouts.
Button labels, input placeholders, navigation links, and all functional UI copy use Inter at weights 400–600.
Light 300 Regular 400 Medium 500 Semi 600
Space Mono Mono --f-mono
npm install @olkoo/web-ui-kit
variant= "ndop"
size= "lg"
asChild= {false}
Used for code blocks, install commands, token values, and keyboard shortcuts.
Regular 400 Bold 700
Components

The Fabric of Every UI

Seven components, each expressing the Digital Ndop language — from primary actions to structural separators.

Button — 6 variants
Badge — 5 cultural variants
ndop gold ceremonial woven teal
Card + NdopCardHeader

Account Settings

Manage your Olkoo profile

Email
you@olkoo.com
Avatar · Separator
OA
JD
CM
PK
BF
or continue with email
Getting Started

Three steps to Ndop

Add the registry, install the package, and start building with the full palette.

01
Configure the registry
Create .npmrc in your project root. Windows: save with LF line endings (VS Code → bottom-right corner → CRLF → LF) or add a .gitattributes rule.
# .npmrc  (save with LF, not CRLF)
@olkoo:registry=https://ui-kit.csl-brands.com
//ui-kit.csl-brands.com/:_auth=<base64-token>

# .gitattributes  (prevents CRLF corruption for all team members)
.npmrc text eol=lf
02
Install & import
Works on Linux, macOS, and Windows (PowerShell / Git Bash / WSL).
# Linux / macOS / WSL / Git Bash
npm install @olkoo/web-ui-kit

# Windows PowerShell — same command
npm install @olkoo/web-ui-kit

/* src/index.css — add after tailwindcss */
@import "tailwindcss";
@import "@olkoo/web-ui-kit/globals.css";
/* scan kit classes */
@source "../node_modules/@olkoo/web-ui-kit/dist";
03
Use components
Import any component. All Digital Ndop variants work out of the box.
import { Button, Badge }
  from '@olkoo/web-ui-kit'

<Button variant="ndop">
  Sign in with Olkoo
</Button>
<Badge variant="gold">Pro</Badge>
04
Stay up to date
Pull the latest components, tokens, and fixes whenever a new version ships.
# Update to the latest release
npm install @olkoo/web-ui-kit@latest

# Check what's installed
npm list @olkoo/web-ui-kit

# Pin to an exact version
npm install @olkoo/web-ui-kit@0.1.2
↑
Keeping up to date. Releases follow semver — patch releases are always safe to apply. Minor releases may add new variants or tokens; major releases may require CSS variable updates. · Windows users: if you see a doubled URL error (https://…/https://…), your .npmrc has CRLF line endings — resave it with LF or add .npmrc text eol=lf to .gitattributes.
AI Integration

MCP Servers

Give AI assistants first-class knowledge of Digital Ndop. Both servers work with Claude Code and other MCP-compatible tools.

◆

Olkoo UI Kit

Digital Ndop design system intelligence

Gives AI assistants deep knowledge of Digital Ndop cultural variants, design tokens, component APIs, and setup guides. Perfect for generating culturally-authentic Olkoo UI code.

list_components get_component get_design_tokens get_ndop_variants get_setup_guide 
// .mcp.json
{
  "mcpServers": {
    "olkoo-ui-kit": {
      "command": "node",
      "args": ["ui-kit/mcp/server.mjs"]
    }
  }
}
⬡

shadcn/ui

Official shadcn component library server

The official shadcn/ui MCP server. Provides component documentation, code examples, and installation help for all 45 shadcn components bundled in this library.

get-component-docs list-components install-component list-blocks install-blocks 
// .mcp.json
{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["-y", "shadcn@latest", "mcp"]
    }
  }
}