@ddmetrics/untitled-ui-make-kit

~297 pre-built Untitled UI marketing section components packaged for Figma Make. React 18 + Vite + Tailwind 4.

Install

npm install @ddmetrics/untitled-ui-make-kit

Usage

import "@ddmetrics/untitled-ui-make-kit/style.css";

import {
  HeroSplitImage01,
  FeaturesIconsAndImage01,
  CTASimpleCentered,
  FooterLarge01,
  catalog,
} from "@ddmetrics/untitled-ui-make-kit";

export default function App() {
  return (
    <>
      <HeroSplitImage01 />
      <FeaturesIconsAndImage01 />
      <CTASimpleCentered />
      <FooterLarge01 />
    </>
  );
}

Components are static section demos with hardcoded content. Render them directly or copy their JSX and customize inline.

Catalog

The package exports a catalog array with metadata for every section:

import { catalog } from "@ddmetrics/untitled-ui-make-kit";
// catalog: SectionMeta[] — { name, category, subcategory, layout, features, brand, filename }

Use it for AI-driven component selection by filtering on subcategory, layout, and features.

Section Categories

| Subcategory | Examples | |---|---| | heroes | HeroSplitImage01, HeroScreenMockup01, HeroAbstractAngles01 | | features | FeaturesIconsAndImage01, FeaturesTabsMockup01, FeaturesSimpleIcons01 | | pricing | PricingSimpleBanner, PricingLargeTable01 | | cta | CTASimpleCentered, CTAScreenMockup01 | | testimonials | TestimonialSplitImage01, TestimonialSocialCards01 | | newsletter | NewsletterCardHorizontal, NewsletterSimpleCentered | | faq | FAQAccordion01–04 | | footers | FooterLarge01, FooterSimpleCentered | | headers | HeaderCentered, HeaderLeft, HeaderSpaceBetween | | contact | ContactSimpleForm01, ContactSplitImage01 | | content | ContentAlternative01, ContentLargeImage01 | | metrics | MetricsCardBrandDark, MetricsImageWithCards01 | | banners | BannerSlimBrand, BannerDualActionDefault | | 404 | NotFoundSimple01, NotFoundSplitImage01 |

Peer Dependencies

• react ^18.3.1
• react-dom ^18.3.1

Development

npm install
npm run generate   # regenerate barrel exports + catalog
npm run build      # vite build + tsc declarations
npm run rebuild    # generate + build

Publish

npm login
npm publish --access public