Components

A comprehensive library of 29 UI components for building consistent, accessible interfaces. Each component is designed with accessibility and customization in mind.

Overview

Components are the building blocks of your application's UI. They're designed to work together seamlessly while remaining flexible enough to adapt to your specific needs.

Component Categories

Actions

Interactive elements for triggering actions and commands.

Component	Description
Button	Clickable elements for triggering actions

Forms

Input components for collecting user data.

Component	Description
Input	Text fields for user input
Select	Dropdown menus for selecting options
Checkbox	Toggle controls for boolean options
Radio	Single-choice selection controls
Toggle	Switch controls for on/off states
File Upload	File selection and upload
Date Picker	Date and time selection
Autocomplete	Search input with suggestions

Feedback

Components for communicating status and feedback to users.

Component	Description
Alert	Contextual feedback messages
Badge	Labels for status and counts
Toast	Temporary notification messages
Tooltip	Contextual information on hover
Progress	Progress indicators
Spinner	Loading indicators
Skeleton	Content loading placeholders
Empty State	Empty content placeholders

Layout

Components for organizing and structuring content.

Component	Description
Card	Contained content surfaces
Accordion	Collapsible content sections
Modal	Overlay dialogs and sheets
Drawer	Slide-out panels
Tabs	Tabbed content navigation
Popover	Floating content panels

Navigation

Components for navigating through content and applications.

Component	Description
Navbar	Header navigation
Breadcrumb	Hierarchical navigation trail
Pagination	Page navigation controls
Dropdown	Menu dropdowns
Stepper	Multi-step progress
Command Palette	Keyboard-driven command menu

Data Display

Components for displaying data and information.

Component	Description
Table	Data tables with sorting and selection
Avatar	User profile images and initials
Timeline	Chronological event display
Tree View	Hierarchical data display
Carousel	Sliding content display

Quick Preview

Here's a quick look at some of our most used components:

Buttons

Alerts

Info: This is an informational message.

Success: Your changes have been saved.

Warning: Please review before continuing.

Error: Something went wrong.

Badges

PrimarySecondarySuccessWarningError

Form Inputs

Using Components

All components follow a consistent naming convention using the df- prefix:

<!-- Basic button -->
<button class="df-button df-button--primary">
  Click me
</button>

<!-- Card with content -->
<div class="df-card">
  <div class="df-card__body">
    <h3 class="df-card__title">Card Title</h3>
    <p class="df-card__text">Card content goes here.</p>
  </div>
</div>

<!-- Alert message -->
<div class="df-alert df-alert--success">
  Your changes have been saved successfully.
</div>

Framework Integration

Components are available as React and Vue wrappers for seamless integration:

React

import { Button, Card, Alert } from '@everforth/design-system/react';

function App() {
  return (
    <Card>
      <Alert variant="success">Welcome!</Alert>
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}

Vue

<script setup>
import { DfButton, DfCard, DfAlert } from '@everforth/design-system/vue';
</script>

<template>
  <DfCard>
    <DfAlert variant="success">Welcome!</DfAlert>
    <DfButton variant="primary">Get Started</DfButton>
  </DfCard>
</template>