import { Box, Container, Grid, Paper, Typography } from '@mui/material';
import { TbComponents, TbFingerprint, TbPalette, TbRefresh, } from 'react-icons/tb';
const features = [
    {
        name: 'Comprehensive Component Library',
        description: 'Access a wide range of pre-built, customizable components to rapidly construct your user interface.',
        icon: TbComponents,
    },
    {
        name: 'Accessibility-First Design',
        description: 'Ensure your application is usable by everyone with our WCAG 2.1 compliant components and helpful accessibility tools.',
        icon: TbFingerprint,
    },
    {
        name: 'Flexible Theming System',
        description: 'Easily customize the look and feel of your application with our powerful and intuitive theming capabilities.',
        icon: TbPalette,
    },
    {
        name: 'Auto-updating Components',
        description: 'Stay current with the latest design trends and best practices through our regularly updated component library.',
        icon: TbRefresh,
    },
];
export default function FeatureGrid() {
    return (<Box sx={{
            bgcolor: 'background.paper',
        }}>
      <Container maxWidth='md'>
        <Box sx={{ maxWidth: 'md', mx: 'auto', textAlign: { lg: 'center' } }}>
          <Typography sx={{
            color: 'primary.700',
            fontWeight: 600,
            fontSize: 'md',
            textTransform: 'uppercase',
            letterSpacing: 1,
        }}>
            Modern UI Kit
          </Typography>
          <Typography sx={{
            mt: 0.5,
            color: 'gray.900',
            fontWeight: 700,
            fontSize: { xs: '3xl', sm: '5xl' },
            lineHeight: 1.2,
            textWrap: 'balance',
            isolation: 'isolate',
        }}>
            Everything you need in one place
          </Typography>
          <Typography sx={{
            mt: 1.5,
            color: 'gray.600',
            fontSize: 'lg',
            lineHeight: 1.75,
        }}>
            Our comprehensive React UI kit provides you with all the tools and
            components you need to create stunning, responsive, and accessible
            web applications quickly and efficiently.
          </Typography>
        </Box>
        <Box sx={{
            mt: 4,
            maxWidth: 'lg',
            mx: 'auto',
            display: 'grid',
            gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
            gap: 2,
        }}>
          {features.map(feature => (<Grid item xs={12} sm={6} key={feature.name}>
              <Box sx={{
                padding: 0.5,
                border: theme => `1px solid ${theme.palette.divider}`,
                borderRadius: 2.5,
                boxShadow: 1,
            }}>
                <Paper elevation={0} sx={{
                pt: 7,
                border: 'none',
                backgroundColor: 'gray.50',
                p: 3,
                borderRadius: 2,
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                gap: 1,
            }}>
                  <Box sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: 36,
                height: 36,
                borderRadius: 999,
                color: 'background.default',
                bgcolor: 'primary.700',
            }}>
                    <feature.icon size={24} color='currentColor'/>
                  </Box>
                  <Typography sx={{ color: 'gray.900', fontWeight: 600, fontSize: 'md' }}>
                    {feature.name}
                  </Typography>
                  <Typography sx={{
                mt: 0.5,
                color: 'gray.600',
                fontSize: 'md',
                lineHeight: 1.5,
            }}>
                    {feature.description}
                  </Typography>
                </Paper>
              </Box>
            </Grid>))}
        </Box>
      </Container>
    </Box>);
}


import { Box, Container, Grid, Paper, Typography } from '@mui/material';
import {
  TbComponents,
  TbFingerprint,
  TbPalette,
  TbRefresh,
} from 'react-icons/tb';

const features = [
  {
    name: 'Comprehensive Component Library',
    description:
      'Access a wide range of pre-built, customizable components to rapidly construct your user interface.',
    icon: TbComponents,
  },
  {
    name: 'Accessibility-First Design',
    description:
      'Ensure your application is usable by everyone with our WCAG 2.1 compliant components and helpful accessibility tools.',
    icon: TbFingerprint,
  },
  {
    name: 'Flexible Theming System',
    description:
      'Easily customize the look and feel of your application with our powerful and intuitive theming capabilities.',
    icon: TbPalette,
  },
  {
    name: 'Auto-updating Components',
    description:
      'Stay current with the latest design trends and best practices through our regularly updated component library.',
    icon: TbRefresh,
  },
];

export default function FeatureGrid() {
  return (
    <Box
      sx={{
        bgcolor: 'background.paper',
      }}
    >
      <Container maxWidth='md'>
        <Box sx={{ maxWidth: 'md', mx: 'auto', textAlign: { lg: 'center' } }}>
          <Typography
            sx={{
              color: 'primary.700',
              fontWeight: 600,
              fontSize: 'md',
              textTransform: 'uppercase',
              letterSpacing: 1,
            }}
          >
            Modern UI Kit
          </Typography>
          <Typography
            sx={{
              mt: 0.5,
              color: 'gray.900',
              fontWeight: 700,
              fontSize: { xs: '3xl', sm: '5xl' },
              lineHeight: 1.2,
              textWrap: 'balance',
              isolation: 'isolate',
            }}
          >
            Everything you need in one place
          </Typography>
          <Typography
            sx={{
              mt: 1.5,
              color: 'gray.600',
              fontSize: 'lg',
              lineHeight: 1.75,
            }}
          >
            Our comprehensive React UI kit provides you with all the tools and
            components you need to create stunning, responsive, and accessible
            web applications quickly and efficiently.
          </Typography>
        </Box>
        <Box
          sx={{
            mt: 4,
            maxWidth: 'lg',
            mx: 'auto',
            display: 'grid',
            gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
            gap: 2,
          }}
        >
          {features.map(feature => (
            <Grid item xs={12} sm={6} key={feature.name}>
              <Box
                sx={{
                  padding: 0.5,
                  border: theme => `1px solid ${theme.palette.divider}`,
                  borderRadius: 2.5,
                  boxShadow: 1,
                }}
              >
                <Paper
                  elevation={0}
                  sx={{
                    pt: 7,
                    border: 'none',
                    backgroundColor: 'gray.50',
                    p: 3,
                    borderRadius: 2,
                    height: '100%',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 1,
                  }}
                >
                  <Box
                    sx={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: 36,
                      height: 36,
                      borderRadius: 999,
                      color: 'background.default',
                      bgcolor: 'primary.700',
                    }}
                  >
                    <feature.icon size={24} color='currentColor' />
                  </Box>
                  <Typography
                    sx={{ color: 'gray.900', fontWeight: 600, fontSize: 'md' }}
                  >
                    {feature.name}
                  </Typography>
                  <Typography
                    sx={{
                      mt: 0.5,
                      color: 'gray.600',
                      fontSize: 'md',
                      lineHeight: 1.5,
                    }}
                  >
                    {feature.description}
                  </Typography>
                </Paper>
              </Box>
            </Grid>
          ))}
        </Box>
      </Container>
    </Box>
  );
}


import { Box, Typography } from '@mui/material';
import * as React from 'react';
import { TbCube3dSphere, TbDeviceMobile, TbLayout, TbPalette, } from 'react-icons/tb';
// features with tighter spacing
export default function FeaturesSmallColumn({ features = [
    {
        icon: <TbCube3dSphere />,
        title: 'Beautiful default theme',
        description: 'With harmonic scales and high-level utility abstractions like Tailwind and Styled System.',
    },
    {
        icon: <TbDeviceMobile />,
        title: 'Fully responsive',
        description: 'With mobile sizes ergonically built with the responsive object syntax.',
    },
    {
        icon: <TbPalette />,
        title: 'Completely themeable',
        description: 'With TypeScript defined theme tokens, variants, and scales.',
    },
    {
        icon: <TbLayout />,
        title: 'Modern techniques',
        description: 'Grid and Flex native, limited margins and padding.',
    },
], }) {
    return (<Box sx={{
            display: 'grid',
            gridTemplateColumns: {
                sm: 'repeat(2,minmax(0,1fr))',
                md: 'repeat(4,minmax(0,1fr))',
            },
            gap: 4,
            px: { xs: 0, sm: 2 },
            py: 6,
        }}>
      {features.map((feature) => {
            return (<Feature key={feature.title} icon={feature.icon} title={feature.title} description={feature.description}/>);
        })}
    </Box>);
}
function Feature({ title, description, icon, }) {
    return (<Box sx={{
            display: 'flex',
            flexDirection: 'column',
            fontSize: 'md',
            lineHeight: 1.5,
            gap: 1,
        }}>
      <Box>{icon}</Box>
      <Typography sx={{
            fontWeight: 600,
        }}>
        {title}
      </Typography>
      {description}
    </Box>);
}


import { Box, Typography } from '@mui/material';
import * as React from 'react';
import {
  TbCube3dSphere,
  TbDeviceMobile,
  TbLayout,
  TbPalette,
} from 'react-icons/tb';
// features with tighter spacing
export default function FeaturesSmallColumn({
  features = [
    {
      icon: <TbCube3dSphere />,
      title: 'Beautiful default theme',
      description:
        'With harmonic scales and high-level utility abstractions like Tailwind and Styled System.',
    },
    {
      icon: <TbDeviceMobile />,
      title: 'Fully responsive',
      description:
        'With mobile sizes ergonically built with the responsive object syntax.',
    },
    {
      icon: <TbPalette />,
      title: 'Completely themeable',
      description:
        'With TypeScript defined theme tokens, variants, and scales.',
    },
    {
      icon: <TbLayout />,
      title: 'Modern techniques',
      description: 'Grid and Flex native, limited margins and padding.',
    },
  ],
}: {
  features: FeatureProps[];
}) {
  return (
    <Box
      sx={{
        display: 'grid',
        gridTemplateColumns: {
          sm: 'repeat(2,minmax(0,1fr))',
          md: 'repeat(4,minmax(0,1fr))',
        },
        gap: 4,
        px: { xs: 0, sm: 2 },
        py: 6,
      }}
    >
      {features.map((feature: FeatureProps) => {
        return (
          <Feature
            key={feature.title}
            icon={feature.icon}
            title={feature.title}
            description={feature.description}
          />
        );
      })}
    </Box>
  );
}
function Feature({
  title,
  description,
  icon,
}: {
  title: string;
  description: string;
  icon: React.ReactNode;
}) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        fontSize: 'md',
        lineHeight: 1.5,
        gap: 1,
      }}
    >
      <Box>{icon}</Box>
      <Typography
        sx={{
          fontWeight: 600,
        }}
      >
        {title}
      </Typography>
      {description}
    </Box>
  );
}
type FeatureProps = {
  title: string;
  description: string;
  icon: React.ReactNode;
};


import React from 'react';
import { Box, Typography } from '@mui/material';
import { TbCurrencyDollar, TbGlobe, TbRocket } from 'react-icons/tb';
// 3 column features with icons
export default function FeaturesSimpleColumn() {
    const Feature = ({ title, icon, children, }) => {
        return (<Box sx={{
                display: 'flex',
                flexDirection: 'column',
                gap: 1.5,
                px: { xs: 2, md: 4 },
            }}>
        <Box sx={{
                width: 'max-content',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                p: 1.5,
                borderRadius: 999,
                bgcolor: 'primary.50',
                color: 'primary.600',
                borderColor: 'primary.600',
                borderWidth: 1.5,
                borderStyle: 'solid',
                mb: { sm: 0.5, md: 1 },
                boxShadow: 2,
            }}>
          {icon}
        </Box>
        <Typography variant='h3' sx={{
                fontWeight: 600,
                fontSize: '2xl',
            }}>
          {title}
        </Typography>
        <Typography sx={{
                lineHeight: '1.85',
            }} color='gray.600'>
          {children}
        </Typography>
      </Box>);
    };
    return (<Box sx={{
            display: 'grid',
            gridTemplateColumns: {
                sm: 'repeat(1, 1fr)',
                md: 'repeat(3, 1fr)',
            },
            gridGap: (theme) => theme.spacing(6),
            maxWidth: {
                sm: '50ch',
                md: '100%',
            },
        }}>
      <Feature title='Launch faster' icon={<TbRocket size={20}/>}>
        What we lack in features we make up for in speed, less code runs faster
        than more code.
      </Feature>
      <Feature title='Drive revenue growth' icon={<TbCurrencyDollar size={20}/>}>
        Slow and steady wins the race. Even growing 1% month over month is still
        technically considered growth.
      </Feature>

      <Feature title='Scale worldwide' icon={<TbGlobe size={20}/>}>
        If you make sure to copy/paste the page contents into Google translate
        first, our site is accessible from anywhere in the world.
      </Feature>
    </Box>);
}


import React from 'react';
import { Box, Theme, Typography } from '@mui/material';
import { HiBeaker } from 'react-icons/hi';
import { TbCurrencyDollar, TbGlobe, TbRocket, TbWorld } from 'react-icons/tb';
// 3 column features with icons
export default function FeaturesSimpleColumn() {
  const Feature = ({
    title,
    icon,
    children,
  }: {
    title: string;
    icon: React.ReactNode;
    children: React.ReactNode;
  }) => {
    return (
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: 1.5,
          px: { xs: 2, md: 4 },
        }}
      >
        <Box
          sx={{
            width: 'max-content',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            p: 1.5,
            borderRadius: 999,
            bgcolor: 'primary.50',
            color: 'primary.600',
            borderColor: 'primary.600',
            borderWidth: 1.5,
            borderStyle: 'solid',
            mb: { sm: 0.5, md: 1 },
            boxShadow: 2,
          }}
        >
          {icon}
        </Box>
        <Typography
          variant='h3'
          sx={{
            fontWeight: 600,
            fontSize: '2xl',
          }}
        >
          {title}
        </Typography>
        <Typography
          sx={{
            lineHeight: '1.85',
          }}
          color='gray.600'
        >
          {children}
        </Typography>
      </Box>
    );
  };

  return (
    <Box
      sx={{
        display: 'grid',
        gridTemplateColumns: {
          sm: 'repeat(1, 1fr)',
          md: 'repeat(3, 1fr)',
        },
        gridGap: (theme: Theme) => theme.spacing(6),
        maxWidth: {
          sm: '50ch',
          md: '100%',
        },
      }}
    >
      <Feature title='Launch faster' icon={<TbRocket size={20} />}>
        What we lack in features we make up for in speed, less code runs faster
        than more code.
      </Feature>
      <Feature
        title='Drive revenue growth'
        icon={<TbCurrencyDollar size={20} />}
      >
        Slow and steady wins the race. Even growing 1% month over month is still
        technically considered growth.
      </Feature>

      <Feature title='Scale worldwide' icon={<TbGlobe size={20} />}>
        If you make sure to copy/paste the page contents into Google translate
        first, our site is accessible from anywhere in the world.
      </Feature>
    </Box>
  );
}


Features Sections

Feature Grid

Small features columns

Simple features with columns