DTabs
Tabbed interface component with multiple variants and styles.
Basic Usage
import DTabs from '@dynamic-framework/ui-react';
function App() {
const options = [
{ label: 'Home', tab: 'home' },
{ label: 'Profile', tab: 'profile' },
{ label: 'Settings', tab: 'settings' },
];
return (
<DTabs
options={options}
defaultSelected="home"
onChange={(option) => console.log(option)}
>
<DTabs.Tab id="home">
<h3>Home Content</h3>
</DTabs.Tab>
<DTabs.Tab id="profile">
<h3>Profile Content</h3>
</DTabs.Tab>
<DTabs.Tab id="settings">
<h3>Settings Content</h3>
</DTabs.Tab>
</DTabs>
);
}
Props
options
Array<DTabOption>
required
Array of tab options
Initially selected tab ID
onChange
(option: DTabOption) => void
Called when tab selection changes
variant
TabVariant
default:"underline"
Tab style - ‘tabs’, ‘pills’, ‘underline’, or ‘toggle-button-group’
Additional classes for tab buttons
DTabOption Interface
label
string | ReactNode
required
Tab label text or element
Examples
Basic Tabs
Pills
Underline
With Icons
Disabled Tab
const options = [
{ label: 'Overview', tab: 'overview' },
{ label: 'Transactions', tab: 'transactions' },
{ label: 'Documents', tab: 'documents' },
];
<DTabs options={options} defaultSelected="overview" variant="tabs">
<DTabs.Tab id="overview">
Account overview content
</DTabs.Tab>
<DTabs.Tab id="transactions">
Transaction history
</DTabs.Tab>
<DTabs.Tab id="documents">
Document list
</DTabs.Tab>
</DTabs>
<DTabs options={options} defaultSelected="home" variant="pills">
<DTabs.Tab id="home">Home</DTabs.Tab>
<DTabs.Tab id="profile">Profile</DTabs.Tab>
</DTabs>
<DTabs options={options} defaultSelected="home" variant="underline">
<DTabs.Tab id="home">Home</DTabs.Tab>
<DTabs.Tab id="profile">Profile</DTabs.Tab>
</DTabs>
const options = [
{
label: <><DIcon icon="Home" /> Home</>,
tab: 'home'
},
{
label: <><DIcon icon="User" /> Profile</>,
tab: 'profile'
},
];
<DTabs options={options} defaultSelected="home">
<DTabs.Tab id="home">Home content</DTabs.Tab>
<DTabs.Tab id="profile">Profile content</DTabs.Tab>
</DTabs>
const options = [
{ label: 'Active', tab: 'active' },
{ label: 'Disabled', tab: 'disabled', disabled: true },
];
<DTabs options={options} defaultSelected="active">
<DTabs.Tab id="active">Active content</DTabs.Tab>
<DTabs.Tab id="disabled">Disabled content</DTabs.Tab>
</DTabs>
TypeScript Interface
export type DTabOption = {
label: string | React.ReactNode;
tab: string;
disabled?: boolean;
};
export type TabVariant = 'tabs' | 'pills' | 'underline' | 'toggle-button-group';
type Props = BaseProps & PropsWithChildren<{
classNameTab?: string;
onChange?: (option: DTabOption) => void;
options: Array<DTabOption>;
defaultSelected: string;
vertical?: boolean;
variant?: TabVariant;
}>;
DPaginator
Responsive pagination component powered by react-responsive-pagination.
Basic Usage
import DPaginator from '@dynamic-framework/ui-react';
function App() {
const [currentPage, setCurrentPage] = useState(1);
return (
<DPaginator
current={currentPage}
total={10}
onPageChange={setCurrentPage}
/>
);
}
Props
Inherits all props from react-responsive-pagination:
Current page number (1-indexed)
onPageChange
(page: number) => void
required
Called when page changes
Maximum number of page buttons to show
Additional classes for nav element
Examples
Basic
With Data
Limited Width
const [page, setPage] = useState(1);
<DPaginator
current={page}
total={20}
onPageChange={setPage}
/>
function PaginatedList() {
const [page, setPage] = useState(1);
const itemsPerPage = 10;
const totalItems = 95;
const totalPages = Math.ceil(totalItems / itemsPerPage);
const startIndex = (page - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const currentItems = allItems.slice(startIndex, endIndex);
return (
<>
<div>
{currentItems.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
<DPaginator
current={page}
total={totalPages}
onPageChange={setPage}
/>
</>
);
}
<DPaginator
current={page}
total={50}
onPageChange={setPage}
maxWidth={5}
/>
TypeScript Interface
export type Props = ResponsivePaginationProps & {
dataAttributes?: DataAttributes;
};
DStepper
Step indicator component for multi-step processes with responsive mobile/desktop views.
Basic Usage
import DStepper from '@dynamic-framework/ui-react';
function App() {
const [currentStep, setCurrentStep] = useState(1);
const steps = [
{ label: 'Personal Info', value: 1, description: 'Basic information' },
{ label: 'Address', value: 2, description: 'Contact details' },
{ label: 'Review', value: 3, description: 'Confirm details' },
];
return (
<DStepper
options={steps}
currentStep={currentStep}
/>
);
}
Props
Array of step configurations
Current active step number
Vertical layout (desktop only)
Marks all steps as completed
breakpoint
BreakpointSize
default:"lg"
Breakpoint for switching between mobile and desktop views
Custom icon for completed steps
Step Interface
Examples
Checkout Process
With Descriptions
Vertical Layout
All Completed
function CheckoutStepper() {
const [step, setStep] = useState(1);
const steps = [
{ label: 'Cart', value: 1 },
{ label: 'Shipping', value: 2 },
{ label: 'Payment', value: 3 },
{ label: 'Confirmation', value: 4 },
];
return (
<>
<DStepper options={steps} currentStep={step} />
<div className="mt-4">
{/* Step content */}
<DButton
text="Next"
onClick={() => setStep(step + 1)}
disabled={step === steps.length}
/>
</div>
</>
);
}
const steps = [
{
label: 'Account',
value: 1,
description: 'Create your account'
},
{
label: 'Profile',
value: 2,
description: 'Complete your profile'
},
{
label: 'Verification',
value: 3,
description: 'Verify your identity'
},
];
<DStepper options={steps} currentStep={2} />
<DStepper
options={steps}
currentStep={2}
vertical
/>
<DStepper
options={steps}
currentStep={steps.length}
completed
/>
TypeScript Interface
export type Step = {
label: string;
value: number;
description?: string;
};
type Props = BaseProps & {
options: Array<Step>;
currentStep: number;
iconSuccess?: string;
iconSuccessFamilyClass?: string;
iconSuccessFamilyPrefix?: string;
iconSuccessMaterialStyle?: boolean;
vertical?: boolean;
completed?: boolean;
breakpoint?: BreakpointSize;
};