Get started

Artmode modules are copied into your project, like shadcn/ui: you get the source, not a dependency. It takes one command per module, plus a one-time setup per art direction.

Requirements

Next.js with the App Router and TypeScript.
Tailwind CSS v4 (CSS-first configuration). Tailwind v3 is not supported.
shadcn initialised in the project — it creates components.json and the cn helper in lib/utils.ts:

npx shadcn@latest init

Install a module

Every module page has its install command. It copies the module under components/modules/, installs its npm dependencies and the tokens of its art direction.

npx shadcn@latest add https://artmode.alpvisionweb.online/r/brutalist-section-hero-poster.json

Example: Hero Poster from Brutalist.

Set up an art direction

Once per art direction, three things shadcn cannot do for you. Each art direction page has its own snippets — Brutalist, Glass, Minimal, Mono Clean, Neo Corporate, Organic Soft, Soft Flat. Here with Brutalist:

1Import the tokens in your global CSS

app/globals.css

@import "tailwindcss";
@import "../components/modules/_core/da-theme.css";
@import "../components/modules/brutalist/tokens.css";

Paths are relative to your CSS file — adjust them if it isn't in app/.

2Load the fonts in app/layout.tsx

app/layout.tsx

import { Archivo_Black, Space_Grotesk, Space_Mono } from "next/font/google";

const brutalistDisplay = Archivo_Black({ subsets: ["latin"], variable: "--font-brutalist-display", weight: ["400"] });
const brutalistBody = Space_Grotesk({ subsets: ["latin"], variable: "--font-brutalist-body" });
const brutalistMono = Space_Mono({ subsets: ["latin"], variable: "--font-brutalist-mono", weight: ["400","700"] });

// <html className={`${brutalistDisplay.variable} ${brutalistBody.variable} ${brutalistMono.variable}`}>

3Scope the area

<div data-da="brutalist">
  {/* Brutalist modules */}
</div>

Use it

import { HeroPoster } from "@/components/modules/brutalist/section/hero-poster";

export default function Page() {
  return (
    <div data-da="brutalist">
      <HeroPoster />
    </div>
  );
}

Every prop is optional and defaults to realistic demo content: replace the copy through props (the list is on each module page). Modules with "use client" can be rendered from Server Components as they are.

Theming

Dark mode — add the dark class on <html> (for example with next-themes, attribute="class") or on the scope element.
Mixing art directions — give each module its own scope: <div data-da="minimal"> next to <div data-da="brutalist">, with both setups done.
Your brand colors — choose a palette or your own color on an art direction page, then use Copy CSS and paste it after the art direction's tokens import.
Dialogs and menus — portalled modules take a da prop; set it if you render them in another art direction.

Manual install

No shadcn? Every module page shows the full source:

Copy the module files to components/modules/<art-direction>/<type>/<module>/.
Copy da-theme.css and the art direction's tokens.css (shown under +3 files) next to them.
Install the npm packages listed on the page, and clsx + tailwind-merge for the cn helper.
Follow the art direction setup above.