Features
The Features component provides you with feature showcase sections for landing pages.
Import
import { Features } from '@nostromo/ui-marketing'
// or
import { Features } from '@nostromo/ui-marketing/features'Usage
import { Features } from '@nostromo/ui-marketing'
export default function Example() {
return (
<Features
title="Why Choose Us?"
features={[
{
title: "Feature 1",
description: "Description of feature 1",
icon: "Star"
}
]}
/>
)
}Live Examples
Live Example
View Code
import { Features } from '@nostromo/ui-marketing'
export default function FeaturesExample() {
return (
<Features
title="Why Choose Nostromo UI?"
subtitle="Built with modern web standards and best practices"
features={[
{
title: "TypeScript First",...
Live Example
View Code
import { Features } from '@nostromo/ui-marketing'
export default function FeaturesCardsExample() {
return (
<Features
title="Our Features"
subtitle="Everything you need to build amazing products"
variant="cards"
columns={3}
features={[...
Live Example
View Code
import { Features } from '@nostromo/ui-marketing'
export default function FeaturesMinimalExample() {
return (
<Features
title="Why Choose Us?"
variant="minimal"
columns={2}
centered={true}
features={[...
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;
}