Geist is a new font family for Vercel, created by Vercel in collaboration with Basement Studio.
The geist npm package is a React component library that provides a set of high-quality, customizable UI components. It is designed to help developers build modern, responsive web applications with ease.
Button
The Button component allows you to create various types of buttons with different styles and states. The example shows a success button.
<Button type='success'>Success</Button>Modal
The Modal component is used to create dialog boxes or pop-ups. The example demonstrates a simple modal with a title and content.
<Modal visible={true}><Modal.Title>Title</Modal.Title><Modal.Content>Content</Modal.Content></Modal>Input
The Input component provides a way to create text input fields. The example shows a basic input field with a placeholder.
<Input placeholder='Enter text' />Card
The Card component is used to display content in a card layout. The example shows a simple card with content.
<Card><Card.Content>Card Content</Card.Content></Card>Material-UI is a popular React component library that implements Google's Material Design. It offers a wide range of components and customization options, making it a robust choice for building modern web applications. Compared to geist, Material-UI has a larger community and more extensive documentation.
Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to build React applications. It focuses on ease of use and accessibility, similar to geist, but offers a different set of design principles and components.
Ant Design is a comprehensive UI framework for enterprise applications. It provides a wide range of high-quality components and design guidelines. Compared to geist, Ant Design is more feature-rich and is often used in larger, more complex applications.
Geist is a new font family for Vercel, created by Vercel in collaboration with Basement Studio.
Geist Sans is a sans-serif typeface designed for legibility and simplicity. It is a modern, geometric typeface that is based on the principles of classic Swiss typography. It is designed to be used in headlines, logos, posters, and other large display sizes.
Geist Mono is a monospaced typeface that has been crafted to be the perfect partner to Geist Sans. It is designed to be used in code editors, diagrams, terminals, and other textbased interfaces where code is represented.
npm install geist
In your app/layout.js:
import { GeistSans } from "geist/font";
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={GeistSans.className}>
<body>{children}</body>
</html>
)
}
In your pages/_app.js:
import { GeistSans } from "geist/font";
export default function MyApp({ Component, pageProps }) {
return (
<main className={GeistSans.className}>
<Component {...pageProps} />
</main>
)
}
GeistSans and GeistMono can be used through a CSS variable.
GeistSans: --font-geist-sansGeistMono: --font-geist-monoIn your app/layout.js:
import { GeistSans, GeistMono } from 'geist/font'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
<body>{children}</body>
</html>
)
}
Then in your tailwind.config.js:
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['var(--font-geist-sans)'],
mono: ['var(--font-geist-mono)'],
},
},
},
}
In your pages/_app.js:
import { GeistSans, GeistMono } from 'geist/font'
export default function MyApp({ Component, pageProps }) {
return (
<main className={`${GeistSans.variable} ${GeistMono.variable}`}>
<Component {...pageProps} />
</main>
)
}
Then in your tailwind.config.js:
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['var(--font-geist-sans)'],
mono: ['var(--font-geist-mono)'],
},
},
},
}
The Geist font family is free and open sourced under the SIL Open Font License.
Geist has been influenced and inspired by the following typefaces: Inter, Univers, SF Mono, SF Pro, Suisse International, ABC Diatype Mono, and ABC Diatype. We thank the creators of these typefaces for their craft.
FAQs
Geist is a new font family for Vercel, created by Vercel in collaboration with Basement Studio.
The npm package geist receives a total of 105,559 weekly downloads. As such, geist popularity was classified as popular.
We found that geist demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.