Skip to content
Get Pro
Sections

Feature Grid

A bento of feature tiles under one light.

$149 once · every Pro piece

Customize

The pointer carries a single radial light across the whole grid; tiles have no resting edge, but every tile's rim within its reach catches the light at once, so neighbouring rims warm together, and the faces pass a trace of it. Tiles span columns and rows and hold a live piece each: here a gauge, a sparkline and a switch you can use.

Install

npx shadcn@latest add @obsyde/feature-grid

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { FeatureGrid } from '@/components/obsyde/ember/feature-grid/FeatureGrid';

export function Example() {
  return (
    <FeatureGrid />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/feature-grid/FeatureGrid.tsxcomponent
  • ember/feature-grid/feature-grid-demo.cssstyles
  • ember/feature-grid/feature-grid.cssstyles
  • ember/feature-grid/FeatureGridDemo.tsxdemo
  • ember/charts-kit/kit.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/chart-kit.tsshared
  • ember/shared/spring.tsshared
  • ember/charts-kit/extras.tsshared
  • ember/charts-kit/charts-kit.cssshared
  • ember/charts-kit/Delta.tsxshared
  • ember/status-kit/kit.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/RollingNumber.tsxshared
  • ember/gauge/gauge.cssshared
  • ember/gauge/Gauge.tsxshared
  • ember/viz-kit/viz-kit.cssshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/sparkline/sparkline.cssshared
  • ember/sparkline/Sparkline.tsxshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/annotations.tsxshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/series.tsxshared
  • ember/actions-kit/kit.tsshared
  • ember/switch/switch.cssshared
  • ember/switch/Switch.tsxshared
  • ember/blocks-kit/kit.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
layoutLayout'bento' | 'even''bento'
columnsColumnsnumber3
radiusLight radius (px)number240