element

---

title: Visão Geral sidebar_position: 1

Elementos Raaghu

Blocos básicos de construção de UI - botões, campos de entrada, cartões e mais. A base da sua aplicação.

Duas Formas de Usar Elementos

Opção 1: Do Código Fonte/Storybook

Clonar Repositório:

git clone https://github.com/Wai-Technologies/raaghu-react.git
cd raaghu-react
npm install

Uso:

// Importar do código fonte local
import RdsInput from '../raaghu-react/src/rds-input';
import RdsCard from '../raaghu-react/src/rds-card';

function LoginForm() {
  return (
    <RdsCard>
      <RdsInput label="Email" type="email" />
      <RdsInput label="Senha" type="password" />
    </RdsCard>
  );
}

Opção 2: Pacote NPM (Recomendado)

Instalação:

## Instalar pacote principal
npm install @waiin/raaghu-react

## Instalar pacote de tema
npm install @waiin/raaghu-react-themes

Configurar Tema:

import '@waiin/raaghu-react-themes/build/styles/default.css';

Uso:

import { RdsInput, RdsCard } from '@waiin/raaghu-react';

function LoginForm() {
  return (
    <RdsCard>
      <RdsInput label="Email" type="email" />
      <RdsInput label="Senha" type="password" />
    </RdsCard>
  );
}

Categorias Disponíveis

Temos mais de 50 elementos organizados em 8 categorias principais:

• 📝 Formulários (13) - Entradas, seletores, caixas de seleção, sliders, upload de arquivos
• 🎯 Botões (6) - Botões principais, botões de ícone, FABs, toggles
• 📄 Exibição (12) - Cartões, tipografia, avatares, badges, alertas
• 🧭 Navegação (9) - Barras de aplicativo, abas, menus, breadcrumbs, paginação
• 💬 Feedback (9) - Carregadores, modais, tooltips, indicadores de progresso
• 📐 Layout (5) - Grades, divisores, containers, backdrops
• 🔄 Interativos (4) - Acordeões, carrosséis, busca, collapse
• 🔧 Especializados (4) - Contadores, steppers, timelines, listas

Propriedades Comuns

Todos os elementos suportam opções padrão:

• Tamanho: small, medium, large
• Variante: Diferentes estilos visuais
• Estado: disabled, loading, error
• Estilização: className, CSS personalizado

Primeiros Passos

1. Escolha sua abordagem (pacote NPM ou fonte)
2. Selecione elementos que atendam às necessidades da sua UI
3. Explore o Storybook para exemplos interativos e catálogo completo
4. Comece a construir com os elementos essenciais mostrados acima

Informações do Pacote

• Pacote Único: @waiin/raaghu-react contém todos os elementos
• Pacote de Tema: @waiin/raaghu-react-themes para estilização
• Veja Todos: Visite nosso Storybook para catálogo completo
• Tree-shakable: Importe apenas o que precisa
• TypeScript: Tipos completos incluídos