Skip to content

prismaui/prismaui

BranchesTags

Repository files navigation

Installation/ For React

To install@prismaui/react,you can use npm or yarn:

npm install @prismaui/react

or

yarn add @prismaui/react

Usage

To use@prismaui/react,follow the steps below:

  1. Import the desired components from@prismaui/reactin your React component file (e.g.,App.js):
'use client'
import{defineCustomElements,PrmButton}from'@prismaui/react'

defineCustomElements()

functionApp(){
return(
<div>
<PrmButtonround="lg"variant="primary">Click Me</PrmButton>
</div>
);
}

exportdefaultApp;
  1. You can now use the Prisma UI components like thePrmButtoncomponent in your React application.

To add the custom color variables to your CSS file, you can follow these steps:

  1. Open your CSS file (e.g.,global.css).

  2. 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.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on theGitHub repository.

License

This package is licensed under theMIT License.

Installation / For Vue

npm i @prismaui/vue

Configuration

Update your generatedvite.config.tsfile 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 yourmain.tsand add Prisma UI Components in theuse()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')

Custom CSS Variables

Update yourbase.cssfile 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;
}

Usage

In your Vue pages, you can now use the components from@prismaui/vue.

<scriptsetuplang="ts">
import{PrmButton}from'@prismaui/vue';
</script>

<template>
<PrmButtonvariant="info">test</PrmButton>
</template>

Make sure to import the required components and use them accordingly in your Vue files.

@prismaui/angular

This is the documentation for the npm package@prismaui/angular.This package provides Angular components and functionality for the Prisma UI library.

Installation / For Angular

To install@prismaui/angular,you can use npm or yarn:

npm install @prismaui/angular

or

yarn add @prismaui/angular

Usage

To use@prismaui/angular,follow the steps below:

  1. Import thePrmModulefrom@prismaui/angularin your Angular module file (e.g.,app.module.ts):
import{NgModule}from'@angular/core';
import{PrmModule}from'@prismaui/angular';

@NgModule({
imports:[
//...
PrmModule,
//...
],
//...
})
exportclassAppModule{}
  1. In your Angular component template (e.g.,app ponent.html), you can now use the Prisma UI components:
<prm-buttonround= "lg"variant= "primary">Click Me</prm-button>

To add the custom color variables to yourglobal.cssfile, follow these steps:

  1. Open yourglobal.cssfile.

  2. Add the following CSS code at yourglobal.cssfile:

: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.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on theGitHub repository.

License

This package is licensed under theMIT License.

@prismaui/core

This is the documentation for the npm package@prismaui/core.This package provides core functionality for the Prisma UI library.

Installation / For Simple HTML

To install@prismaui/core,you can use npm or yarn:

npm install @prismaui/core

or

yarn add @prismaui/core

Usage

To use@prismaui/core,you can import the JavaScript module in multiple ways depending on your preference or project setup.

Method 1: Local import

You can import the module from the localnode_modulesdirectory:

<!DOCTYPE html>
<htmllang= "en">

<head>
<metacharset= "UTF-8">
<metahttp-equiv= "X-UA-Compatible"content= "IE=edge">
<metaname= "viewport"content= "width=device-width, initial-scale=1.0">
<linkrel= "stylesheet"href= "style.css">
<title>Document</title>
</head>

<body>
<prm-buttonround= "lg"variant= "primary">Click Me</prm-button>

<scripttype= "module">
import{defineCustomElements}from'./node_modules/@prismaui/core/loader/index.es2017.js';
defineCustomElements();
</script>
</body>

</html>

Method 2: Remote import via CDN

You can import the module directly from a CDN:

<!DOCTYPE html>
<htmllang= "en">

<head>
<metacharset= "UTF-8">
<metahttp-equiv= "X-UA-Compatible"content= "IE=edge">
<metaname= "viewport"content= "width=device-width, initial-scale=1.0">
<linkrel= "stylesheet"href= "style.css">
<title>Document</title>
</head>

<body>
<prm-buttonround= "lg"variant= "primary">Click Me</prm-button>

<scripttype= "module">
import{defineCustomElements}from'https://cdn.jsdelivr.net/npm/@prismaui/core/loader/index.es2017.js';
defineCustomElements();
</script>
</body>

</html>

Method 3: Local script import

You can directly include the JavaScript module using a script tag with the local path:

<!DOCTYPE html>
<htmllang= "en">

<head>
<metacharset= "UTF-8">
<metahttp-equiv= "X-UA-Compatible"content= "IE=edge">
<metaname= "viewport"content= "width=device-width, initial-scale=1.0">
<linkrel= "stylesheet"href= "style.css">
<title>Document</title>
</head>

<body>
<prm-buttonround= "lg"variant= "primary">Click Me</prm-button>

<scripttype= "module"src= "node_modules/@prismaui/core/dist/esm/prismaui.js"></script>
</body>

</html>

Method 4: Remote script import via CDN

You can include the JavaScript module directly from a CDN using a script tag:

<!DOCTYPE html>
<htmllang= "en">

<head>
<metacharset= "UTF-8">
<metahttp-equiv= "X-UA-Compatible"content= "IE=edge">
<metaname= "viewport"content= "width=device-width, initial-scale=1.0">
<linkrel= "stylesheet"href= "style.css">
<title>Document</title>
</head>

<body>
<prm-buttonround= "lg"variant= "primary">Click Me</prm-button>

<scripttype= "module"src= "https://cdn.jsdelivr.net/npm/@prismaui/core/loader/index.es2017.js"></

script>
</body>

</html>

CSS

Include the following CSS variables in yourstyle.cssfile:

: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;
}

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on theGitHub repository.

License

This package is licensed under theMIT License.

About

Prismaui Component Library

Topics

ui component webcomponents frontend uikit webcomponents-framework uilibrary

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

40 tags

Packages

No packages published

Contributors 2

Languages