Code & Developer
8 code and developer-focused components. Code block with syntax highlighting, code tabs for multi-language snippets, terminal block, API endpoint docs, JSON viewer, API response preview, CLI install instructions, and version badges.
code-block.astro
index.astro html
1
<div class="container">
2
<h1>Hello, World!</h1>
3
<p>Welcome to our theme.</p>
4
</div>
code-tabs.astro
<button class="btn">Click me</button>.btn {
padding: 0.5rem 1rem;
background: var(--palette-accent);
border-radius: var(--radius-md);
}document.querySelector('.btn')
.addEventListener('click', () => alert('Hi!')); terminal-block.astro
$ npm install our-theme
added 1 package in 2s
$ npx astro add our-theme
api-endpoint.astro
GET
/api/users Returns a list of all users.
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
limit | number | No | Max results (default: 10) |
offset | number | No | Skip N results |
POST
/api/users Creates a new user.
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
email | string | Yes | User email |
name | string | No | Display name |
json-viewer.astro
Sample Object
12345678910111213
{ "id": 1, "name": "Acme Corp", "active": true, "tags": [ "enterprise", "premium" ], "metadata": { "created": "2025-01-15", "region": "us-west" }}
api-response.astro
200 OK
{
"users": [
{
"id": 1,
"name": "Alice",
"email": "alice@example.com"
},
{
"id": 2,
"name": "Bob",
"email": "bob@example.com"
}
],
"total": 2
} cli-install.astro
npm install our-theme yarn add our-theme pnpm add our-theme bun add our-theme version-badge.astro (ui/)