Cadell's Vanilla Components

A basic component library built with vanilla-extract for use in my NextJS sites, namely prawn.cadell.dev and emojis.cadell.dev.

It uses tsup and np for building and publishing to NPM.

Commands

- npm run build - Build the package.
- npm run release - Publish a new version to NPM.
- npm run build-release - Build and Publish to NPM.

Use with NextJS

Cadell's NextJS Template uses this package.

1. Add cadells-vanilla-components.
``
npm install cadells-vanilla-components @fontsource/source-sans-pro
`
1. Add MDX dependencies.
`
npm install --save-dev @next/mdx
`
1. Add vanilla-extract dependencies.
`
npm install --save-dev @vanilla-extract/css @vanilla-extract/next-plugin
`
1. Setup next.config.js.
`
const withMDX = require("@next/mdx")({
extension: /\.mdx$/,
});

const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
const withVanillaExtract = createVanillaExtractPlugin();

const nextConfig = {
pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
};

module.exports = withVanillaExtract(withMDX(nextConfig));
`
1. Configure _document.tsx inside /pages.
`
import { InitialiseTheme } from "cadells-vanilla-components";
import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
static async getInitialProps(ctx: any) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}

render() {
return (


rel="icon"
href="data:image/svg+xml,"
/>