To install @prismaui/react
, you can use npm or yarn:
npm install @prismaui/react
or
yarn add @prismaui/react
To use @prismaui/react
, follow the steps below:
- Import the desired components from
@prismaui/react
in your React component file (e.g.,App.js
):
'use client'
import { defineCustomElements, PrmButton } from '@prismaui/react'
defineCustomElements()
function App() {
return (
<div>
<PrmButton round="lg" variant="primary">Click Me</PrmButton>
</div>
);
}
export default App;
- You can now use the Prisma UI components like the
PrmButton
component in your React application.
To add the custom color variables to your CSS file, you can follow these steps:
-
Open your CSS file (e.g.,
global.css
). -
Add the following CSS code to your global CSS Variables:
:root {
/* Primary Colors */
--primary: #1E3A8A;
--primary-light: #4A5A99;
--primary-dark: #0F2658;
/* Secondary Colors */
--secondary: #9F38B4;
--secondary-light: #D275DF;
--secondary-dark: #6D0E82;
/* Success Colors */
--success: #10B981;
--success-light: #43D2A9;
--success-dark: #0E7D58;
/* Warning Colors */
--warning: #F59E0B;
--warning-light: #FFC94D;
--warning-dark: #D9820E;
/* Danger Colors */
--danger: #EF4444;
--danger-light: #F48080;
--danger-dark: #BE2E2E;
/* Info Colors */
--info: #3B82F6;
--info-light: #6696F6;
--info-dark: #1D4ED8;
/* Neutral Colors */
--lightest: #F3F4F6;
--lighter: #FFFFFF;
--light: #D1D5DB;
--dark: #1F2937;
--darker: #6B7280;
--darkest: #111827;
}
Now, the custom color variables are defined and can be used throughout your React application.
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.
This package is licensed under the MIT License.
npm i @prismaui/vue
Update your generated vite.config.ts
file as follows:
export default defineConfig({
plugins: [
- vue(),
- vueJsx(),
+ vue({
+ template: {
+ compilerOptions: {
+ // Treat all tags with a dash as custom elements
+ isCustomElement: (tag) => tag.includes('-'),
+ },
+ },
+ }),
+ vueJsx(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
Update your main.ts
and add Prisma UI Components in the use()
wrapper:
import './assets/main.css'
import { PrmButton } from '@prismaui/vue';
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(PrmButton).mount('#app')
Update your base.css
file to include the following CSS variables:
:root {
/* Primary Colors */
--primary: #1E3A8A;
--primary-light: #4A5A99;
--primary-dark: #0F2658;
/* Secondary Colors */
--secondary: #9F38B4;
--secondary-light: #D275DF;
--secondary-dark: #6D0E82;
/* Success Colors */
--success: #10B981;
--success-light: #43D2A9;
--success-dark: #0E7D58;
/* Warning Colors */
--warning: #F59E0B;
--warning-light: #FFC94D;
--warning-dark: #D9820E;
/* Danger Colors */
--danger: #EF4444;
--danger-light: #F48080;
--danger-dark: #BE2E2E;
/* Info Colors */
--info: #3B82F6;
--info-light: #6696F6;
--info-dark: #1D4ED8;
/* Neutral Colors */
--lightest: #F3F4F6;
--lighter: #FFFFFF;
--light: #D1D5DB;
--dark: #1F2937;
--darker: #6B7280;
--darkest: #111827;
}
In your Vue pages, you can now use the components from @prismaui/vue
.
<script setup lang="ts">
import { PrmButton } from '@prismaui/vue';
</script>
<template>
<PrmButton variant="info">test</PrmButton>
</template>
Make sure to import the required components and use them accordingly in your Vue files.
This is the documentation for the npm package @prismaui/angular
. This package provides Angular components and functionality for the Prisma UI library.
To install @prismaui/angular
, you can use npm or yarn:
npm install @prismaui/angular
or
yarn add @prismaui/angular
To use @prismaui/angular
, follow the steps below:
- Import the
PrmModule
from@prismaui/angular
in your Angular module file (e.g.,app.module.ts
):
import { NgModule } from '@angular/core';
import { PrmModule } from '@prismaui/angular';
@NgModule({
imports: [
// ...
PrmModule,
// ...
],
// ...
})
export class AppModule { }
- In your Angular component template (e.g.,
app.component.html
), you can now use the Prisma UI components:
<prm-button round="lg" variant="primary">Click Me</prm-button>
To add the custom color variables to your global.css
file, follow these steps:
-
Open your
global.css
file. -
Add the following CSS code at your
global.css
file:
:root {
/* Primary Colors */
--primary: #1E3A8A;
--primary-light: #4A5A99;
--primary-dark: #0F2658;
/* Secondary Colors */
--secondary: #9F38B4;
--secondary-light: #D275DF;
--secondary-dark: #6D0E82;
/* Success Colors */
--success: #10B981;
--success-light: #43D2A9;
--success-dark: #0E7D58;
/* Warning Colors */
--warning: #F59E0B;
--warning-light: #FFC94D;
--warning-dark: #D9820E;
/* Danger Colors */
--danger: #EF4444;
--danger-light: #F48080;
--danger-dark: #BE2E2E;
/* Info Colors */
--info: #3B82F6;
--info-light: #6696F6;
--info-dark: #1D4ED8;
/* Neutral Colors */
--lightest: #F3F4F6;
--lighter: #FFFFFF;
--light: #D1D5DB;
--dark: #1F2937;
--darker: #6B7280;
--darkest: #111827;
}
Now, the custom color variables are defined and can be used throughout your application.
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.
This package is licensed under the MIT License.
This is the documentation for the npm package @prismaui/core
. This package provides core functionality for the Prisma UI library.
To install @prismaui/core
, you can use npm or yarn:
npm install @prismaui/core
or
yarn add @prismaui/core
To use @prismaui/core
, you can import the JavaScript module in multiple ways depending on your preference or project setup.
You can import the module from the local node_modules
directory:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<prm-button round="lg" variant="primary">Click Me</prm-button>
<script type="module">
import { defineCustomElements } from './node_modules/@prismaui/core/loader/index.es2017.js';
defineCustomElements();
</script>
</body>
</html>
You can import the module directly from a CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<prm-button round="lg" variant="primary">Click Me</prm-button>
<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@prismaui/core/loader/index.es2017.js';
defineCustomElements();
</script>
</body>
</html>
You can directly include the JavaScript module using a script tag with the local path:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<prm-button round="lg" variant="primary">Click Me</prm-button>
<script type="module" src="node_modules/@prismaui/core/dist/esm/prismaui.js"></script>
</body>
</html>
You can include the JavaScript module directly from a CDN using a script tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<prm-button round="lg" variant="primary">Click Me</prm-button>
<script type="module" src="https://cdn.jsdelivr.net/npm/@prismaui/core/loader/index.es2017.js"></
script>
</body>
</html>
Include the following CSS variables in your style.css
file:
:root {
/* Primary Colors */
--primary: #1E3A8A;
--primary-light: #4A5A99;
--primary-dark: #0F2658;
/* Secondary Colors */
--secondary: #9F38B4;
--secondary-light: #D275DF;
--secondary-dark: #6D0E82;
/* Success Colors */
--success: #10B981;
--success-light: #43D2A9;
--success-dark: #0E7D58;
/* Warning Colors */
--warning: #F59E0B;
--warning-light: #FFC94D;
--warning-dark: #D9820E;
/* Danger Colors */
--danger: #EF4444;
--danger-light: #F48080;
--danger-dark: #BE2E2E;
/* Info Colors */
--info: #3B82F6;
--info-light: #6696F6;
--info-dark: #1D4ED8;
/* Neutral Colors */
--lightest: #F3F4F6;
--lighter: #FFFFFF;
--light: #D1D5DB;
--dark: #1F2937;
--darker: #6B7280;
--darkest: #111827;
}
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.
This package is licensed under the MIT License.