Nextjs Semantic

nextjs-semantic is a boilerplate starter for Next.js that bundles Fomantic-UI and Styled Components into a single preconfigured project, giving React developers a working foundation for building styled web applications. The template is maintained by skydiver on GitHub, and this repository is specifically built around Next.js 12, React 17, Fomantic-UI 2.8, and Styled Components 5.3.

What is nextjs-semantic?

nextjs-semantic is a GitHub starter template that combines Next.js 12, React 17, Fomantic-UI 2.8, and Styled Components 5.3 in one project. It is designed to be cloned, installed, and run immediately, producing a Next.js application with Fomantic-UI components and Styled Components already wired together. The template's core function is to eliminate the manual integration work required to use Fomantic-UI inside a Next.js project.

Key Features

• Fomantic-UI 2.8 by default — The template installs Fomantic-UI (the community fork of Semantic UI) and uses it by default, replacing Semantic UI since version 2.0.0 of this package.
• Semantic UI React components — React component wrappers for Fomantic-UI are installed and recommended; their official docs are linked from the repository.
• Styled Components 5.3 — Preconfigured CSS-in-JS styling with Styled Components, so component-level styles work out of the box.
• Customizable CSS output — semantic.json lets you remove Fomantic-UI components to reduce the generated CSS size.
• Source-level theme editing — The .semantic folder contains Fomantic-UI source files where the default theme can be customized directly.
• Google font swapping — The default font (Lato) can be changed in .semantic/src/themes/default/globals/site.variables.
• Live theme watching — Running npm run semantic:watch watches for theme file changes while you customize.
• One-click Vercel deployment — The repository links to Vercel's deployment flow, allowing a public instance to be created without manual configuration.

Who is it for?

• React developers starting a new project — they can clone the repository, run npm install, build the Semantic CSS, and start with a working Next.js app rather than wiring Fomantic-UI and Styled Components from scratch.
• Teams that want a consistent UI foundation — the bundled Fomantic-UI components and CSS-in-JS setup give a shared starting point for building dashboards or marketing pages.
• Developers evaluating Fomantic-UI — the template demonstrates how Fomantic-UI works alongside Next.js and how to customize its theme at the source level.

What can you do with nextjs-semantic?

• Frontend developers: build a styled Next.js application using Fomantic-UI's ready-made components (buttons, forms, grids) with Styled Components for custom styling.
• Theme designers: modify the Fomantic-UI theme files in .semantic and run semantic:watch to see live updates, then rebuild the CSS with semantic:build.
• Hobbyists and open-source contributors: use the one-click Vercel deployment to put a demo app online quickly, then customize it.

How does nextjs-semantic work?

The setup is a four-step process: clone the repository, run npm install, run npm run semantic:build to generate the Fomantic-UI CSS, and run npm run dev to start the Next.js development server. The template also supports npm run semantic:watch for theme development.

FAQ

Why did the template switch from Semantic UI to Fomantic-UI?

Since version 2.0.0, the package replaced Semantic UI with Fomantic-UI because Semantic UI requires Node 10, Fomantic-UI is actively developed, adds more components, and fixes several security vulnerabilities. Users who still want Semantic UI can use release 1.1.0.

Is nextjs-semantic free?

The template is an open-source GitHub project with no mention of paid tiers or licensing costs; it is free to clone and use.

What versions are included?

The current versions listed are Next.js 12, React 17, Fomantic-UI 2.8, and Styled Components 5.3.

Can I remove unused components to reduce CSS size?

Yes, the semantic.json file lets you remove Fomantic-UI components so the generated CSS is smaller. The .semantic folder contains the source files for deeper theme customization.