Component

Card Grid

A thin layout container for arranging cards into responsive columns. Uses the headless @refraction-ui/card-grid core.

Three columns

A standard three-column grid that collapses gracefully on smaller screens.

Analytics

Track engagement across every surface in real time.

Automation

Wire up workflows without writing glue code.

Integrations

Connect the tools your team already uses.

Security

SSO, audit logs, and fine-grained permissions.

Billing

Usage-based pricing with transparent invoices.

Support

Talk to a human whenever you get stuck.

Installation

$pnpm add @refraction-ui/react-card-grid

Usage

tsx

import { CardGrid } from '@refraction-ui/react'

export function MyComponent() {
  return (
    <CardGrid
      columns={3}
      className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
    >
      <div className="rounded-lg border p-5">Analytics</div>
      <div className="rounded-lg border p-5">Automation</div>
      <div className="rounded-lg border p-5">Integrations</div>
    </CardGrid>
  )
}

Two columns

Set columns={2} and adjust your grid classes for a wider, denser layout.