Pular para o conteúdo

A linguagem de interface da Adila.co

Boas interfaces.
Uma base em comum.

Componentes, tokens e padrões que conectam design e código. Para construir produtos com clareza, do primeiro detalhe ao próximo lançamento.

Explorar documentaçãoVer em produto

React. Identidade Adila. Temas claro e escuro.

Caminhos entre flores e vegetação em uma paisagem colorida
Uma linguagem. Muitas possibilidades.

Consistência que abre espaço.

Uma base compartilhada, com liberdade para cada produto encontrar sua própria expressão.

Componentes que se entendem.

De um botão ao fluxo completo. Peças React que compartilham comportamento, proporção e identidade.

Explorar componentes

Uma identidade compartilhada.

Índigo, fontes Adila e temas claro e escuro. Uma base visual que dá continuidade a cada produto.

Conhecer os fundamentos

Cuidado em cada interação.

Foco, teclado, contraste e estados testados. A experiência também está nos detalhes que você sente.

Conhecer os padrões

Explore algumas partes da biblioteca. Cada exemplo usa os componentes reais que você leva para o seu produto.

Experimente adicionar um item.

Ações com hierarquia

Da ação principal à alternativa discreta, com a mesma linguagem.

Ver button

Um nome para começar a dar forma.

Formulários que orientam

Rótulo, campo e retorno trabalham juntos para guiar cada escolha.

Ver input
ConcluídoEm andamentoEm revisão

Estados que fazem sentido

Cor e texto comunicam o andamento sem depender um do outro.

Ver status

O que importa agora, em um só lugar.

Navegação sem ruído

Organize o conteúdo e mantenha as opções sempre à mão.

Ver tabs
DSPDEN
+2

Design, produto e engenharia.

Uma base compartilhada

Pessoas e colaboração

Identifique quem participa, mesmo quando a imagem não está disponível.

Ver avatar
Seu primeiro fluxo
x

Progresso perceptível

Mostre o andamento e deixe claro quando a tarefa termina.

Ver progress

O sistema ganha vida no uso.

Troque as opções, explore a paleta e veja a tipografia. Aqui, os mesmos componentes da biblioteca trabalham juntos.

Explorar o showcase
Demonstração interativa
Do seu jeito.
Uma interface simples para escolher o que acompanhar.

Receba as atualizações do produto.

Os destaques em um só lugar.

Experimente os controles.

As peças se conectam.
O produto acontece.

Uma tabela, um status, uma ação. A consistência aparece quando todos os detalhes trabalham na mesma direção.

Workspace Adila
Dados de demonstração

Um lugar para acompanhar.

Projetos, prioridades e próximos passos.

Abrir showcase
Projetos da equipe
Uma visão compartilhada de cada entrega.
ProjetoEquipeStatus
Portal do clienteProdutoEm andamento
Central de atendimentoOperaçõesEm revisão
Área da equipeDesignConcluído

Três projetos, uma linguagem em comum.

Próximo lançamento
Cada etapa fica mais clara quando o sistema acompanha.
Preparação
x
  • Fundamentos definidos
  • Componentes conectados
  • Fluxos em revisão
Em preparação
Painéis e operaçõesDados, tabelas e ações no mesmo fluxo.Clientes e equipesPessoas, contexto e colaboração.Preferências e ajustesControle com uma interface familiar.

Da primeira peça
ao primeiro fluxo.

Um caminho direto para sair da página em branco e começar a construir com a biblioteca.

  1. Prepare a base

    Configure o GitHub Packages e instale a biblioteca no seu projeto React.

    Instalar a biblioteca

  2. Monte o primeiro fluxo

    Escolha os componentes, conecte os estados e experimente os exemplos da documentação.

    Construir um formulário

  3. Encontre sua expressão

    Combine tokens, temas e composição para manter a identidade em cada tela.

    Explorar os fundamentos

Antes de começar.

Algumas respostas para conhecer melhor a base que vai acompanhar seu produto.

Ir para a documentação

Seu próximo produto começa aqui.

Instale a biblioteca e encontre na documentação os exemplos para começar.

bun add @adila-sh/ui

Disponível no GitHub Packages.

Guia de instalação