Features

The Features component provides you with feature showcase sections for landing pages.

Live Examples

Live Example

☀️

Copy

View Code

import { Features, Icon } from '@jarllyng/nostromo' export default function FeaturesExample() { return ( <Features title="Why Choose Nostromo UI?" subtitle="Built with modern web standards and best practices" features={[ { id: 'typescript-first',...

Live Example

☀️

Copy

View Code

import { Features, Icon } from '@jarllyng/nostromo' export default function FeaturesCardsExample() { return ( <Features title="Our Features" subtitle="Everything you need to build amazing products" cardVariant="accent" columns={3} features={[...

Live Example

☀️

Copy

View Code

import { Features, Icon } from '@jarllyng/nostromo' export default function FeaturesMinimalExample() { return ( <Features title="Why Choose Us?" variant="muted" columns={2} centered={true} features={[...

Import


import { Features, Icon } from "@jarllyng/nostromo";
// or
import { Features } from "@jarllyng/nostromo/features";

Usage


import { Features, Icon } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <Features
      title="Why Choose Us?"
      features={[
        {
          title: "Feature 1",
          description: "Description of feature 1",
          icon: <Icon name="star" />,
        },
      ]}
    />
  );
}

Code Examples

Props

Prop	Type	Default	Required	Description
`features`	`Feature[]`	-	Yes	Array of feature objects (see Feature interface below)
`title`	`string`	`undefined`	No	Section title
`subtitle`	`string`	`undefined`	No	Section subtitle
`columns`	`1 \| 2 \| 3 \| 4`	`3`	No	Number of columns in grid
`variant`	`"default" \| "cards" \| "minimal"`	`"default"`	No	Visual variant
`cardVariant`	`"default" \| "outline" \| "filled"`	`"default"`	No	Card variant (when using cards variant)
`centered`	`boolean`	`false`	No	Whether to center content
`className`	`string`	`undefined`	No	Additional CSS classes

Feature Interface


interface Feature {
  title: string;
  description: string;
  icon?: string | React.ReactNode;
}