This project is built using Next.js for server-side rendering and Emotion for CSS-in-JS styling. Additionally, Storybook is integrated for creating and testing UI components in isolation. The project also includes a global reset, theming implementation, and typography management.
- Next.js - A React framework for building fast, SEO-friendly applications with server-side rendering.
- Emotion - A powerful CSS-in-JS library used for styling components, offering both
styledandcssprops for flexible styling approaches. - Storybook - A tool for developing UI components in isolation, enabling consistent and reusable design.
- Theming
Centralized theme configuration with customizable design tokens (colors, fonts, etc.) using ThemeProvider from Emotion.
- Typography
A standardized typography system for managing font sizes, weights, and styles across the application.
- Global Reset
CSS reset to ensure consistent styling across browsers.
- Component Development with Storybook
Storybook setup for creating, testing, and documenting UI components in isolation.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!