Construa interfaces com o
Monta UI Design System.
Biblioteca corporativa com 48 componentes nativos de alto nível construídos em React 18/19, TypeScript e Tailwind CSS. Componentes autorais, sem Radix UI.
Componentes em ação.
Explore estados reais, veja a implementação ganhar vida e experimente cada detalhe.
Preparando componente
Prévia do componente
Um pouco de movimento.
Muitas possibilidades.
Gradientes e textos animados.
Explore, ajuste e leve para o seu projeto.
Showcase Monta UI
Componentes reais combinados com tokens visuais Tailwind e React nativo
Botões com Variantes
Gerenciados via CVA com suporte a loading e ícones.
Campos & Senhas
Tags e Status
Catálogo Monta UI
Explore os componentes disponíveis para cópia e instalação.
Button
AçõesExibe um botão de disparo ou gatilho com variantes visuais e suporte a acessibilidade.
Instalação via Monta CLI
Instale o componente no seu projeto diretamente com o gerenciador de pacotes da sua preferência.
pnpm dlx montaui add button
Exemplo de Uso
Como importar e utilizar o componente no seu código React:
Composição & Anatomia
Conheça as partes do componente e a responsabilidade de cada uma.
Referência da API
Props, tipos TypeScript, valores padrão e eventos do componente.
Instalação & Configuração CLI
Aprenda a configurar seu projeto React com Tailwind CSS e utilizar o Monta CLI para gerenciar componentes.
1 Criar um projeto React (Vite / Next.js)
Crie um novo projeto React com TypeScript e Tailwind CSS:
# Usando Vite com TypeScript
pnpm create vite meu-app --template react-ts
cd meu-app
2 Instalar Dependências Essenciais
Instale os pacotes fundamentais para manipulação de classes e ícones:
npm install clsx tailwind-merge class-variance-authority lucide-react
Equivalentes: pnpm add, yarn add ou bun add.
3 Inicializar o Monta CLI
Execute o assistente de inicialização para gerar o arquivo components.json:
npx montaui init
Com pnpm: pnpm dlx montaui init. Com yarn: yarn dlx montaui init. Com bun: bunx --bun montaui init.
O arquivo components.json gerado terá a seguinte estrutura:
{
"$schema": "https://monta-ui.dev/schema.json",
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/globals.css",
"baseColor": "slate",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/monta-ui"
}
}
4
Criar Utilitário src/lib/utils.ts
Este helper une clsx e tailwind-merge para mesclagem limpa de classes Tailwind:
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}5 Adicionar Componentes com o CLI
Agora você pode instalar qualquer componente do catálogo instantaneamente:
# Adicionar múltiplos componentes
pnpm dlx montaui add button dialog input table badge
Configuração do Tailwind CSS
Definição oficial dos tokens, variáveis CSS, cores do Design System e animações do Monta UI.
1. tailwind.config.js
JavaScript / TypeScript
Adicione as extensões de tema, animações e cores HSL ao seu arquivo de configuração:
module.exports = {
darkMode: ["class"],
content: [
'./pages*.{ts,tsx}',
'./components*.{ts,tsx}',
'./app*.{ts,tsx}',
'./src*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: { "2xl": "1400px" },
},
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
heading: ['Plus Jakarta Sans', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
brand: {
DEFAULT: "#753399",
hover: "#622981",
soft: "rgba(117, 51, 153, 0.12)",
foreground: "#ffffff",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}2. src/globals.css
CSS Variables (HSL)
Tokens de cor oficiais com suporte a tema Claro (Light) e Escuro (Dark):
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 277 50% 40%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 277 50% 40%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 277 50% 45%;
--primary-foreground: 0 0% 98%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 277 50% 45%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}Monta UI Storybook
Ambiente de desenvolvimento e testes isolados para todos os componentes do Design System.
1 Executar o Storybook Localmente
Inicie o servidor de desenvolvimento do Storybook com suporte a hot reload:
# Iniciar o Storybook na porta 6006
pnpm storybook
# ou:
npm run storybook
2 Configuração com Tema Monta UI & Tailwind
O Storybook já está configurado com o tema escuro/claro nativo e tokens do Tailwind CSS em .storybook/main.ts e .storybook/preview.ts.
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "../registry/ui/button";
import { Check, Trash2 } from "lucide-react";
const meta: Meta = {
title: "Ações/Button",
component: Button,
tags: ["autodocs"],
argTypes: {
variant: {
control: "select",
options: ["default", "secondary", "ghost", "danger", "success"],
},
size: {
control: "select",
options: ["xs", "sm", "default", "lg", "icon"],
},
isLoading: { control: "boolean" },
disabled: { control: "boolean" },
},
};
export default meta;
type Story = StoryObj;
export const Default: Story = {
args: {
children: "Confirmar Ação",
variant: "default",
},
};
export const WithIcon: Story = {
render: (args) => (
),
}; Templates de Telas
Telas corporativas prontas para produção construídas com os 48 componentes 100% nativos do Monta UI.