Instalação
Via NPM
Instalação
npm install @scmposs/hollow-ui@latestVia CLI
Inicializar projeto
npx @scmposs/hollow-ui initAdicionar componentes
npx @scmposs/hollow-ui add button card badgeUso
Exemplo de uso
import { Button } from "@scmposs/hollow-ui"
function App() {
return <Button>Clique aqui</Button>
}Componentes & Guias
Componentes bonitos e reutilizáveis construídos com Radix UI e Tailwind CSS, além de guias completos para configuração e uso.
34 componentes e guias disponíveis
Componentes Base
4 itens
Button
ComponenteBotão altamente customizável com múltiplas variantes.
uiinteractionaction
Input
ComponenteCampo de entrada de texto estilizado e acessível.
formtextinput
Badge
ComponentePequenos rótulos para categorizar e marcar conteúdo.
uistatuslabel
Label
ComponenteRótulo para elementos de formulário.
formtextaccessibility
Dados
3 itens
Formulários
8 itens
Select
ComponenteSeletor dropdown personalizado.
formdropdownselection
Textarea
ComponenteCampo de entrada de texto multilinha para formulários.
formtextmultiline
Checkbox
ComponenteCaixa de seleção para formulários.
formselectionboolean
Switch
ComponenteControle de alternância para estados binários.
formtoggleboolean
Toggle
ComponenteBotões de alternância para estados binários e grupos.
formtogglebutton
MultiSelect
ComponenteSeleção múltipla com busca, checkboxes e badges removíveis.
formselectionmultiple+1
CalendarInput
ComponenteEntrada de data com formatação automática e calendário.
formdatecalendar+1
FileUploadArea
ComponenteÁrea de upload com drag & drop e preview de arquivo.
formuploadfile+1
Guias de Uso
3 itens
Guia de Tema
GuiaGuia completo para configurar sistema de temas em seu projeto.
themeconfigurationsetup
Guia de Charts
GuiaAprenda a usar gráficos com as cores padrão do hollow-UI.
chartsgraphsdata-visualization
Guia de Uso - Toast
GuiaSistema de notificações toast elegante e customizável.
toastnotificationfeedback
Layout
8 itens
Card
ComponenteContainer flexível e extensível para exibir conteúdo.
uicontainerlayout
Accordion
ComponenteLista de itens recolhíveis verticalmente.
collapseexpandnavigation
Separator
ComponenteLinha divisória visual para separar conteúdo e seções.
dividerseparatorlayout
Scroll Area
ComponenteÁrea com scroll personalizado e estilização consistente.
scrolloverflowscrollbar
Navigation
ComponenteComponente de navegação responsivo com ícones e estados ativos.
navigationmenuresponsive
NavRail
ComponenteTrilho de navegação vertical colapsável com suporte a mobile e variantes de estilo.
navigationsidebarcollapsible+1
Header
ComponenteCabeçalho completo com logo, título, ações e menu mobile.
headernavigationbranding
Footer
ComponenteRodapé flexível com seções, links organizados e copyright.
footerlinkscopyright
Sobreposições
3 itens
Especializados
5 itens
HeaderStats
ComponenteCards de estatísticas com efeito 3D para dashboards.
dashboardstatistics3d
InfoCard
ComponenteCard informativo com efeitos hover e botões de ação.
informationinteractivecard
BackToTopButton
ComponenteBotão flutuante para retornar ao topo da página.
navigationscrollfloating
StatusBadge
ComponenteBadge de status com ícones e cores diferenciadas por contexto.
statusbadgestate
HeaderButton
ComponenteBotão especializado para headers com badges e conteúdo personalizado.
headerbuttonbadge



