Skip to content
Artmode

Free and open source · MIT

One layout. Seven art directions.

584 free modules — landing sections, UI components, app layouts and effects — for Next.js and Tailwind CSS. Pick a style, preview it live, install it with one command — then make it yours with your brand colors.

Browse 584 modulesGet started
npx shadcn@latest add https://artmode.alpvisionweb.online/r/brutalist-section-hero-poster.json
Hero Poster · BrutalistView module
224
Landing sections
168
UI components
84
App layouts
108
Effects

From idea to page in three steps

  1. 1

    Pick an art direction

    Each one ships its own tokens: colors, fonts, radii, shadows and motion. Recolor it with a palette or your brand color.

  2. 2

    Choose your modules

    Preview every module live, in light and dark, on mobile, tablet and desktop. Read the source before you take it.

  3. 3

    Install in one command

    npx shadcn add copies the module into your components folder with its dependencies. You own the code.

7 art directions

Same building blocks, different personalities — from loud brutalist grids to calm organic curves.

See all modules

Brutalist

brutalist

Raw grids, thick ink strokes, hard shadows, loud primaries.

32
Sections
24
UI
12
App
16
Effects
84 modules

Glass

glass

Frosted panels floating over living gradients.

32
Sections
24
UI
12
App
12
Effects
80 modules

Minimal

minimal

Precise, quiet, fast — the Linear / Vercel school.

32
Sections
24
UI
12
App
16
Effects
84 modules

Mono Clean

mono-clean

Black, white, one signal — and a lot of air.

32
Sections
24
UI
12
App
16
Effects
84 modules

Neo Corporate

neo-corporate

Trustworthy, structured, quietly modern.

32
Sections
24
UI
12
App
16
Effects
84 modules

Organic Soft

organic-soft

Warm, calm and grounded — made by hand, not by grid.

32
Sections
24
UI
12
App
16
Effects
84 modules

Soft Flat

soft-flat

Friendly flat color, soft corners, zero noise.

32
Sections
24
UI
12
App
16
Effects
84 modules

Built to be dropped into real products

  • Token-driven

    Modules read design tokens only. Switch data-da and the same markup takes another art direction.

  • Accessible

    Built for keyboard and screen-reader use, with accessibility notes on every module and visible focus states.

  • Dark mode & responsive

    All 584 modules support dark mode, adapt from mobile to desktop and respect reduced motion.

  • Light on dependencies

    React, Tailwind and at most lucide-react, motion or radix-ui. No runtime to install, no wrapper library.

  • Your brand colors

    Palettes rotate every brand color together, keep contrast readable, and export as CSS tokens.

  • You own the code

    Copied into your project under the MIT License. Change anything — there is no package to update.

Questions

Is it free?

Yes. Every module is released under the MIT License: use it in personal and commercial projects and change it freely. The license only asks you to keep its copyright notice with substantial copies of the code.

What do I need?

A Next.js App Router project with TypeScript and Tailwind CSS v4, initialised with shadcn (npx shadcn init). Modules use at most three packages — lucide-react, motion and radix-ui — installed for you when needed.

Can I mix art directions on one page?

Yes. Each art direction is scoped to an element with data-da, so a Brutalist hero can sit above a Minimal pricing table.

Can I use my brand colors?

Pick a palette or your own color on any art direction page: every preview updates, and you can copy the matching CSS tokens into your project.

Do I have to use shadcn?

No. Every module page shows its full source, so you can copy the files by hand — the shadcn command just does it for you, with the right folders and dependencies.

Start with one module.

Browse the Artmode library, pick what fits your product, and ship it today.

Browse modulesRead the docs