@stacklearner/spark-ui
v0.0.5
Published
Spark-UI is a UI library for building web applications with [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/).
Keywords
Readme
Spark-UI
Spark-UI is a UI library for building web applications with React and TypeScript.
Installation Instructions
Yarn
yarn add @stacklearner/spark-ui @emotion/css @emotion/react @emotion/styledNPM
npm install @stacklearner/spark-ui @emotion/css @emotion/react @emotion/styledFont Integration
Spark-UI uses the Poppins font by default. Add it to your project with the Google Fonts CDN. To install Roboto through the Google Web Fonts CDN, add the following code inside your project's tag:
For React project
Copy the following links to your index.html.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>For Next.js project (App router)
Make your app/layout.tsx like following.
import type { Metadata } from 'next';
import { Poppins } from 'next/font/google';
const inter = Poppins({
weight: ['300', '400', '500', '600', '700'],
subsets: ['latin'],
display: 'swap',
});
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}Usage
After installation you can import the library into your project. But at first wrap your app with SparkProvider in your root component.
For React project
import { SparkProvider } from '@stacklearner/spark-ui';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<SparkProvider>
<App />
</SparkProvider>
</React.StrictMode>,
);For Next.js project (App router)
At first you have to make a file named like Provider.tsx. You can give any name. In this file copy and paste the following code.
// Provider.tsx
'use client';
import { SparkProvider } from '@stacklearner/spark-ui';
type ProviderProps = {
children: React.ReactNode;
};
const Provider: React.FC<ProviderProps> = ({ children }) => (
<SparkProvider>{children}</SparkProvider>
);
export default Provider;Then add Provider to your app/layout.tsx file.
import type { Metadata } from 'next';
import { Poppins } from 'next/font/google';
import Provider from './Provider';
const inter = Poppins({
// ...
});
export const metadata: Metadata = {
// ...
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<Provider>{children}</Provider>
</body>
</html>
);
}Customization of Theme
If you want you can customize your theme in theme prop of SparkProvider. Please see the full theme object in here.
For React project
TypeScript
import { Theme, ThemeProvider } from '@stacklearner/spark-ui';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
const theme: Theme = {
color: {
primary: {
main: '#1976d2',
light: '#e3f2fd',
},
},
};
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</React.StrictMode>,
);JavaScript
import { SparkProvider } from '@stacklearner/spark-ui';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
const theme = {
colors: {
primary: {
main: '#1976d2',
},
},
};
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<SparkProvider theme={theme}>
<App />
</SparkProvider>
</React.StrictMode>,
);For Next.js project (App router)
In Next.js add your theme to your Provider.tsx.
Documentation
Please click here to see full documentation.