Components Guide

Install and use Ink's 12 pre-built UI components -- from contact forms to image galleries.

How Components Work

Ink components are Nunjucks macros bundled with their own CSS and (when needed) JavaScript. When you install a component with the CLI, three things happen:

  1. A Nunjucks partial is added to src/_includes/components/
  2. Component CSS is injected into your stylesheet (src/css/main.css or src/css/tailwind.css -- the CLI auto-detects which one your project uses)
  3. Component JS (if any) is added to src/js/main.js

To use a component in any layout or page, import the macro and call it.

Installing and Removing Components

Install a component by name:

npx ink add component contact-form

List all available components interactively:

npx ink add component

Remove a component you no longer need:

npx ink remove component contact-form

Available Components

Contact Form

A styled, accessible contact form with name, email, phone, and message fields.

npx ink add component contact-form
{% include "components/contact-form.njk" %}

The form submits via POST. Configure the action URL in the include or wire it up to a service like Formspree, Netlify Forms, or Cloudflare Workers.

Feature Grid

A responsive grid of feature cards, perfect for highlighting product or service benefits.

npx ink add component feature-grid
{% include "components/feature-grid.njk" %}

Pulls items from the features collection automatically. Add feature entries with ink add features "Feature Title".

Testimonials

A testimonial carousel or grid displaying client quotes with attribution.

npx ink add component testimonials
{% include "components/testimonials.njk" %}

Testimonial data can be stored in a data file at src/_data/testimonials.json or passed directly to the include.

Pricing Table

A responsive pricing comparison table with tier highlighting.

npx ink add component pricing-table
{% include "components/pricing-table.njk" %}

Define your pricing tiers in src/_data/pricing.json:

[
  {
    "name": "Starter",
    "price": "$29/mo",
    "features": ["5 Pages", "Blog", "SSL"],
    "highlighted": false
  },
  {
    "name": "Pro",
    "price": "$79/mo",
    "features": ["Unlimited Pages", "Blog", "SSL", "Analytics"],
    "highlighted": true
  }
]

Stats Counter

Animated number counters for displaying key metrics (projects completed, clients served, etc.).

npx ink add component stats-counter
{% include "components/stats-counter.njk" %}

This component includes JavaScript for the count-up animation that triggers when the section scrolls into view.

Image Gallery

A responsive image gallery with lightbox support.

npx ink add component image-gallery
{% include "components/image-gallery.njk" %}

Place images in the media/ directory and reference them in your content or a data file. The gallery handles responsive thumbnails and full-size viewing.

Tabs

A tabbed content interface for organizing information into switchable panels.

npx ink add component tabs
{% include "components/tabs.njk" %}

Tabs are built with accessible ARIA roles and keyboard navigation. The component includes the required JavaScript for panel switching.

Logo Cloud

A grid of partner or client logos, ideal for social proof sections.

npx ink add component logo-cloud
{% include "components/logo-cloud.njk" %}

Store logo images in media/logos/ and list them in a data file or pass them directly.

Newsletter Signup

An email signup form for mailing list integration.

npx ink add component newsletter-signup
{% include "components/newsletter-signup.njk" %}

Configure the form action to point to your email service provider (Mailchimp, ConvertKit, Buttondown, etc.).

Timeline

A vertical timeline for displaying company history, project milestones, or process steps.

npx ink add component timeline
{% include "components/timeline.njk" %}

Modal

A reusable modal dialog with open/close controls and backdrop.

npx ink add component modal
{% include "components/modal.njk" %}

Trigger the modal from any button or link using a data-modal-target attribute. The component includes JavaScript for open, close, and escape-key handling.

Social Share

Share buttons for Twitter/X, Facebook, LinkedIn, and email.

npx ink add component social-share
{% include "components/social-share.njk" %}

The component reads the current page URL and title automatically. No API keys required -- it uses native share URLs.

Customizing Component Styles

Every component uses CSS custom properties from your design tokens, so changing your site's --color-primary or --font-heading will automatically update component styles. For deeper customization, find the component's CSS block in your stylesheet -- src/css/main.css or src/css/tailwind.css -- (marked with a comment like /* Component: contact-form */) and edit it directly.

Building Your Own Components

Create a new Nunjucks file in src/_includes/components/, add any styles to your CSS file (src/css/main.css or src/css/tailwind.css), and include it in your templates. Follow the existing components as examples for structure and naming conventions.