Typed Components,Themed in CSS
GWAN is an open-source React component library for Next.js: 53 typed components and 216 icons, styled with Tailwind CSS v4 and themed with CSS variables, with light and dark mode built in.
MIT licensed · React 19 · Tailwind CSS v4
Components,
Wired Together
Every tile below is running GWAN components with real state, not screenshots. Try them, then open any component in its playground to change its props and copy the code.
Revenue overview
Revenue
$12,480
↑ +8% vs last week
Active users
1,204
→ Steady
Optimised for
Production Flow
Built and tested in Next.js, with a bundle that only carries the components you import.
1"use client";23import { useState } from "react";4import {5Avatar,6AVATAR_VARIANT,7Button,8BUTTON_VARIANTS,9Tag,10TAG_TYPE,11} from "gwan-design-system";1213export default function TeamMember() {14const [invited, setInvited] = useState(false);1516return (17<div className="flex items-center gap-4">18<Avatar19name="Alex Chon"20email="alex@gwan.dev"21variant={AVATAR_VARIANT.INITIALS_ONLY}22/>23<Tag type={TAG_TYPE.SUCCESS} label="Active" />24<Button25variant={BUTTON_VARIANTS.PRIMARY}26label={invited ? "Invited" : "Invite"}27onClick={() => setInvited(true)}28/>29</div>30);31}Tree-shakeable Exports
The ESM build is marked side-effect free, so bundlers drop what you don't import. Import only Button and about 2 KB of library code ends up in your bundle.
Typed Props and Enums
Props are TypeScript interfaces, and variants, sizes and types are enums. A wrong value is a compile error, not a surprise in production.
Theme with CSS Variables
Every colour is a CSS variable in your globals.css, with a light and a dark value. Edit them by hand, or build a palette in the Theme Generator and paste it in.
A Playground for Every Component
Each component has a live playground with a props table: change any prop, see the result, and copy the code it generates.
Server-Rendered in Next.js
Every component server-renders in the App Router. Display components like Badge, Card and Table render directly in Server Components; interactive ones go in a "use client" file.
Built for Next.js.
Expanding Beyond.
GWAN is currently 100% Next.js. But the ecosystem is bigger — React, Remix, and Gatsby support is actively on the roadmap.
Next.js
Full support for App Router, Server Components, and SSR — the foundation GWAN was built on.
React
Pure React compatibility with Vite and CRA — for teams building SPAs without a meta-framework.
Remix
First-class Remix support with nested routing, server loaders, and edge-ready components.
Gatsby
Static-site ready with Gatsby's data layer and image optimisation pipeline in mind.
Want to accelerate a specific framework? Open an issue and let us know.
Nimesh Fonseka
“Our objective isn’t just to provide components, but to provide a cohesive language for the next generation of digital experiences. Precision is our baseline.”