Quick Start Guide

Get up and running with Dynamic UI by building a simple financial transfer form. This guide will walk you through importing components, handling state, and creating a functional UI.

This guide assumes you’ve already installed Dynamic UI. If not, start there first.

Your First Component

Let’s build a simple transfer form that demonstrates key Dynamic UI features:

Import Components

Import the components you’ll need:

App.tsx

import { 
  DCard,
  DInput,
  DInputCurrency,
  DButton,
  DAlert,
  DContextProvider 
} from '@dynamic-framework/ui-react';
import { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

Create the Component

Build a simple transfer form with state management:

App.tsx

function TransferForm() {
  const [recipient, setRecipient] = useState('');
  const [amount, setAmount] = useState('');
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  const handleTransfer = () => {
    setLoading(true);
    // Simulate API call
    setTimeout(() => {
      setLoading(false);
      setSuccess(true);
      setRecipient('');
      setAmount('');
    }, 2000);
  };

  return (
    <div className="container mt-5">
      <DCard>
        <DCard.Header>
          <h3 className="mb-0">Transfer Funds</h3>
        </DCard.Header>
        <DCard.Body>
          {success && (
            <DAlert 
              color="success" 
              className="mb-3"
              showClose
              onClose={() => setSuccess(false)}
            >
              Transfer completed successfully!
            </DAlert>
          )}
          
          <DInput
            label="Recipient Name"
            value={recipient}
            onChange={setRecipient}
            placeholder="Enter recipient name"
            className="mb-3"
          />
          
          <DInputCurrency
            label="Transfer Amount"
            value={amount}
            onChange={setAmount}
            placeholder="0.00"
            className="mb-3"
          />
        </DCard.Body>
        <DCard.Footer className="d-flex gap-2">
          <DButton 
            text="Cancel"
            variant="outline"
            color="secondary"
          />
          <DButton 
            text="Transfer"
            color="primary"
            iconEnd="ArrowRight"
            loading={loading}
            loadingText="Processing..."
            onClick={handleTransfer}
            disabled={!recipient || !amount}
          />
        </DCard.Footer>
      </DCard>
    </div>
  );
}

Wrap with Context Provider

Wrap your app with DContextProvider:

App.tsx

function App() {
  return (
    <DContextProvider>
      <TransferForm />
    </DContextProvider>
  );
}

export default App;

Run your development server (npm run dev) and you should see a fully functional transfer form!

Understanding the Components

Let’s break down what each component does:

DCard - Card Container

The DCard component is a composable card with Header, Body, and Footer sections:

import { DCard } from '@dynamic-framework/ui-react';

<DCard>
  <DCard.Header>
    {/* Header content */}
  </DCard.Header>
  <DCard.Body>
    {/* Main content */}
  </DCard.Body>
  <DCard.Footer>
    {/* Footer actions */}
  </DCard.Footer>
</DCard>

Card components follow the compound component pattern - DCard.Header, DCard.Body, and DCard.Footer are exposed as static properties.

DInput - Text Input

The DInput component provides a flexible input with labels, hints, and validation:

import { DInput } from '@dynamic-framework/ui-react';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState('');
  
  return (
    <DInput
      label="Email Address"
      value={value}
      onChange={setValue}
      placeholder="[email protected]"
      hint="We'll never share your email"
      type="email"
    />
  );
}

Key Props:

label - Input label text
value - Controlled value
onChange - Callback with new value (not the event)
placeholder - Placeholder text
hint - Helper text below input
invalid / valid - Validation states
disabled - Disable the input
loading - Show loading spinner
size - Size variant (‘sm’ | ‘lg’)

DInputCurrency - Currency Input

Specialized input for currency values with formatting:

import { DInputCurrency } from '@dynamic-framework/ui-react';
import { useState } from 'react';

function Example() {
  const [amount, setAmount] = useState('');
  
  return (
    <DInputCurrency
      label="Amount"
      value={amount}
      onChange={setAmount}
      placeholder="0.00"
      inputStart="$"
    />
  );
}

DButton - Button Component

A comprehensive button component with loading states, icons, and variants:

import { DButton } from '@dynamic-framework/ui-react';

// Solid button (default)
<DButton text="Primary" color="primary" />

// Outline variant
<DButton text="Secondary" color="secondary" variant="outline" />

// Link variant
<DButton text="Link" color="primary" variant="link" />

// With icons
<DButton 
  text="Next" 
  iconEnd="ArrowRight" 
  color="primary" 
/>

// Loading state
<DButton 
  text="Submit" 
  loading={true} 
  loadingText="Saving..." 
/>

// Sizes
<DButton text="Small" size="sm" />
<DButton text="Large" size="lg" />

// As anchor tag
<DButton 
  text="Visit Site" 
  href="https://dynamicframework.dev"
  target="_blank"
  rel="noopener noreferrer"
/>

Key Props:

text - Button text
color - Semantic color (‘primary’ | ‘secondary’ | ‘success’ | ‘danger’ | ‘warning’ | ‘info’)
variant - Style variant (‘outline’ | ‘link’)
size - Size (‘sm’ | ‘lg’)
iconStart / iconEnd - Icon names
loading - Show loading state
loadingText - Text during loading
disabled - Disable button
href - Render as anchor tag
onClick - Click handler

DAlert - Alert Messages

Display contextual feedback messages:

import { DAlert } from '@dynamic-framework/ui-react';

// Success alert
<DAlert color="success">
  Operation completed successfully!
</DAlert>

// Error alert
<DAlert color="danger">
  Something went wrong. Please try again.
</DAlert>

// Info alert
<DAlert color="info">
  Please review the information below.
</DAlert>

// Warning alert
<DAlert color="warning">
  This action cannot be undone.
</DAlert>

// Dismissible alert
<DAlert 
  color="success" 
  showClose
  onClose={() => console.log('Closed')}
>
  You can dismiss this message.
</DAlert>

Working with Forms

Dynamic UI components integrate seamlessly with form libraries. Here’s an example with Formik:

import { Formik, Form } from 'formik';
import { DInput, DButton, DCard } from '@dynamic-framework/ui-react';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(8, 'Too short').required('Required'),
});

function LoginForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => console.log(values)}
    >
      {({ values, errors, touched, setFieldValue, isSubmitting }) => (
        <Form>
          <DCard>
            <DCard.Header>
              <h3>Login</h3>
            </DCard.Header>
            <DCard.Body>
              <DInput
                label="Email"
                type="email"
                value={values.email}
                onChange={(value) => setFieldValue('email', value)}
                invalid={touched.email && !!errors.email}
                hint={touched.email ? errors.email : undefined}
                className="mb-3"
              />
              
              <DInput
                label="Password"
                type="password"
                value={values.password}
                onChange={(value) => setFieldValue('password', value)}
                invalid={touched.password && !!errors.password}
                hint={touched.password ? errors.password : undefined}
              />
            </DCard.Body>
            <DCard.Footer>
              <DButton
                type="submit"
                text="Login"
                color="primary"
                loading={isSubmitting}
              />
            </DCard.Footer>
          </DCard>
        </Form>
      )}
    </Formik>
  );
}

Common Patterns

Color System

All components support semantic color props:

// Semantic colors available
const colors = [
  'primary',    // Main actions
  'secondary',  // Secondary actions
  'success',    // Positive feedback
  'danger',     // Errors, destructive actions
  'warning',    // Cautionary states
  'info',       // Informational
  'light',      // Light backgrounds
  'dark',       // Dark backgrounds
];

<DButton color="primary" text="Primary" />
<DAlert color="success">Success!</DAlert>
<DBadge color="danger">Error</DBadge>

Size Variants

Most components support small and large sizes:

// Small
<DButton size="sm" text="Small" />
<DInput size="sm" label="Small Input" />

// Default (medium)
<DButton text="Medium" />
<DInput label="Medium Input" />

// Large
<DButton size="lg" text="Large" />
<DInput size="lg" label="Large Input" />

Loading States

Many components support loading states:

// Button with loading
<DButton 
  text="Submit" 
  loading={isSubmitting}
  loadingText="Submitting..."
/>

// Input with loading
<DInput 
  label="Username"
  loading={isValidating}
/>

Icons

Add icons to components using icon props:

import { DButton } from '@dynamic-framework/ui-react';

// Icon at end (right)
<DButton text="Next" iconEnd="ArrowRight" />

// Icon at start (left)
<DButton text="Back" iconStart="ArrowLeft" />

// Both icons
<DButton text="Transfer" iconStart="Send" iconEnd="Check" />

Dynamic UI uses Lucide React icons by default. See the Lucide icon library for available icon names.

Layout Helpers

Dynamic UI includes Bootstrap 5 utilities for layout:

Container and Grid

<div className="container">
  <div className="row">
    <div className="col-md-6">
      <DCard>
        <DCard.Body>Left column</DCard.Body>
      </DCard>
    </div>
    <div className="col-md-6">
      <DCard>
        <DCard.Body>Right column</DCard.Body>
      </DCard>
    </div>
  </div>
</div>

Spacing Utilities

Dynamic UI extends Bootstrap spacing to 0-30:

// Margin
<div className="mt-3">Margin top 3</div>
<div className="mb-5">Margin bottom 5</div>
<div className="mx-auto">Margin x auto (centered)</div>
<div className="mt-15">Margin top 15 (extended)</div>

// Padding
<div className="p-3">Padding 3</div>
<div className="px-4 py-2">Padding x 4, y 2</div>
<div className="p-20">Padding 20 (extended)</div>

Flexbox Utilities

// Flex container
<div className="d-flex gap-3">
  <DButton text="Button 1" />
  <DButton text="Button 2" />
  <DButton text="Button 3" />
</div>

// Align items
<div className="d-flex align-items-center justify-content-between">
  <span>Left</span>
  <span>Right</span>
</div>

// Flex direction
<div className="d-flex flex-column gap-2">
  <DInput label="Input 1" />
  <DInput label="Input 2" />
</div>

Building a Complete Page

Let’s combine everything into a more complete example - an account overview page:

AccountOverview.tsx

import {
  DCard,
  DButton,
  DAlert,
  DCurrencyText,
  DContextProvider,
} from '@dynamic-framework/ui-react';
import 'bootstrap/dist/css/bootstrap.min.css';

function AccountOverview() {
  return (
    <div className="container mt-5">
      {/* Alert Banner */}
      <DAlert color="info" className="mb-4">
        Your account statement for December is now available.
      </DAlert>

      {/* Account Balance Card */}
      <div className="row mb-4">
        <div className="col-md-6">
          <DCard>
            <DCard.Header>
              <h4 className="mb-0">Checking Account</h4>
              <small className="text-muted">****1234</small>
            </DCard.Header>
            <DCard.Body>
              <div className="mb-2 text-muted">Available Balance</div>
              <h2 className="mb-0">
                <DCurrencyText value={5423.50} />
              </h2>
            </DCard.Body>
            <DCard.Footer className="d-flex gap-2">
              <DButton 
                text="Transfer" 
                color="primary" 
                iconEnd="Send" 
                size="sm"
              />
              <DButton 
                text="Details" 
                variant="outline" 
                color="secondary" 
                size="sm"
              />
            </DCard.Footer>
          </DCard>
        </div>

        <div className="col-md-6">
          <DCard>
            <DCard.Header>
              <h4 className="mb-0">Savings Account</h4>
              <small className="text-muted">****5678</small>
            </DCard.Header>
            <DCard.Body>
              <div className="mb-2 text-muted">Available Balance</div>
              <h2 className="mb-0">
                <DCurrencyText value={12890.75} />
              </h2>
            </DCard.Body>
            <DCard.Footer className="d-flex gap-2">
              <DButton 
                text="Transfer" 
                color="primary" 
                iconEnd="Send" 
                size="sm"
              />
              <DButton 
                text="Details" 
                variant="outline" 
                color="secondary" 
                size="sm"
              />
            </DCard.Footer>
          </DCard>
        </div>
      </div>

      {/* Quick Actions */}
      <DCard>
        <DCard.Header>
          <h4 className="mb-0">Quick Actions</h4>
        </DCard.Header>
        <DCard.Body>
          <div className="d-flex flex-wrap gap-2">
            <DButton text="Pay Bills" iconStart="CreditCard" />
            <DButton text="Transfer Money" iconStart="Send" />
            <DButton text="View Statements" iconStart="FileText" />
            <DButton text="Manage Cards" iconStart="CreditCard" />
          </div>
        </DCard.Body>
      </DCard>
    </div>
  );
}

function App() {
  return (
    <DContextProvider>
      <AccountOverview />
    </DContextProvider>
  );
}

export default App;

Next Steps

Explore All Components

Browse the full component library in Storybook

View Examples

Check out real-world examples on GitHub

API Reference

Detailed component API documentation

Official Docs

Complete Dynamic Framework documentation

Additional Resources

Form Components

Explore specialized form inputs:

DInputPassword - Password input with show/hide toggle
DInputPhone - International phone number input
DInputMask - Masked input for formatted values
DInputCounter - Numeric input with increment/decrement
DDatePicker - Date selection
DSelect - Advanced select component

Financial Components

DCreditCard - Display credit card information
DCurrencyText - Format currency values
DPasswordStrengthMeter - Visual password strength indicator
DOtp - One-time password input

Layout Components

DModal - Modal dialogs
DOffcanvas - Side panels
DTabs - Tabbed interfaces
DLayout - CSS Grid-based layout
DCollapse - Collapsible content

Feedback Components

DToast - Toast notifications
DProgress - Progress bars
DTooltip - Tooltips
DPopover - Popovers

Ready to build something amazing? Start exploring the component library!

Get Started

Core Concepts

Components

Styling

Hooks & Utilities

Examples

Quick Start

Quick Start Guide

Your First Component

Understanding the Components

DCard - Card Container

DInput - Text Input

DInputCurrency - Currency Input

DButton - Button Component

DAlert - Alert Messages

Working with Forms

Common Patterns

Color System

Size Variants

Loading States

Icons

Layout Helpers

Container and Grid

Spacing Utilities

Flexbox Utilities

Building a Complete Page

Next Steps

Explore All Components

View Examples

API Reference

Official Docs

Additional Resources

Form Components

Financial Components

Layout Components

Feedback Components

Build docs developers (and LLMs) love

Get Started

Core Concepts

Components

Styling

Hooks & Utilities

Examples

​Quick Start Guide

​Your First Component

​Understanding the Components

​DCard - Card Container

​DInput - Text Input

​DInputCurrency - Currency Input

​DButton - Button Component

​DAlert - Alert Messages

​Working with Forms

​Common Patterns

​Color System

​Size Variants

​Loading States

​Icons

​Layout Helpers

​Container and Grid

​Spacing Utilities

​Flexbox Utilities

​Building a Complete Page

​Next Steps

Explore All Components

View Examples

API Reference

Official Docs

​Additional Resources

​Form Components

​Financial Components

​Layout Components

​Feedback Components

Build docs developers (and LLMs) love

Quick Start Guide

Your First Component

Understanding the Components

DCard - Card Container

DInput - Text Input

DInputCurrency - Currency Input

DButton - Button Component

DAlert - Alert Messages

Working with Forms

Common Patterns

Color System

Size Variants

Loading States

Icons

Layout Helpers

Container and Grid

Spacing Utilities

Flexbox Utilities

Building a Complete Page

Next Steps

Additional Resources

Form Components

Financial Components

Layout Components

Feedback Components