Documentation

Introduction

Welcome to Titanium! I believe Mantine is the best React component library out there. But when you're building your own application or SaaS, there's still so much more to do to get your app out the door. After shipping several apps myself, I've found myself building the same components over and over again.

With Titanium, I've created a library of components that are easy to use, easy to customize, and easy to integrate into your own application. Just copy, paste, and ship!

My initial focus is landing page blocks. Your landing page is the first thing your users see. It's your chance to make a good impression. Titanium helps you build a landing page that's both beautiful and functional. Using our blocks, you can easily A/B test your landing page and focus and results while we take care of the design and user experience.

Later on the plan is to expand to themes, dashboards, admin panels, and more. Titanium is maintained by a single person and I'm working on it in my free time. If you'd like to see something added, please send me a message on social media.

Frameworks

You'll see in many of the examples that we use Next.js and Motion. This is simply because it's what we use for our own applications. But it's not required to use it. It is simply provided for convenience and can easily be swapped out with regular components.

Next.js

While all of Titanium's are built with Next.js, it's not required to use it. It is simply provided for convenience and can easily be swapped out with regular components. Typically you'll either see a NextImage or a NextLink component. If you choose not to use Next.js, then you can simply replace them with a Mantine Anchor or an Image component respectively.

Image example:

With Next.js:

import NextImage from 'next/image';
import { Image } from '@mantine/core';

<Image
  mb="lg"
  component={NextImage}
  radius="lg"
  src={imageUrl}
  alt={alt}
  sizes={`(max-width: ${theme.breakpoints.xs}) 100vw, (max-width: ${theme.breakpoints.md}) 50vw, 25vw`}
  fill
/>

Without Next.js:

import { Image } from '@mantine/core';

<Image
  mb="lg"
  radius="lg"
  src={imageUrl}
  alt={alt}
/>

Link example:

With Next.js:

import NextLink from 'next/link';
import { Button } from '@mantine/core';

<Button component={NextLink} href="#" variant="outline" radius="xl">
  View All
</Button>

Without Next.js:

import { Button } from '@mantine/core';

<Button href="#" variant="outline" radius="xl">
  View All
</Button>

Note that you can also remove all of the 'use client' directives at the top of files. That is specific for Next.js only

Motion

Titanium uses Framer Motion for animations. If you're not familiar with it, you can learn more about it on their website. Likewise, you can choose to not use any animations at all and is extremely easy to remove them.

Any elements that are animated are wrapped in a <motion.div> component. You can easily remove the animation by removing the component.

Example:

With motion:

import { motion } from 'framer-motion';
import { Badge } from '@mantine/core';

<motion.div
  initial={{ opacity: 0.0 }}
  transition={{ duration: 0.8, ease: 'easeInOut' }}
  viewport={{ once: true }}
  whileInView={{ opacity: 1 }}
>
  <Badge variant="light" size="lg" mb="lg">
    Hiring Simplified
  </Badge>
</motion.div>

Without motion:

import { Badge } from '@mantine/core';

<Badge variant="light" size="lg" mb="lg">
  Hiring Simplified
</Badge>

Tabler icons

We chose the same icon pack recommended by Mantine themselves. But of course you're welcome to use any Icon library you'd like.

Please visit the Tabler Icons for React page for installation instructions.

Getting started

To get started, you can must first install Mantine into your project. Mantine works with Next.js, Vite, and much more. We recommend starting with their getting started guide on their site and then coming back here.

Once you've installed Mantine, you can simply browse through the components and blocks to see what's available. Once you've found what you're looking for, you can simply copy and paste the code into your project.

Some components might have dependencies on other components built by us. If there is a dependency, you'll see the code along with a link to the components page inside the Code tab.

Help support Titanium

Titanium is maintained by a single person and I'm working on it in my free time. If you'd like to see something added, please send me a message on social media, join the Discord, or buy me a coffee.