@surge-studio/spark
Advanced tools
Surge Studio Design System.
Install the package.
pnpm add @surge-studio/spark
Setup tailwind.config.ts using presets and content.
Use extend to update the colour scheme or any other properties.
import type { Config } from 'tailwindcss';
import colors from 'tailwindcss/colors';
import { tailwindConfig } from '@surge-studio/spark';
const config: Config = {
presets: [tailwindConfig],
content: tailwindConfig.content,
theme: {
extend: {
colors: {
primary: colors.purple,
gray: colors.zinc,
},
},
},
};
export default config;
Apply global styles.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
@apply bg-white text-gray-900;
}
.dark {
@apply bg-gray-950 text-white;
}
}
Add the ThemeProvider and Inter font.
App directory
// app/layout.jsx
import { ThemeProvider } from '@surge-studio/spark';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function Layout({ children }) {
return (
<html suppressHydrationWarning>
<head />
<body className={inter.className}>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}
As per
next-themesif you do not add suppressHydrationWarning to your<html>you will get warnings because next-themes updates that element. This property only applies one level deep, so it won't block hydration warnings on other elements.
Pages directory
// pages/_app.tsx
import type { AppProps } from 'next/app';
import type { FC } from 'react';
import { ThemeProvider } from '@surge-studio/spark';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
const App: FC<AppProps> = ({ Component, pageProps }) => (
<ThemeProvider>
<main className={inter.className}>
<Component {...pageProps} />
</main>
</ThemeProvider>
);
export default App;
Ready to go!
import { Button } from '@surge-studio/spark';
Install packages with pnpm install
Run Storybook with pnpm dev:storybook and navigate to localhost:6006
Run Next.js landing page with pnpm dev:next and navigate to localhost:3000
Run concurrently with pnpm dev
Releases are created manually at this stage in the project.
Prepare build with pnpm package
Test locally with pnpm pack --pack-destination ../
Include in a test project with "@surge-studio/spark": "file:../surge-studio-spark-0.3.0-rc1.tgz"
Publish with npm publish
FAQs
Surge Studio Design System.
The npm package @surge-studio/spark receives a total of 0 weekly downloads. As such, @surge-studio/spark popularity was classified as not popular.
We found that @surge-studio/spark demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.