rippleui
Clean, modern and beautiful Tailwind CSS components.
MIT License
Ecosystems:
Tailwind CSS,
CSS
Bot releases are visible (Hide)
rippleui
- v1.12.0
Published by Siumauricio over 1 year ago
1.12.0 (2023-04-16)
Features
- input-file: input-file component ([d187acf] close #92 (https://github.com/Siumauricio/rippleui/commit/d187acfea2e9dbd0574474dd73860a1f7eaeb201))
rippleui
- v1.9.1
Published by Siumauricio over 1 year ago
1.9.1 (2023-03-04)
Features
Refactor
- config: add example of standalone cli (2019a8b)
- menu,popover,button,dropdown: prevent components vibrate on click (6b41ef8)
Breaking Changes
- Change tokens colors to not clash with tailwind colors (c2f1171) #39
Since the classes that we use are clashing with tailwindcss default colors.
The colors have the same name the only thing will change is the lasttokenand follow the same semantic as RadixUI e.g:
| Old Token | New Token |
|---|---|
| bg-blue-500 | bg-blue-6 |
| bg-red-900 | bg-red-10 |
rippleui
- v1.9.0
Published by Siumauricio over 1 year ago
1.9.0 (2023-02-12)
Features
Refactor
- button: set text color to default variant (895d034)
- dropdown: add center bottom and top variant (4793894)
- dropdown: removed border and add scale to dropdown item (2dacaf7)
- dropdown: removed margin to menu (20c7502)
- dropdown: set width only to a main menu class (83a7417)
- dropdown: simplify selectors and change transition duration on transform (7e31aa6)
rippleui
- v1.8.1
Published by Siumauricio over 1 year ago
rippleui
- v1.7.0
Published by Siumauricio over 1 year ago
rippleui
- v1.5.0
Published by Siumauricio almost 2 years ago
1.5.0 (2023-01-07)
Features
Bug Fixes
- navbar: add backdrop saturate to navbar glass and update colors to radixUI (a71d9a7)
Refactor
- config: add safelist on production styles.css for CDN purposes (367975b)
- new-pallete: add slate color (07b9249)
- new-types: expand pallete scalle (0b83ec4)
- base: device highlight transparent (0fd3717)
- button: prevent select content (faace23)
- card: update to radixUI colors (711d704)
- button: change loader color (2da97bb)
- utilities: clean utilities (c326698)
- components-colors: update colors to new radixUI colors (0bec47d)
- config: force match at init in regexExpr safelist (58047da)
- config: separate utilities to another config (e3aa62b)
- navbar: set gray-50 instead of gray-100 (23ed3d9)
- table: prevent text content wrap (dd5f3ed)
- background-colors: update background borders (0efce60)
- tab: update to radixUI colors (29fdcf0)
- theme: use radixUI pallete (b514482)
rippleui
- v1.3.4-alpha.0
Published by Siumauricio almost 2 years ago
⚠️ This is a dev pre-release.
Sumary
We introduce the theme customization in the tailwind.config.js.
Install
npm install [email protected]
We can add, modify or delete themes with the new configuration, since RippleUI loads light and dark mode by default you can disable this behavior.
- To add a new theme just simply add a new object to the themes array and then you will have to autocomplete about what properties are required and what are optional, also for colors you will have all support for all the available colors.
/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
themes: [
{
themeName: "custom",
colorScheme: "dark",
colors: {
primary: "#573242",
backgroundPrimary: "#123673",
// Same Variables
},
},
],
};
- If you want to modify the existing theme like dark or light simply set the
themeNameproperty aslightordark
/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
themes: [
{
themeName: "light",
colors: {
primary: "#573242",
},
},
],
};
- If you want to remove the existing themes that are set in the config object
/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
removeThemes: ["dark"],
};
- If you want to remove the default
background-colorandcolorproperties that are by default turned on you can disable this behavior.
/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
defaultStyle: false,
};
This is a fully example using the config
in the tailwind.config.js add the following code
/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
defaultStyle: true,
removeThemes: [],
themes: [
{
themeName: "light",
colorScheme: "light",
colors: {
// Customize Colors
primary: "#235264",
},
},
{
themeName: "custom",
colorScheme: "dark",
colors: {
primary: "#573242",
backgroundPrimary: "#123673",
// Same Variables
},
},
],
};
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [],
rippleui: {
...config,
},
theme: {
extend: {},
},
plugins: [require("rippleui")],
};
- If you declare custom colors in whatever theme use this.
/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
themes: [
{
themeName: "light",
colorScheme: "dark",
colors: {
! customColor: "#123673",
},
},
],
};
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [],
- rippleui: {
- ...config,
- },
theme: {
extend: {},
},
+ plugins: [require("rippleui")({
+ ....config
+ )],
};
rippleui
- v1.3.3
Published by github-actions[bot] almost 2 years ago
1.3.3 (2022-12-26)
Features
- config: utils function for convert and handle opacity (45da8a1)
Refactor
- base: removed base styles (a40b60b)
- button: change button size props (491921e)
- components: add rgb function to each variable (5755038)
- config: change type return to colors (76574d9)
- config: convert hexa to rgb (9ec6174)
- config: inject base bg and text color by default (d0cb4d5)
- config: trigger function when color called (68d8201)
- dropdown: reduce z-index to z-49 (df5e6ce)
- modal: increase z-index to be in front of navbar (0fac4e0)
- utilites: add hide-scrollbar (4bb05b9)
Package Rankings
Top 6.85% on Npmjs.org