A SwitchUI é a biblioteca de componentes em React para os produtos SwitchDreams LTDA.
Antes da versão 1.3.0 era utilizado o github packages, portanto era necessário mais passos para instalação
-
Instale o pacote utilizando
yarn add @switchdreams/ui @headlessui/tailwindcss
-
No seu arquivo tailwind.config.js adicione o seguinte código:
import { colors } from "@switchdreams/ui"
import switchUiPlugin from "@switchdreams/ui/dist/tailwind.plugin"
import generated from "@headlessui/tailwindcss";
module.exports = {
content: [
"./node_modules/@switchdreams/ui/dist/**/*.js",
//...
],
theme: {
extend: {
curvature: {
md: 0, // Configura a curvatura dos componentes
full: 0,
},
colors: colors, // Cores de 0 25 to 950 (altere as cores primaria e secundárias para os projetos)
fontFamily: {
default: ['Poppins', 'sans-serif'], //.. Opcional
},
},
},
plugins: [
switchUiPlugin,
generated({ prefix: "ui" })
],
}
- Importe o seguinte arquivo css
import '@switchdreams/ui/dist/style.css'
Os componentes em geral são configuráveis pela fonte, no caso especial é o componente do botão que possui um tema específico no tailwind, que é possível configurar dessa forma.
//... tailwind.config.js
module.exports = {
//...
theme: {
extend: {
colors: {
...colors,
btn: {
primary: {
bg: colors.primary["300"],
hover: colors.primary["400"],
active: colors.primary["500"],
focus: colors.primary["300"],
text: colors.gray.white,
},
outline: {
bg: colors.gray.white,
hover: colors.primary["25"],
active: colors.primary["100"],
focus: colors.gray.white,
text: colors.primary["300"],
},
invisible: {
bg: colors.gray.white,
hover: colors.gray["50"],
active: colors.gray["100"],
focus: colors.gray["white"],
text: colors.gray["800"],
},
},
},
},
//...
},
}
Por padrão nossa biblioteca deveria utiliza a fonte Poppins, porém para deixar mais flexível e diminuir o tamanho do bundle, deixamos a cargo do projeto a escolha da fonte:
/* Seu arquivo css do projeto */
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
/* or */
@font-face {
font-family: "Poppins";
src: url("../../fonts/Poppins-Medium.ttf");
font-weight: 500;
}
/* Font padrão para os outros componentes do sistema além os textos */
html {
font-family: Poppins, sans-serif;
}
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
default: ['Poppins', 'sans-serif'],
},
},
},
}
- React
- Github Pacakges
- Tailwind
- Headless/UI para acessibilidade e animações
- LookBook para visualização de componentes
Isaac Newton - "Se eu vi mais longe que outros é porque estive aos ombros de gigantes."
Todos os componentes foram projetados para ser altamente personalizável usando classes CSS da biblioteca Tailwind CSS. Você pode ajustar as cores, fontes e espaçamento de acordo com suas necessidades.
Os componentes da SwitchUI oferecem uma maneira simples e eficaz de componentes interativos e responsivos em seus projetos. Eles combinam o poder do Tailwind CSS e dos códigos mais recentes para criar uma experiência de usuário agradável e elegante. Experimente e adapte-o para se adequar ao seu design e estilo específicos.
- Tree-shaking: docs/tree-shaking.md
- Guia de upgrade da V0.4 para 1.0: docs/upgrade-guide.md