Tools / UI Kit / Bootstrap / Code Blocks

Code Blocks

Inline, terminal, tabbed and diff code blocks.

Terminal Code Block
bash — ~/projects/webnexa
$ npm install
added 128 packages in 3.2s
$ npm run dev
VITE v5.0 ready in 240 ms
➜ Local: http://localhost:5173/
$ 
<div class="uk-code-term">
    <div class="uk-code-term-head">
        <div class="uk-code-term-dots">
            <span class="red"></span>
            <span class="yellow"></span>
            <span class="green"></span>
        </div>
        <div class="uk-code-term-title">bash — ~/projects/webnexa</div>
        <button class="uk-code-term-btn"><i class="fas fa-copy"></i></button>
    </div>
    <div class="uk-code-term-body">
        <div class="uk-code-term-line">
            <span class="uk-code-term-prompt">$</span>
            <span class="uk-code-term-cmd">npm install</span>
        </div>
        <div class="uk-code-term-line uk-code-term-output">added 128 packages</div>
    </div>
</div>

<style>
    .uk-code-term {
        background: #0f172a;
        border-radius: 0.85rem;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
    }
    .uk-code-term-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1rem;
        background: #1e293b;
        border-bottom: 1px solid #334155;
    }
    .uk-code-term-dots {
        display: flex;
        gap: 6px;
    }
    .uk-code-term-dots span {
        width: 12px; height: 12px;
        border-radius: 50%;
    }
    .uk-code-term-dots .red { background: #ef4444; }
    .uk-code-term-dots .yellow { background: #f59e0b; }
    .uk-code-term-dots .green { background: #10b981; }
    .uk-code-term-title {
        flex: 1;
        font-size: 0.75rem;
        color: #94a3b8;
        text-align: center;
        font-family: 'SF Mono', monospace;
    }
    .uk-code-term-btn {
        background: transparent;
        border: 0;
        color: #94a3b8;
        cursor: pointer;
        font-size: 0.8rem;
        padding: 4px;
        border-radius: 4px;
    }
    .uk-code-term-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
    .uk-code-term-body {
        padding: 1.25rem;
        font-family: 'SF Mono', 'Monaco', monospace;
        font-size: 0.82rem;
        line-height: 1.7;
    }
    .uk-code-term-line { display: flex; gap: 0.5rem; }
    .uk-code-term-prompt { color: #10b981; font-weight: 700; }
    .uk-code-term-cmd { color: #e2e8f0; }
    .uk-code-term-output { color: #94a3b8; padding-left: 1rem; }
    .uk-code-term-link { color: #60a5fa; }
    .uk-code-term-cursor {
        display: inline-block;
        width: 8px; height: 14px;
        background: #e2e8f0;
        animation: blink 1s infinite;
    }
    @keyframes blink { 50% { opacity: 0; } }
</style>
Tabbed Code Block
1 <div class="card">
2 <h1>Hello</h1>
3 <p>World</p>
4 </div> 
<div class="uk-code-tabs">
    <div class="uk-code-tabs-nav">
        <button class="uk-code-tabs-btn active">index.html</button>
        <button class="uk-code-tabs-btn">styles.css</button>
        <button class="uk-code-tabs-btn">app.js</button>
        <div class="uk-code-tabs-spacer"></div>
        <button class="uk-code-tabs-copy"><i class="fas fa-copy"></i></button>
    </div>
    <div class="uk-code-tabs-body">
        <div class="uk-code-line">
            <span class="uk-code-num">1</span>
            <span class="uk-code-txt"><span class="uk-code-tag">&lt;div&gt;</span></span>
        </div>
    </div>
</div>

<style>
    .uk-code-tabs {
        background: #0f172a;
        border-radius: 0.85rem;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
    }
    .uk-code-tabs-nav {
        display: flex;
        align-items: center;
        background: #1e293b;
        border-bottom: 1px solid #334155;
        padding: 0 0.5rem;
    }
    .uk-code-tabs-btn {
        padding: 0.75rem 1rem;
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        color: #94a3b8;
        font-size: 0.78rem;
        font-family: 'SF Mono', monospace;
        cursor: pointer;
        transition: all 0.15s;
    }
    .uk-code-tabs-btn:hover { color: #e2e8f0; }
    .uk-code-tabs-btn.active {
        color: #60a5fa;
        border-bottom-color: #60a5fa;
        background: #0f172a;
    }
    .uk-code-tabs-spacer { flex: 1; }
    .uk-code-tabs-copy {
        background: transparent;
        border: 0;
        color: #94a3b8;
        cursor: pointer;
        font-size: 0.8rem;
        padding: 4px 8px;
        border-radius: 4px;
    }
    .uk-code-tabs-copy:hover { color: #fff; background: rgba(255,255,255,0.1); }
    .uk-code-tabs-body {
        padding: 1rem 0;
        font-family: 'SF Mono', 'Monaco', monospace;
        font-size: 0.82rem;
        line-height: 1.7;
    }
    .uk-code-line {
        display: flex;
        padding: 0 1rem;
    }
    .uk-code-line:hover { background: rgba(255,255,255,0.03); }
    .uk-code-num {
        width: 30px;
        color: #475569;
        text-align: right;
        padding-right: 1rem;
        flex-shrink: 0;
        user-select: none;
    }
    .uk-code-txt {
        color: #e2e8f0;
        white-space: pre;
    }
    .uk-code-tag { color: #f472b6; }
    .uk-code-attr { color: #93c5fd; }
    .uk-code-str { color: #86efac; }
</style>
Diff Code Block
git diff
function greet(name) {
- return "Hello " + name;
+ return `Hello ${name}!`;
} 
<div class="uk-code-diff">
    <div class="uk-code-diff-head">
        <span>git diff</span>
        <button class="uk-code-diff-copy"><i class="fas fa-copy"></i></button>
    </div>
    <div class="uk-code-diff-body">
        <div class="uk-code-diff-line removed">
            <span class="uk-code-diff-sign">-</span>
            <span class="uk-code-diff-txt">return "Hello " + name;</span>
        </div>
        <div class="uk-code-diff-line added">
            <span class="uk-code-diff-sign">+</span>
            <span class="uk-code-diff-txt">return `Hello ${name}!`;</span>
        </div>
    </div>
</div>

<style>
    .uk-code-diff {
        background: #0f172a;
        border-radius: 0.85rem;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
    }
    .uk-code-diff-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.65rem 1rem;
        background: #1e293b;
        border-bottom: 1px solid #334155;
        font-size: 0.75rem;
        color: #94a3b8;
        font-family: 'SF Mono', monospace;
    }
    .uk-code-diff-copy {
        background: transparent;
        border: 0;
        color: #94a3b8;
        cursor: pointer;
        font-size: 0.8rem;
        padding: 4px;
    }
    .uk-code-diff-copy:hover { color: #fff; }
    .uk-code-diff-body {
        padding: 0.5rem 0;
        font-family: 'SF Mono', monospace;
        font-size: 0.82rem;
        line-height: 1.7;
    }
    .uk-code-diff-line {
        display: flex;
        gap: 1rem;
        padding: 0 1rem;
    }
    .uk-code-diff-line.added {
        background: rgba(16, 185, 129, 0.1);
        color: #86efac;
    }
    .uk-code-diff-line.removed {
        background: rgba(239, 68, 68, 0.1);
        color: #fca5a5;
    }
    .uk-code-diff-sign {
        width: 12px;
        color: #64748b;
        user-select: none;
    }
    .uk-code-diff-line.added .uk-code-diff-sign { color: #10b981; }
    .uk-code-diff-line.removed .uk-code-diff-sign { color: #ef4444; }
    .uk-code-diff-txt { color: #e2e8f0; white-space: pre; }
    .uk-code-diff-line:not(.added):not(.removed) .uk-code-diff-txt { color: #94a3b8; }
</style>
Inline Code Usage

To install the package, run npm install webnexa-ui in your terminal. Then import it in your main.js file. You can configure the theme using the theme prop.

Ctrl + Shift + P to open command palette 
<p>
    To install, run <code class="uk-code-inline">npm install webnexa-ui</code>.
    Then import it in your <code class="uk-code-inline">main.js</code>.
</p>

<div class="uk-code-kbd-row">
    <span class="uk-code-kbd">Ctrl</span> + <span class="uk-code-kbd">Shift</span> + <span class="uk-code-kbd">P</span>
</div>

<style>
    .uk-code-inline {
        background: #f1f5f9;
        color: #db2777;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'SF Mono', monospace;
        font-size: 0.85em;
    }
    .uk-code-kbd {
        display: inline-block;
        padding: 2px 8px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-bottom-width: 2px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #475569;
        font-family: 'SF Mono', monospace;
    }
</style>
Highlighted Line Code Block
app.js
1 const express = require('express');
2 const app = express();
3 app.use(express.json());
4 app.listen(3000); 
<div class="uk-code-hl">
    <div class="uk-code-hl-head">
        <span>app.js</span>
        <button class="uk-code-hl-copy"><i class="fas fa-copy"></i></button>
    </div>
    <div class="uk-code-hl-body">
        <div class="uk-code-hl-line">
            <span class="uk-code-hl-num">1</span>
            <span class="uk-code-hl-txt">const express = require('express');</span>
        </div>
        <div class="uk-code-hl-line highlight">
            <span class="uk-code-hl-num">3</span>
            <span class="uk-code-hl-txt">app.use(express.json());</span>
        </div>
    </div>
</div>

<style>
    .uk-code-hl {
        background: #0f172a;
        border-radius: 0.85rem;
        overflow: hidden;
    }
    .uk-code-hl-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.65rem 1rem;
        background: #1e293b;
        color: #94a3b8;
        font-size: 0.75rem;
        font-family: 'SF Mono', monospace;
    }
    .uk-code-hl-copy {
        background: transparent;
        border: 0;
        color: #94a3b8;
        cursor: pointer;
    }
    .uk-code-hl-copy:hover { color: #fff; }
    .uk-code-hl-body {
        padding: 0.5rem 0;
        font-family: 'SF Mono', monospace;
        font-size: 0.82rem;
        line-height: 1.7;
    }
    .uk-code-hl-line {
        display: flex;
        padding: 0 1rem;
    }
    .uk-code-hl-line.highlight {
        background: rgba(96, 165, 250, 0.12);
        border-left: 3px solid #60a5fa;
        padding-left: calc(1rem - 3px);
    }
    .uk-code-hl-num {
        width: 30px;
        color: #475569;
        text-align: right;
        padding-right: 1rem;
        flex-shrink: 0;
        user-select: none;
    }
    .uk-code-hl-txt {
        color: #e2e8f0;
        white-space: pre;
    }
</style>
Code Block with Language Badge
Python
def greet(name):
"""Say hello"""
print(f"Hello, {name}!")
greet("World")
<div class="uk-code-badge-wrap">
    <div class="uk-code-badge-head">
        <div class="uk-code-badge-lang">
            <i class="fab fa-python"></i> Python
        </div>
        <button class="uk-code-badge-copy"><i class="fas fa-copy"></i> Copy</button>
    </div>
    <div class="uk-code-badge-body">
        <div class="uk-code-badge-line"><span class="uk-code-badge-kw">def</span> ...</div>
    </div>
</div>

<style>
    .uk-code-badge-wrap {
        background: #0f172a;
        border-radius: 0.85rem;
        overflow: hidden;
    }
    .uk-code-badge-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.65rem 1rem;
        background: #1e293b;
    }
    .uk-code-badge-lang {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
    }
    .uk-code-badge-lang i { color: #fbbf24; font-size: 0.9rem; }
    .uk-code-badge-copy {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 4px 10px;
        background: #334155;
        color: #e2e8f0;
        border: 0;
        border-radius: 0.4rem;
        font-size: 0.72rem;
        font-weight: 600;
        cursor: pointer;
    }
    .uk-code-badge-copy:hover { background: #475569; }
    .uk-code-badge-body {
        padding: 1rem 1.25rem;
        font-family: 'SF Mono', monospace;
        font-size: 0.82rem;
        line-height: 1.8;
        color: #e2e8f0;
    }
    .uk-code-badge-kw { color: #f472b6; }
    .uk-code-badge-fn { color: #60a5fa; }
    .uk-code-badge-arg { color: #fbbf24; }
    .uk-code-badge-str { color: #86efac; }
</style>