Skip to content
For developers·Component library·v1.1.0

GINI components, ready to useCopy, paste, ship

112 components built from the very classes that run gini.iq — buttons, forms, tables, commerce cards and dashboards. Pick one to see it working, take its code as HTML or React, and it runs as-is on any page with three lines.

Browse components(112)Gini API docsConnect the MCP server
  • HTML and React for each
  • RTL ready · WCAG AA
  • Tested on every deploy
Three lines and every component works
index.html · <head>
<link rel="stylesheet" href="https://gini.iq/brand.css">
<link rel="stylesheet" href="https://gini.iq/skeu.css">
<link rel="stylesheet" href="https://gini.iq/gini-ui.css">

On Tailwind v4? Import brand.tailwind.css instead of gini-ui.css.

  • No build step
  • No JavaScript
  • RTL ready

Component library

112 components · 13 groups
001Actions

Primary button — three sizes

The anodized button at 32 / 40 / 44px. Size is layout only — the material is the same.

  • skeu-btn
  • skeu-btn-primary
  • #btn-sizes
— · LTR · 100%
Beyond components

And everything else you need to build with GINI

The commerce platform's APIs, an MCP server for AI assistants, the drop-in brand files, and the materials and tokens the components are built from.

Gini API
124 endpoints · HMAC-SHA256

Build on the Gini commerce platform

Two fully documented APIs: the Merchant API for a merchant to run their store from their own systems, and the Application API for a partner to list Gini merchants and products and send customers to checkout. Every request is signed with HMAC-SHA256, and the docs cover every endpoint with parameters and examples.

All documentationMerchant dashboard loginChangelog
For merchants

Merchant API

112
endpoints

Run your store from your own systems: products, variants and discounts; orders and abandoned carts; settlements and transactions; branches and opening hours; exports and webhooks; and the wholesale market.

  • Store
  • Finance
  • Settings
  • Insights
  • Wholesale
Keys: Client ID and secret from the merchant dashboard → Settings → Integrations
For partner apps

Application API

12
endpoints

Show Gini merchants, their products and reels inside your app, send the customer to checkout with a single link, and follow the orders your app created, with webhook notifications.

  • Merchants
  • Products
  • Reels
  • Checkout
  • Orders
  • Webhooks
Keys: An app_id and app_secret issued by Gini, with the merchants your app may reach

Every request is signed with HMAC-SHA256 over the path and timestamp, sent as X-API-KEY, X-TIMESTAMP and X-SIGNATURE — no sessions, no cookies.

MCP & AI

A public MCP server — the GINI brand inside any AI assistant

No keys, no sign-up: add gini.iq/mcp to your client and the assistant reads colours, logos, components and voice straight from the source — 17 tools, 6 resources and 3 ready prompts.

No authentication17 tools6 resources3 prompts
Server URL
https://gini.iq/mcp

Streamable HTTP, stateless, open CORS — paste it into any MCP-capable client, or pick your client for the ready command.

Try it in MCP Inspectorterminal
npx @modelcontextprotocol/inspector --transport http --server-url https://gini.iq/mcp

MCP Inspector is a local tool: run this in your terminal and the inspector opens in your browser, connected to the server.

About MCP Inspector
Pick your client9
terminalbash
claude mcp add --transport http gini-brand https://gini.iq/mcp
Open
What the server offers26

Tools

17
  • get_brand_overviewName, positioning, facts and every canonical endpoint
  • get_paletteColours in HEX/RGB/HSL/CMYK/Pantone with their roles
  • check_contrastWCAG contrast ratio and rating for any two colours
  • get_typographyTypeface, weights and the type scale
  • get_logosThe right logo files for any surface, with rules and measurements
  • get_product_marksProduct marks and lock-up rules with the GINI mark
  • get_design_systemMaterials, lighting, elevation, radii, motion and tokens
  • list_componentsSearchable index of the copy-ready components
  • get_componentThe full HTML of one component
  • get_layout_systemSpacing scale, grid and breakpoints
  • get_iconographyIcon library and its rules
  • get_imagery_guidelinesPhotography and illustration principles
  • get_mascotsOfficial mascot poses with direct URLs
  • get_voiceVoice traits and writing examples
  • get_press_kitBoilerplate, facts, trademark and FAQ
  • get_brand_promptThe complete system prompt for models
  • get_stylesheetbrand.css, Tailwind, skeu.css or W3C tokens

Resources

6
  • gini://brand/manifestThe full brand manifest (JSON)
  • gini://brand/guideThe brand book (Markdown)
  • gini://brand/promptThe system prompt
  • gini://brand/cssCSS variables
  • gini://component/{id}One component with its code
  • gini://logo/{id}One logo file (SVG)

Prompts

3
  • gini_brand_systemLoad the whole GINI identity into the conversation
  • design_gini_screenDesign a screen or page with GINI components
  • write_gini_copyWrite copy in the GINI voice

This is the brand server, read-only and keyless. Commerce data lives on the commerce MCP server.

Project files
7 files · open CORS

Import the brand in one line

shadcn-compatible CSS variables, a Tailwind v4 block, W3C-format tokens and ready system instructions for Claude, Cursor and coding agents. Every file is a stable URL, read directly and updated without you touching your project.

Pick a file7
brand.csscss
/* globals.css */
@import url("https://gini.iq/brand.css");

/* That's it — every --gini-* token + shadcn alias is now available. */
.btn-primary {
  background: var(--gini-orange);
  color: var(--gini-cream);
}
Open
Materials & tokens

Four materials, eight elevations, five radii

Every skeu-* class is a physical material with a fixed recipe of light, shadow and edge. Know what you are putting on screen before you copy it, and use the same tokens in your own CSS when you need something the library does not have.

  • …

    Matte polymer

    • body
    • .skeu-well

    Page base, recessed trays and wells, input fields

  • Raised ceramic

    • .skeu-panel
    • .skeu-panel-2
    • .skeu-rail
    • .skeu-dialog

    Cards, panels, the navigation rail, dialogs, secondary buttons

  • GINI

    Anodized orange

    • .skeu-btn-primary
    • .skeu-tile
    • .skeu-tab-active
    • .skeu-chip-solid

    The primary button, icon tiles, the active tab, solid badges, the ON switch

  • $ gini

    Graphite

    • .skeu-dark
    • .skeu-btn-dark

    The footer, code windows, dark CTA blocks and the controls on them

08elevation levels05radii15core tokensFull reference in the brand guide
Machine-readable
v1.1.0 · 2026-09

Everything is a stable URL

A JSON manifest with a formal schema, a Markdown book, the logo files, the mascot pack and llms.txt — for any browser, agent or build pipeline. No HTML to parse and no session to hold.

Developer FAQ

What developers ask before the first commit

Short answers on authentication, frameworks, direction, versions and licensing. Not here? Email info@gini.iq.

Which API do I use: the Merchant API or the Application API?
If you are a merchant running your own store from your own systems — products, orders, settlements, stock — use the Merchant API; its keys are in the merchant dashboard under Settings → Integrations. If you are building an app that lists Gini merchants and their products and sends customers to checkout, use the Application API; Gini issues your app an app_id and app_secret. Both sign every request with HMAC-SHA256, but their endpoints and signing rules differ.
What is the difference between the two MCP servers on this page?
gini.iq/mcp is the brand server: public, read-only and keyless, serving colours, logos, components and voice. merchant.gini.iq/mcp/applications is the Application API server: private, it needs your app_id and app_secret, and it works on your app's real data — merchants, products, checkout links and orders.
Do I need an API key or an account to use the MCP server?
No. The server is public, read-only and stateless: it speaks Streamable HTTP at gini.iq/mcp, allows CORS from any origin and asks for no authentication headers. Add it to your client and start asking.
Do the components work with React, Vue or Svelte?
Yes. Every snippet is plain HTML that relies on skeu-* classes only, so it pastes as-is into any framework — in React you swap class for className and nothing else. Static components need no JavaScript; the interactive ones (dialogs, menus, toasts) need the simple show/hide logic you write with your framework's tools.
Is Tailwind required to use the library?
No. Every material lives in skeu.css and works on its own. The snippets use Tailwind utilities for layout only (flex, gap, padding, type sizes); replace them with your own classes or plain CSS and the material, shadows and states stay exactly the same.
How do the components handle Arabic and right-to-left layout?
Every snippet is built with logical properties (ps-, pe-, start, end, text-start) instead of physical left and right, so it mirrors on its own once the page root carries dir="rtl". Numbers, codes and URLs are wrapped in dir="ltr" inside Arabic text, and arrows that indicate direction flip with the locale.
How do I know my copy is current?
The version is stamped in three places that move together: the brand:version meta tag in this page's head, the version field in brand.json and the first comment in skeu.css. The brand is at 1.9 and the design system at 1.1.0; changes are logged in the brand guide's changelog. The URLs never change, so linking to them directly means you always get the latest.
What may I use, and what stays protected?
The stylesheets, components and tokens are published for partners and integrations that build on or alongside GINI, and for editorial use. The logo, name, mascot and colours are registered marks: they are not altered and not used to imply an endorsement or partnership that does not exist. For any commercial co-branding, email info@gini.iq.
I found a bug or need a component that isn't here — what do I do?
Email info@gini.iq with a short description and a link to the component or a screenshot. The library grows with what partners actually ask for, and fixes ship to the same URLs without you changing anything in your project.
Private access

Connect the Application API to your AI assistant

The same Application API, reached from Claude or any MCP client: connect once with your app's credentials and the server signs every call for you. What the API covers and where the keys come from is in the Gini API section above.

Full connection guide
  1. 01claude.ai and Claude DesktopConnectors → Add custom connector, paste the URL, leave the OAuth fields empty, then sign in with your app_id and app_secret.
  2. 02Claude Code and other MCP clientsSend X-App-Id and X-App-Secret as headers on every request; the server does the signing.
  3. 03The Claude API, from your backendUse the MCP connector in the Claude API from your app's own server.
  4. Access tokens last an hour and refresh for up to 30 days. Deactivating your app cuts the connection at once; rotating app_secret does not — ask Gini to revoke existing connections.
MCPURL
https://merchant.gini.iq/mcp/applications
Claude Codeterminal
claude mcp add --transport http gini-applications https://merchant.gini.iq/mcp/applications \
  --header "X-App-Id: <your app_id>" \
  --header "X-App-Secret: <your app_secret>"
JSON config for MCP clients
mcp.json
{
  "mcpServers": {
    "gini-applications": {
      "type": "http",
      "url": "https://merchant.gini.iq/mcp/applications",
      "headers": {
        "X-App-Id": "<your app_id>",
        "X-App-Secret": "<your app_secret>"
      }
    }
  }
}
Need a hand?

The GINI team is a message away

Send your technical question or partner-access request to info@gini.iq and we reply within one business day. For everything about identity — logo, colours, typography, voice — there is the brand guide.

Email the teamOpen the brand guide