@ultraviolet/nextjs
v3.0.0
Published
Ultraviolet NextJS utility package
Readme
Ultraviolet NextJS
Ultraviolet JS is a utility package to make Ultraviolet UI work with NextJS. This package will guide you through the integration of Ultraviolet UI with Next.js App Router.
Get Started
pnpm add @ultraviolet/nextjs @ultraviolet/ui @ultraviolet/themesIn you NextJS project you can implement the following:
// app/layout.tsx
import { consoleLightTheme } from '@ultraviolet/themes'
import { ThemeRegistry } from '@ultraviolet/nextjs'
import { Button } from '@ultraviolet/ui'
import { ReactNode } from 'react'
import '@ultraviolet/ui/styles'
import '@ultraviolet/themes/global' // For normalisation, not necessary
export default function RootLayout({
children,
}: Readonly<{
children: ReactNode
}>) {
return (
<html lang="en">
<body>
<ThemeRegistry theme={consoleLightTheme}>
{children}
<Button variant="primary">Click Me</Button>
</ThemeRegistry>
</body>
</html>
)
}Limitations
- Fonts: Ultraviolet UI uses custom fonts that need to be imported separately. Make sure to import the fonts CSS file in your project's entry point:
pnpm add @ultraviolet/fontsthen in you GlobalStyle file:
"use client"
import '@ultraviolet/fonts/fonts.css'Documentation
Checkout our documentation website.
Contributing
📝 You can participate in the development and start contributing to it.