Features

DaisyUI utilizes TailwindCSS to make beautiful components. See the full list of components.

<div className='tooltip tooltip-right' data-tip="Who's there?">
  <button className='btn' onClick={() => toast('Hatch', { icon: '🤧' })}>
    Knock knock
  </button>
</div>

Daisy UI Themes and `next-themes`

Themes need to be updated in `constant/colors.ts` and in `tailwind.config.js`. Once updated there, additional colors (content and focused background) are generated automatically.

`next-themes` handles theme changing. In its current configuration, it switches between light and dark mode; however, setting up more themes should be very easy.

Supabase

Supabase is the free, open-source alternative to Firebase. It can handle storage, auth, realtime, and much more.

MDX

MDX is a superset of Markdown that allows rendering of JSX components.

import { Callout } from '@/components/mdx/Callout';

<Callout type='info'>
  You can optionally specify the type of a `<Callout />` as one of `info`,
  `success`, `warning`, or `error`.
</Callout>;

You can optionally specify the type of a `<Callout />` as one of `info`, `success`, `warning`, or `error`.

Also, headers automatically get anchor links! Hover any header to see it in action.

Math with $\KaTeX$

$\TeX$ -style equations can be rendered inline with a `$`, or as a block with a `$$`.

$y = mx + b$ is the slope-intercept form of a line.

$y = mx + b$ is the slope-intercept form of a line.

The sum of the first $n$ numbers is defined as

$$
\displaystyle\sum_{i=1}^{n} i = \frac{(n)(n-1)}{2}
$$

The sum of the first $n$ numbers is defined as

\displaystyle\sum_{i=1}^{n} i = \frac{(n)(n-1)}{2}

React Hot Toast

import toast from 'react-hot-toast';

toast.success('Looks good!');
toast.error('Something went wrong');

RHT can do more! Check out their website.

Default Open Graph

Automatically generate OG images and meta using Theodorus Clarence's OG generator.

React Hook Form

I've found RHF to be useful for dealing with custom JS forms. For an example, see /features/forms.

DaisyUI forms have a lot of functionality, but also a lot of bulk. Consider making a component when working with forms.

Snippets

Theodorus Clarence created many useful snippets to accelerate development and keep pages consistent. Below are the ones I use most, but there are more in `.vscode/typescriptreact.code-snippets`.

// nc

//eslint-disable-next-line no-console

// nany

//eslint-disable-next-line @typescript-eslint/no-explicit-any

// np

import * as React from 'react';

import Layout from '@/components/layout/Layout';
import Seo from '@/components/Seo';

export default function Page() {
  return (
    <Layout>
      <Seo templateTitle='' />

      <main className='flex flex-grow'>
        <section className='flex flex-grow'>
          <div className='layout min-h-screen py-20'></div>
        </section>
      </main>
    </Layout>
  );
}

// napi

import { NextApiRequest, NextApiResponse } from 'next';

export default async function Route(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    res.status(200).json({ name: 'Bambang' });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

// nmdx

import Layout from '@/components/layout/Layout';
import Seo from '@/components/Seo';

export default ({ children }) => (
  <Layout>
    <Seo templateTitle='' />
    <main>
      <section className=''>
        <div className='layout prose lg:prose-lg'>{children}</div>
      </section>
    </main>
  </Layout>
);

CSS

The `globals.css` file has several opinionated utility classes.

/**
 * `height-content`
 * Use `h-c` for building non-scrollable pages that take up the whole screen
 */
.h-c {
  height: calc(
    100vh - (var(--h-header) + var(--h-breadcrumbs) + var(--h-footer))
  );
}

/**
 * `min-height-content`
 * Use `min-h-c` for pretty much everything else
 */
.min-h-c {
  min-height: calc(
    100vh - (var(--h-header) + var(--h-breadcrumbs) + var(--h-footer))
  );
  margin-bottom: calc(var(--h-footer) + 2rem);
}

The height classes are automatically applied when using the `np` and `nmdx` snippets.

Use these classes if you want your headers to look the same as they do in `prose`.

.h1 {
  @apply text-4xl font-extrabold lg:text-5xl;
}

.h2 {
  @apply text-2xl font-bold lg:text-3xl;
}

.h3 {
  @apply text-xl font-semibold lg:text-2xl;
}

.h4 {
  @apply text-base font-semibold lg:text-lg;
}

Features

Next.js

TypeScript

DaisyUI