A React component library for building modern web applications with an earthy and outdoorsy flair.
npm install summit-kitSummit Kit requires React 19.1.0+:
npm install react react-domAdd the required Google Fonts to your HTML <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Molengo&family=Rakkas&display=swap" />Import the global styles in your app entry point:
import "summit-kit/styles";Use server components for SSR-compatible layouts, text, and forms:
import { Section, H1, P, PrimaryButton } from "summit-kit";
function App() {
return (
<Section>
<H1>Welcome</H1>
<P>Build something great with Summit Kit.</P>
<PrimaryButton>Get Started</PrimaryButton>
</Section>
);
}Use client components for browser-only interactivity:
import { PageTurner } from "summit-kit/client";Summit Kit provides three entry points:
| Import path | Description |
|---|---|
summit-kit or summit-kit/server |
Server/SSR-compatible components |
summit-kit/client |
Client-only components and hooks |
summit-kit/styles |
Global stylesheet and CSS custom properties |
Layout: Section, Reading, Flex, Grid, GridHeader, GridRow
Text: H1 -- H6, P, Span, Quote, Ol, Ul, Li, Link, Code
Form: Form, Input, Select, PrimaryButton, SecondaryButton
Media: Image, Icon, Figure
Components: PageTurner
Hooks: useAudio, useKeyPress, toggleFullScreen
npm run storybook # Run Storybook dev server on port 6006
npm run build # Build the library
npm run build-storybook # Build Storybook static site