Feature Grid

Overview

Feature Grid is a design-system component intended for reusable, product-agnostic UI composition.

Import


import { FeatureGrid, FeatureCard, FeatureIcon, FeatureTitle, FeatureDescription, featureCardVariants } from "@tesseract-nexus/tesserix-ui"

Exports


export { FeatureGrid, FeatureCard, FeatureIcon, FeatureTitle, FeatureDescription, featureCardVariants } from "./feature-grid"

Props


interface FeatureCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof featureCardVariants> {}
 
const FeatureCard = React.forwardRef<HTMLDivElement, FeatureCardProps>(
  ({ className, emphasis, ...props }, ref) => (
    <article ref={ref} className={cn(featureCardVariants({ emphasis }), className)} {...props} />
  )
)
FeatureCard.displayName = "FeatureCard"
 
const FeatureIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("mb-3 inline-flex rounded-lg border bg-background p-2 text-primary", className)} {...props} />
  )
)
FeatureIcon.displayName = "FeatureIcon"
 
const FeatureTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn("text-base font-semibold tracking-tight", className)} {...props} />
  )
)
FeatureTitle.displayName = "FeatureTitle"
 
const FeatureDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p ref={ref} className={cn("mt-2 text-sm text-muted-foreground", className)} {...props} />
))
FeatureDescription.displayName = "FeatureDescription"
 
export { FeatureGrid, FeatureCard, FeatureIcon, FeatureTitle, FeatureDescription, featureCardVariants }

Variations


const featureCardVariants = cva("rounded-2xl border bg-card p-5 shadow-sm", {
  variants: {
    emphasis: {
      default: "",
      highlighted: "border-primary/40 bg-primary/5",
      muted: "bg-muted/30",
    },
  },
  defaultVariants: {

Usage Patterns

Basic


import { FeatureGrid, FeatureCard, FeatureIcon, FeatureTitle, FeatureDescription, featureCardVariants } from "@tesseract-nexus/tesserix-ui"
 
export function Example() {
  return <FeatureGrid />
}

Do / Don’t

Do


// Compose with domain wrappers in product code
<FeatureGrid className="w-full" />

Don’t


// Avoid one-off hardcoded values that bypass tokens
<FeatureGrid className="bg-[#123456] text-[#fafafa] px-[13px]" />

Token / Theming Mapping

Color tokens: —primary, —secondary, —muted, —destructive, —foreground, —background
Shape tokens: —radius
Border/input tokens: —border, —input, —ring
Spacing and typography: Tailwind scale via design-system preset

Interaction Test Checklist

Interaction: click/keyboard activation for primary paths.
Focus: visible focus styles and logical tab order.
Variants: core variants and sizes render correctly.
Disabled/error states: behavior and ARIA attributes are correct.
Regression: Storybook visual check for primary states.

Accessibility

Verify keyboard behavior for all interactive states.
Ensure labels and semantic roles are present in consuming screens.
Validate focus treatment and screen-reader output during QA.