diff --git a/packages/chakra-components/README.md b/packages/chakra-components/README.md
index 6784000..d3a7623 100644
--- a/packages/chakra-components/README.md
+++ b/packages/chakra-components/README.md
@@ -53,6 +53,8 @@ The best place to learn about using this package is the [developer portal](https
 
 ### Table of Contents
 - [Getting Started](#getting-started)
+- [Component System](#component-system)
+- [Customizing Components](#customizing-components)
 - [Reference](#reference)
 - [Examples](#examples)
 - [Preview](#preview)
@@ -72,6 +74,98 @@ After that, you can add the required vocdoni components dependencies:
 yarn add @vocdoni/sdk @vocdoni/chakra-components react-markdown remark-gfm
 ~~~
 
+## Component System
+
+This package provides Chakra UI implementations of the Vocdoni component system. The components are initialized automatically when you use the `ClientProvider`:
+
+```tsx
+import { ClientProvider } from '@vocdoni/chakra-components'
+
+function App() {
+  return (
+    <ClientProvider>
+      {/* your app content */}
+    </ClientProvider>
+  )
+}
+```
+
+## Customizing Components
+
+You can customize any component in two ways:
+
+### 1. Through the ClientProvider
+
+```tsx
+import { ClientProvider } from '@vocdoni/chakra-components'
+
+const CustomTitle = (props) => (
+  <h1 style={{ color: 'red' }} {...props}>
+    {props.children}
+  </h1>
+)
+
+function App() {
+  return (
+    <ClientProvider
+      components={{
+        Election: {
+          Title: CustomTitle
+        }
+      }}
+    >
+      {/* your app content */}
+    </ClientProvider>
+  )
+}
+```
+
+### 2. Using the useComponents Hook
+
+```tsx
+import { useComponents } from '@vocdoni/react-providers'
+
+function CustomizationExample() {
+  const { override } = useComponents()
+
+  useEffect(() => {
+    override({
+      Election: {
+        Title: CustomTitle
+      }
+    })
+  }, [])
+
+  return <div>{/* your content */}</div>
+}
+```
+
+### Available Components
+
+The following components can be customized:
+
+```typescript
+interface ChakraVocdoniComponents {
+  Election: {
+    Actions: React.ComponentType<ElectionActionProps>
+    Description: React.ComponentType<ElectionDescriptionProps>
+    Election: React.ComponentType<ElectionProviderComponentProps>
+    Envelope: React.ComponentType<ElectionEnvelopeProps>
+    Header: React.ComponentType<ElectionHeaderProps>
+    Questions: React.ComponentType<ElectionQuestionsProps>
+    Results: React.ComponentType<ElectionResultsProps>
+    Schedule: React.ComponentType<ElectionScheduleProps>
+    SpreadsheetAccess: React.ComponentType<ElectionSpreadsheetAccessProps>
+    StatusBadge: React.ComponentType<ElectionStatusBadgeProps>
+    Title: React.ComponentType<ElectionTitleProps>
+    VoteButton: React.ComponentType<ElectionVoteButtonProps>
+    VoteWeight: React.ComponentType<ElectionVoteWeightProps>
+  }
+}
+```
+
+Each component has its own prop types that extend Chakra UI's base props.
+
 ## Reference
 
 The developer portal includes a [reference](https://developer.vocdoni.io/ui-components) for the `@vocdoni/chakra-components` package.
@@ -116,11 +210,3 @@ This repository is licensed under the [GNU Affero General Public License v3.0.](
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)
-
-[`@vocdoni/chakra-components`]: ./packages/chakra-components/README.md
-[`@vocdoni/rainbowkit-wallets`]: ./packages/rainbowkit-wallets/README.md
-[`@vocdoni/react-providers`]: ./packages/react-providers/README.md
-
-[chakra-components badge]: https://img.shields.io/npm/v/%40vocdoni%2Fchakra-components?label=%40vocdoni%2Fchakra-components
-[rainbowkit-wallets badge]: https://img.shields.io/npm/v/%40vocdoni%2Frainbowkit-wallets?label=%40vocdoni%2Frainbowkit-wallets
-[react-providers badge]: https://img.shields.io/npm/v/%40vocdoni%2Freact-providers?label=%40vocdoni%2Freact-providers
diff --git a/packages/chakra-components/src/client.tsx b/packages/chakra-components/src/client.tsx
index 0de917e..8a1c6a0 100644
--- a/packages/chakra-components/src/client.tsx
+++ b/packages/chakra-components/src/client.tsx
@@ -1,18 +1,45 @@
 import { ToastProvider } from '@chakra-ui/react'
-import { ClientProviderComponentProps, ClientProvider as RPClientProvider } from '@vocdoni/react-providers'
+import { ComponentsProvider, ClientProvider as RPClientProvider } from '@vocdoni/react-providers'
 import merge from 'ts-deepmerge'
 import { ConfirmProvider } from './components'
+import { defaultComponents } from './components/defaultComponents'
 import { locales } from './i18n/locales'
+import { ChakraClientProviderProps } from './types'
 
-export const ClientProvider = ({ children, ...props }: ClientProviderComponentProps) => {
+export const ClientProvider = ({ children, components: customComponents, ...props }: ChakraClientProviderProps) => {
   const loc = {
     locale: merge(locales, props.locale || {}),
   }
+
+  // Merge components safely
+  const mergedComponents = customComponents
+    ? {
+        Election: {
+          ...defaultComponents.Election,
+          ...customComponents.Election,
+        },
+        Organization: {
+          ...defaultComponents.Organization,
+          ...customComponents.Organization,
+        },
+        Account: {
+          ...defaultComponents.Account,
+          ...customComponents.Account,
+        },
+        Pagination: {
+          ...defaultComponents.Pagination,
+          ...customComponents.Pagination,
+        },
+      }
+    : defaultComponents
+
   return (
     <>
       <ToastProvider />
       <RPClientProvider {...props} {...loc}>
-        <ConfirmProvider>{children}</ConfirmProvider>
+        <ComponentsProvider components={mergedComponents}>
+          <ConfirmProvider>{children}</ConfirmProvider>
+        </ComponentsProvider>
       </RPClientProvider>
     </>
   )
diff --git a/packages/chakra-components/src/components/Account/Balance.tsx b/packages/chakra-components/src/components/Account/Balance.tsx
index fdafad0..c73b495 100644
--- a/packages/chakra-components/src/components/Account/Balance.tsx
+++ b/packages/chakra-components/src/components/Account/Balance.tsx
@@ -1,7 +1,8 @@
-import { Tag, TagProps } from '@chakra-ui/react'
-import { useClient } from '@vocdoni/react-providers'
+import { Tag } from '@chakra-ui/react'
+import { useClient, withRegistry } from '@vocdoni/react-providers'
+import { AccountBalanceProps } from '../../types'
 
-export const Balance = (props: TagProps) => {
+const BaseBalance = (props: AccountBalanceProps) => {
   const { balance, localize } = useClient()
 
   if (balance < 0) {
@@ -21,3 +22,7 @@ export const Balance = (props: TagProps) => {
     </Tag>
   )
 }
+BaseBalance.displayName = 'BaseBalance'
+
+export const Balance = withRegistry(BaseBalance, 'Account', 'Balance')
+Balance.displayName = 'Balance'
diff --git a/packages/chakra-components/src/components/Election/Actions/Actions.tsx b/packages/chakra-components/src/components/Election/Actions/Actions.tsx
index 57f5fdd..6ae6c28 100644
--- a/packages/chakra-components/src/components/Election/Actions/Actions.tsx
+++ b/packages/chakra-components/src/components/Election/Actions/Actions.tsx
@@ -1,65 +1,60 @@
-import { ButtonGroup, chakra, ChakraProps, IconButton, useMultiStyleConfig } from '@chakra-ui/react'
+import { ButtonGroup, chakra, IconButton, useMultiStyleConfig } from '@chakra-ui/react'
 import { useClient, useElection } from '@vocdoni/react-providers'
 import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk'
 import { FaPause, FaPlay, FaStop } from 'react-icons/fa'
 import { ImCross } from 'react-icons/im'
+import { ElectionActionProps } from '../../../types'
 import { ActionsProvider } from './ActionsProvider'
 import { ActionCancel } from './Cancel'
 import { ActionContinue } from './Continue'
 import { ActionEnd } from './End'
 import { ActionPause } from './Pause'
 
-const Cancel = chakra(ImCross)
+const Cross = chakra(ImCross)
 const Play = chakra(FaPlay)
 const Pause = chakra(FaPause)
 const Stop = chakra(FaStop)
 
-export const ElectionActions = (props: ChakraProps) => {
+export const ElectionActions = (props: ElectionActionProps) => {
   const { localize, account } = useClient()
   const { election } = useElection()
   const styles = useMultiStyleConfig('ElectionActions')
 
-  if (
-    !election ||
-    !(election instanceof PublishedElection) ||
-    (election && !areEqualHexStrings(election.organizationId, account?.address)) ||
-    [ElectionStatus.CANCELED, ElectionStatus.ENDED, ElectionStatus.RESULTS].includes(election.status)
-  ) {
-    return null
-  }
+  if (!election || !(election instanceof PublishedElection)) return null
+
+  const isOwner = areEqualHexStrings(election.organizationId, account?.address)
+
+  if (!isOwner) return null
 
   return (
-    <ButtonGroup size='sm' isAttached variant='outline' position='relative' sx={styles.group} {...props}>
+    <ButtonGroup sx={styles.wrapper} {...props}>
       <ActionsProvider>
-        <ActionContinue
-          as={IconButton}
-          aria-label={localize('actions.continue')}
-          title={localize('actions.continue')}
-          sx={styles.buttons}
-          icon={<Play sx={styles.icons} />}
-        />
-        <ActionPause
-          as={IconButton}
-          aria-label={localize('actions.pause')}
-          title={localize('actions.pause')}
-          sx={styles.buttons}
-          icon={<Pause sx={styles.icons} />}
-        />
-        <ActionEnd
-          as={IconButton}
-          aria-label={localize('actions.end')}
-          title={localize('actions.end')}
-          sx={styles.buttons}
-          icon={<Stop sx={styles.icons} />}
+        {election.status === ElectionStatus.ONGOING && (
+          <IconButton
+            aria-label={localize('process_actions.pause', { defaultValue: 'Pause' })}
+            icon={<Pause />}
+            as={ActionPause}
+          />
+        )}
+        {election.status === ElectionStatus.PAUSED && (
+          <IconButton
+            aria-label={localize('process_actions.continue', { defaultValue: 'Continue' })}
+            icon={<Play />}
+            as={ActionContinue}
+          />
+        )}
+        <IconButton
+          aria-label={localize('process_actions.end', { defaultValue: 'End' })}
+          icon={<Stop />}
+          as={ActionEnd}
         />
-        <ActionCancel
-          as={IconButton}
-          aria-label={localize('actions.cancel')}
-          title={localize('actions.cancel')}
-          sx={styles.buttons}
-          icon={<Cancel sx={styles.icons} />}
+        <IconButton
+          aria-label={localize('process_actions.cancel', { defaultValue: 'Cancel' })}
+          icon={<Cross />}
+          as={ActionCancel}
         />
       </ActionsProvider>
     </ButtonGroup>
   )
 }
+ElectionActions.displayName = 'ElectionActions'
diff --git a/packages/chakra-components/src/components/Election/Description.tsx b/packages/chakra-components/src/components/Election/Description.tsx
index f7d8bf7..c74ba35 100644
--- a/packages/chakra-components/src/components/Election/Description.tsx
+++ b/packages/chakra-components/src/components/Election/Description.tsx
@@ -1,10 +1,10 @@
-import { ChakraProps, useStyleConfig } from '@chakra-ui/react'
-import { useElection } from '@vocdoni/react-providers'
+import { useStyleConfig } from '@chakra-ui/react'
+import { useElection, withRegistry } from '@vocdoni/react-providers'
 import { PublishedElection } from '@vocdoni/sdk'
-import { ReactMarkdownProps } from 'react-markdown/lib/complex-types'
+import { ElectionDescriptionProps } from '../../types'
 import { Markdown } from '../layout'
 
-export const ElectionDescription = (props: Omit<ReactMarkdownProps, 'children' | 'node'> & ChakraProps) => {
+const BaseElectionDescription = (props: ElectionDescriptionProps) => {
   const styles = useStyleConfig('ElectionDescription', props)
   const { election } = useElection()
 
@@ -18,4 +18,7 @@ export const ElectionDescription = (props: Omit<ReactMarkdownProps, 'children' |
     </Markdown>
   )
 }
+BaseElectionDescription.displayName = 'BaseElectionDescription'
+
+export const ElectionDescription = withRegistry(BaseElectionDescription, 'Election', 'Description')
 ElectionDescription.displayName = 'ElectionDescription'
diff --git a/packages/chakra-components/src/components/Election/Election.tsx b/packages/chakra-components/src/components/Election/Election.tsx
index 4ab98a9..3a9dfb3 100644
--- a/packages/chakra-components/src/components/Election/Election.tsx
+++ b/packages/chakra-components/src/components/Election/Election.tsx
@@ -6,7 +6,7 @@ import {
   ElectionActions,
   ElectionDescription,
   ElectionHeader,
-  ElectionQuestions,
+  ElectionQuestion,
   ElectionResults,
   ElectionSchedule,
   ElectionStatusBadge,
@@ -25,35 +25,36 @@ Election.displayName = 'Election'
 // Not exported since we're not allowing it to be configured. If you want to customize it past
 // this level, create a custom Election component with the provided election components.
 const ElectionBody = () => {
-  const {
-    errors: { election: error },
-    election,
-    connected,
-  } = useElection()
+  const { election } = useElection()
 
-  if (error) {
+  if (!election) {
     return (
       <Alert status='error'>
         <AlertIcon />
-        <AlertDescription>{error}</AlertDescription>
+        <AlertDescription>Election not found</AlertDescription>
       </Alert>
     )
   }
 
+  if (!(election instanceof PublishedElection)) {
+    return null
+  }
+
   return (
     <>
-      <ElectionHeader />
+      <ElectionStatusBadge />
       <ElectionTitle />
+      <ElectionDescription />
+      <ElectionHeader />
       <ElectionSchedule />
-      <ElectionStatusBadge />
+      <HR />
       <ElectionActions />
-      <ElectionDescription />
       <HR />
-      <ElectionQuestions />
+      <SpreadsheetAccess />
       <VoteButton />
-      {election instanceof PublishedElection && election?.get('census.type') === 'spreadsheet' && connected && (
-        <SpreadsheetAccess />
-      )}
+      {election.questions.map((question, index) => (
+        <ElectionQuestion key={index} question={question} index={index.toString()} />
+      ))}
       <ElectionResults />
     </>
   )
diff --git a/packages/chakra-components/src/components/Election/Envelope.tsx b/packages/chakra-components/src/components/Election/Envelope.tsx
index fc8f11f..e2e0a3c 100644
--- a/packages/chakra-components/src/components/Election/Envelope.tsx
+++ b/packages/chakra-components/src/components/Election/Envelope.tsx
@@ -1,4 +1,4 @@
-import { chakra, ChakraProps, List, ListItem, Text, useMultiStyleConfig } from '@chakra-ui/react'
+import { chakra, List, ListItem, Text, useMultiStyleConfig } from '@chakra-ui/react'
 import { useDatesLocale, useElection } from '@vocdoni/react-providers'
 import {
   ElectionResultsTypeNames,
@@ -11,15 +11,11 @@ import {
 } from '@vocdoni/sdk'
 import { format } from 'date-fns'
 import { Component, ErrorInfo, PropsWithChildren } from 'react'
+import { ElectionEnvelopeProps } from '../../types'
 
 export type VotePackageType = IVotePackage | IVoteEncryptedPackage
 
-export const Envelope = ({
-  votePackage,
-  ...props
-}: {
-  votePackage: VotePackageType
-} & ChakraProps) => {
+export const Envelope = ({ votePackage, ...props }: ElectionEnvelopeProps) => {
   const styles = useMultiStyleConfig('Envelope')
   const { election, localize } = useElection()
   const locale = useDatesLocale()
@@ -46,7 +42,7 @@ export const Envelope = ({
     <chakra.div sx={styles.wrapper} {...props}>
       {election.questions.map((q, i) => {
         return (
-          <chakra.div sx={styles.question}>
+          <chakra.div key={i} sx={styles.question}>
             <EnvelopeErrorBoundary question={q}>
               <Text sx={styles.title}>{localize('envelopes.question_title', { title: q.title.default })}</Text>
               <SelectedOptions question={q} questionIndex={i} votes={votePackage.votes} />
@@ -57,6 +53,7 @@ export const Envelope = ({
     </chakra.div>
   )
 }
+Envelope.displayName = 'Envelope'
 
 const SelectedOptions = ({
   question,
diff --git a/packages/chakra-components/src/components/Election/Header.tsx b/packages/chakra-components/src/components/Election/Header.tsx
index f376a68..ff91823 100644
--- a/packages/chakra-components/src/components/Election/Header.tsx
+++ b/packages/chakra-components/src/components/Election/Header.tsx
@@ -1,9 +1,10 @@
 import { useStyleConfig } from '@chakra-ui/react'
-import { useElection } from '@vocdoni/react-providers'
+import { useElection, withRegistry } from '@vocdoni/react-providers'
 import { PublishedElection } from '@vocdoni/sdk'
-import { Image, IPFSImageProps } from '../layout'
+import { ElectionHeaderProps } from '../../types'
+import { Image } from '../layout'
 
-export const ElectionHeader = (props: IPFSImageProps) => {
+const BaseElectionHeader = (props: ElectionHeaderProps) => {
   const styles = useStyleConfig('ElectionHeader', props)
   const { election } = useElection()
 
@@ -13,3 +14,7 @@ export const ElectionHeader = (props: IPFSImageProps) => {
 
   return <Image src={election?.header} sx={styles} {...props} />
 }
+BaseElectionHeader.displayName = 'BaseElectionHeader'
+
+export const ElectionHeader = withRegistry(BaseElectionHeader, 'Election', 'Header')
+ElectionHeader.displayName = 'ElectionHeader'
diff --git a/packages/chakra-components/src/components/Election/Questions/Fields.tsx b/packages/chakra-components/src/components/Election/Questions/Fields.tsx
index f87fdb1..20c8f6b 100644
--- a/packages/chakra-components/src/components/Election/Questions/Fields.tsx
+++ b/packages/chakra-components/src/components/Election/Questions/Fields.tsx
@@ -1,6 +1,5 @@
 import {
   chakra,
-  ChakraProps,
   Checkbox,
   FormControl,
   FormErrorMessage,
@@ -9,9 +8,10 @@ import {
   Stack,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
-import { useElection } from '@vocdoni/react-providers'
+import { useElection, withRegistry } from '@vocdoni/react-providers'
 import { ElectionResultsTypeNames, ElectionStatus, IQuestion, PublishedElection } from '@vocdoni/sdk'
 import { Controller, useFormContext } from 'react-hook-form'
+import { ElectionQuestionsProps } from '../../../types'
 import { Markdown } from '../../layout'
 import { QuestionChoice } from './Choice'
 import { QuestionTip } from './Tip'
@@ -21,16 +21,16 @@ export type QuestionProps = {
   question: IQuestion
 }
 
-export type QuestionFieldProps = ChakraProps & QuestionProps
+export type QuestionFieldProps = ElectionQuestionsProps & QuestionProps
 
-export const ElectionQuestion = ({ question, index }: QuestionFieldProps) => {
+const BaseElectionQuestion = ({ question, index, ...props }: QuestionFieldProps) => {
   const styles = useMultiStyleConfig('ElectionQuestion')
   const {
     formState: { errors },
   } = useFormContext()
 
   return (
-    <chakra.div __css={styles.container}>
+    <chakra.div __css={styles.container} {...props}>
       <FormControl isInvalid={!!errors[index]}>
         <chakra.div __css={styles.header}>
           <chakra.label __css={styles.title}>{question.title.default}</chakra.label>
@@ -48,6 +48,10 @@ export const ElectionQuestion = ({ question, index }: QuestionFieldProps) => {
     </chakra.div>
   )
 }
+BaseElectionQuestion.displayName = 'BaseElectionQuestion'
+
+export const ElectionQuestion = withRegistry(BaseElectionQuestion, 'Election', 'Questions')
+ElectionQuestion.displayName = 'ElectionQuestion'
 
 export const FieldSwitcher = (props: QuestionProps) => {
   const { election } = useElection()
diff --git a/packages/chakra-components/src/components/Election/Results.tsx b/packages/chakra-components/src/components/Election/Results.tsx
index 351f956..749727a 100644
--- a/packages/chakra-components/src/components/Election/Results.tsx
+++ b/packages/chakra-components/src/components/Election/Results.tsx
@@ -1,5 +1,5 @@
-import { Box, chakra, ChakraProps, Flex, Progress, Text, useMultiStyleConfig } from '@chakra-ui/react'
-import { useClient, useDatesLocale, useElection } from '@vocdoni/react-providers'
+import { Box, chakra, Flex, Progress, Text, useMultiStyleConfig } from '@chakra-ui/react'
+import { useClient, useDatesLocale, useElection, withRegistry } from '@vocdoni/react-providers'
 import {
   ElectionResultsTypeNames,
   ElectionStatus,
@@ -9,12 +9,13 @@ import {
   PublishedElection,
 } from '@vocdoni/sdk'
 import { format } from 'date-fns'
+import { ElectionResultsProps } from '../../types'
 
 const percent = (result: number, total: number) => ((Number(result) / total) * 100 || 0).toFixed(1) + '%'
 export const results = (result: number, decimals?: number) =>
   decimals ? parseInt(formatUnits(BigInt(result), decimals), 10) : result
 
-export const ElectionResults = (props: ChakraProps) => {
+const BaseElectionResults = (props: ElectionResultsProps) => {
   const styles = useMultiStyleConfig('ElectionResults')
   const { election } = useElection()
   const { localize } = useClient()
@@ -75,6 +76,10 @@ export const ElectionResults = (props: ChakraProps) => {
     </Flex>
   )
 }
+BaseElectionResults.displayName = 'BaseElectionResults'
+
+export const ElectionResults = withRegistry(BaseElectionResults, 'Election', 'Results')
+ElectionResults.displayName = 'ElectionResults'
 
 const electionChoices = (election: PublishedElection, q: IQuestion, abstainLabel: string) => {
   const nchoices = [...q.choices]
diff --git a/packages/chakra-components/src/components/Election/Schedule.tsx b/packages/chakra-components/src/components/Election/Schedule.tsx
index 51eb47a..cc9ca36 100644
--- a/packages/chakra-components/src/components/Election/Schedule.tsx
+++ b/packages/chakra-components/src/components/Election/Schedule.tsx
@@ -1,15 +1,10 @@
-import { chakra, forwardRef, HeadingProps, useMultiStyleConfig } from '@chakra-ui/react'
-import { useDatesLocale, useElection, useLocalize } from '@vocdoni/react-providers'
+import { chakra, forwardRef, useMultiStyleConfig } from '@chakra-ui/react'
+import { useDatesLocale, useElection, useLocalize, withRegistry } from '@vocdoni/react-providers'
 import { ElectionStatus, PublishedElection } from '@vocdoni/sdk'
 import { format as dformat, formatDistance } from 'date-fns'
+import { ElectionScheduleProps } from '../../types'
 
-export type ElectionScheduleProps = HeadingProps & {
-  format?: string
-  showRemaining?: boolean // If true, it return the remaining time to start, end, if ended or paused, instead of the full schedule
-  showCreatedAt?: boolean
-}
-
-export const ElectionSchedule = forwardRef<ElectionScheduleProps, 'h2'>(
+const BaseElectionSchedule = forwardRef<ElectionScheduleProps, 'h2'>(
   ({ format = 'PPp', showRemaining = false, showCreatedAt = false, ...rest }, ref) => {
     const styles = useMultiStyleConfig('ElectionSchedule', rest)
     const { election } = useElection()
@@ -78,11 +73,13 @@ export const ElectionSchedule = forwardRef<ElectionScheduleProps, 'h2'>(
     }
 
     return (
-      <chakra.h2 __css={styles} {...rest} {...ref}>
+      <chakra.h2 __css={styles} {...rest} ref={ref}>
         {text}
       </chakra.h2>
     )
   }
 )
+BaseElectionSchedule.displayName = 'BaseElectionSchedule'
 
+export const ElectionSchedule = withRegistry(BaseElectionSchedule, 'Election', 'Schedule')
 ElectionSchedule.displayName = 'ElectionSchedule'
diff --git a/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx b/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx
index 44ef091..2e65d75 100644
--- a/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx
+++ b/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  ChakraProps,
   FormControl,
   FormErrorMessage,
   FormHelperText,
@@ -23,6 +22,7 @@ import { errorToString, useClient, useElection, walletFromRow } from '@vocdoni/r
 import { PublishedElection, VocdoniSDKClient } from '@vocdoni/sdk'
 import { useEffect, useState } from 'react'
 import { RegisterOptions, useForm } from 'react-hook-form'
+import { ElectionSpreadsheetAccessProps } from '../../types'
 
 type MetaSpecs = {
   [name: string]: {
@@ -48,11 +48,7 @@ type MetaSpecs = {
   }
 }
 
-export type SpreadsheetAccessProps = ChakraProps & {
-  hashPrivateKey?: boolean
-}
-
-export const SpreadsheetAccess = ({ hashPrivateKey, ...rest }: SpreadsheetAccessProps) => {
+export const SpreadsheetAccess = ({ hashPrivateKey, ...rest }: ElectionSpreadsheetAccessProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const styles = useMultiStyleConfig('SpreadsheetAccess', rest)
   const { connected, clearClient } = useElection()
@@ -291,3 +287,4 @@ export const SpreadsheetAccess = ({ hashPrivateKey, ...rest }: SpreadsheetAccess
     </>
   )
 }
+SpreadsheetAccess.displayName = 'SpreadsheetAccess'
diff --git a/packages/chakra-components/src/components/Election/StatusBadge.tsx b/packages/chakra-components/src/components/Election/StatusBadge.tsx
index 0010503..53c35c8 100644
--- a/packages/chakra-components/src/components/Election/StatusBadge.tsx
+++ b/packages/chakra-components/src/components/Election/StatusBadge.tsx
@@ -1,8 +1,9 @@
-import { Tag, TagProps } from '@chakra-ui/react'
-import { useElection } from '@vocdoni/react-providers'
+import { Tag } from '@chakra-ui/react'
+import { useElection, withRegistry } from '@vocdoni/react-providers'
 import { ElectionStatus, InvalidElection, PublishedElection } from '@vocdoni/sdk'
+import { ElectionStatusBadgeProps } from '../../types'
 
-export const ElectionStatusBadge = (props: TagProps) => {
+const BaseElectionStatusBadge = (props: ElectionStatusBadgeProps) => {
   const { election, localize } = useElection()
 
   if (!election) return null
@@ -33,3 +34,7 @@ export const ElectionStatusBadge = (props: TagProps) => {
     </Tag>
   )
 }
+BaseElectionStatusBadge.displayName = 'BaseElectionStatusBadge'
+
+export const ElectionStatusBadge = withRegistry(BaseElectionStatusBadge, 'Election', 'StatusBadge')
+ElectionStatusBadge.displayName = 'ElectionStatusBadge'
diff --git a/packages/chakra-components/src/components/Election/Title.tsx b/packages/chakra-components/src/components/Election/Title.tsx
index 49b85f3..d3e9c0d 100644
--- a/packages/chakra-components/src/components/Election/Title.tsx
+++ b/packages/chakra-components/src/components/Election/Title.tsx
@@ -1,8 +1,8 @@
 import { chakra, forwardRef, HeadingProps, omitThemingProps, useStyleConfig } from '@chakra-ui/react'
-import { useElection } from '@vocdoni/react-providers'
+import { useElection, withRegistry } from '@vocdoni/react-providers'
 import { PublishedElection } from '@vocdoni/sdk'
 
-export const ElectionTitle = forwardRef<HeadingProps, 'h1'>((props, ref) => {
+const BaseElectionTitle = forwardRef<HeadingProps, 'h1'>((props, ref) => {
   const { election } = useElection()
   const styles = useStyleConfig('ElectionTitle', props)
   const rest = omitThemingProps(props)
@@ -17,4 +17,7 @@ export const ElectionTitle = forwardRef<HeadingProps, 'h1'>((props, ref) => {
     </chakra.h1>
   )
 })
+BaseElectionTitle.displayName = 'BaseElectionTitle'
+
+export const ElectionTitle = withRegistry(BaseElectionTitle, 'Election', 'Title')
 ElectionTitle.displayName = 'ElectionTitle'
diff --git a/packages/chakra-components/src/components/Election/VoteButton.tsx b/packages/chakra-components/src/components/Election/VoteButton.tsx
index a3b8f57..387ec50 100644
--- a/packages/chakra-components/src/components/Election/VoteButton.tsx
+++ b/packages/chakra-components/src/components/Election/VoteButton.tsx
@@ -1,10 +1,11 @@
 import { Button, ButtonProps, Text } from '@chakra-ui/react'
 import { Signer } from '@ethersproject/abstract-signer'
-import { useClient, useElection } from '@vocdoni/react-providers'
+import { useClient, useElection, withRegistry } from '@vocdoni/react-providers'
 import { ElectionStatus, InvalidElection } from '@vocdoni/sdk'
 import { useState } from 'react'
+import { ElectionVoteButtonProps } from '../../types'
 
-export const VoteButton = (props: ButtonProps) => {
+const BaseVoteButton = (props: ElectionVoteButtonProps) => {
   const { connected } = useClient()
   const {
     client,
@@ -60,3 +61,7 @@ export const VoteButton = (props: ButtonProps) => {
 
   return <Button shouldWrapChildren {...button} />
 }
+BaseVoteButton.displayName = 'BaseVoteButton'
+
+export const VoteButton = withRegistry(BaseVoteButton, 'Election', 'VoteButton')
+VoteButton.displayName = 'VoteButton'
diff --git a/packages/chakra-components/src/components/Election/VoteWeight.tsx b/packages/chakra-components/src/components/Election/VoteWeight.tsx
index 6577748..befb574 100644
--- a/packages/chakra-components/src/components/Election/VoteWeight.tsx
+++ b/packages/chakra-components/src/components/Election/VoteWeight.tsx
@@ -1,10 +1,11 @@
 import { chakra, useMultiStyleConfig } from '@chakra-ui/react'
-import { useElection } from '@vocdoni/react-providers'
+import { useElection, withRegistry } from '@vocdoni/react-providers'
 import { PublishedElection } from '@vocdoni/sdk'
 import { useEffect, useState } from 'react'
+import { ElectionVoteWeightProps } from '../../types'
 import { results } from './Results'
 
-export const VoteWeight = () => {
+const BaseVoteWeight = (props: ElectionVoteWeightProps) => {
   const { client, election, localize } = useElection()
   const [weight, setWeight] = useState<number | null>(null)
   const styles = useMultiStyleConfig('VoteWeight')
@@ -37,12 +38,16 @@ export const VoteWeight = () => {
     })()
   }, [client, election])
 
-  if (!weight || !election || !(election instanceof PublishedElection)) return
+  if (!weight || !election || !(election instanceof PublishedElection)) return null
 
   return (
-    <chakra.div __css={styles.wrapper}>
+    <chakra.div __css={styles.wrapper} {...props}>
       {localize('vote.weight')}
       <chakra.span __css={styles.weight}>{weight}</chakra.span>
     </chakra.div>
   )
 }
+BaseVoteWeight.displayName = 'BaseVoteWeight'
+
+export const VoteWeight = withRegistry(BaseVoteWeight, 'Election', 'VoteWeight')
+VoteWeight.displayName = 'VoteWeight'
diff --git a/packages/chakra-components/src/components/Organization/Avatar.tsx b/packages/chakra-components/src/components/Organization/Avatar.tsx
index 05a5a46..cd6857a 100644
--- a/packages/chakra-components/src/components/Organization/Avatar.tsx
+++ b/packages/chakra-components/src/components/Organization/Avatar.tsx
@@ -1,10 +1,10 @@
 import { useStyleConfig } from '@chakra-ui/react'
-import { useOrganization } from '@vocdoni/react-providers'
-import { Avatar, Image, IPFSAvatarProps, IPFSImageProps } from '../layout'
+import { useOrganization, withRegistry } from '@vocdoni/react-providers'
+import { OrganizationAvatarProps } from '../../types'
+import { Avatar, Image, IPFSImageProps } from '../layout'
 
-export const OrganizationAvatar = (props: IPFSAvatarProps) => {
+const BaseOrganizationAvatar = (props: OrganizationAvatarProps) => {
   const styles = useStyleConfig('OrganizationAvatar', props)
-
   const { organization } = useOrganization()
 
   let avatar = organization?.account.avatar
@@ -15,11 +15,13 @@ export const OrganizationAvatar = (props: IPFSAvatarProps) => {
 
   return <Avatar src={avatar} name={organization?.account.name.default} sx={styles} {...props} />
 }
+BaseOrganizationAvatar.displayName = 'BaseOrganizationAvatar'
+
+export const OrganizationAvatar = withRegistry(BaseOrganizationAvatar, 'Organization', 'Avatar')
 OrganizationAvatar.displayName = 'OrganizationAvatar'
 
 export const OrganizationImage = (props: IPFSImageProps) => {
   const styles = useStyleConfig('OrganizationImage', props)
-
   const { organization } = useOrganization()
 
   let avatar = organization?.account.avatar
diff --git a/packages/chakra-components/src/components/Organization/Description.tsx b/packages/chakra-components/src/components/Organization/Description.tsx
index 3de7a5a..13e1eb8 100644
--- a/packages/chakra-components/src/components/Organization/Description.tsx
+++ b/packages/chakra-components/src/components/Organization/Description.tsx
@@ -1,9 +1,9 @@
-import { ChakraProps, useStyleConfig } from '@chakra-ui/react'
-import { useOrganization } from '@vocdoni/react-providers'
-import { ReactMarkdownProps } from 'react-markdown/lib/complex-types'
+import { useStyleConfig } from '@chakra-ui/react'
+import { useOrganization, withRegistry } from '@vocdoni/react-providers'
+import { OrganizationDescriptionProps } from '../../types'
 import { Markdown } from '../layout'
 
-export const OrganizationDescription = (props: Omit<ReactMarkdownProps, 'children' | 'node'> & ChakraProps) => {
+const BaseOrganizationDescription = (props: OrganizationDescriptionProps) => {
   const styles = useStyleConfig('OrganizationDescription', props)
   const { organization } = useOrganization()
 
@@ -16,4 +16,7 @@ export const OrganizationDescription = (props: Omit<ReactMarkdownProps, 'childre
     </Markdown>
   )
 }
+BaseOrganizationDescription.displayName = 'BaseOrganizationDescription'
+
+export const OrganizationDescription = withRegistry(BaseOrganizationDescription, 'Organization', 'Description')
 OrganizationDescription.displayName = 'OrganizationDescription'
diff --git a/packages/chakra-components/src/components/Organization/Header.tsx b/packages/chakra-components/src/components/Organization/Header.tsx
index 0814c5c..1f4892c 100644
--- a/packages/chakra-components/src/components/Organization/Header.tsx
+++ b/packages/chakra-components/src/components/Organization/Header.tsx
@@ -1,10 +1,10 @@
 import { useStyleConfig } from '@chakra-ui/react'
-import { useOrganization } from '@vocdoni/react-providers'
-import { Image, IPFSImageProps } from '../layout'
+import { useOrganization, withRegistry } from '@vocdoni/react-providers'
+import { OrganizationHeaderProps } from '../../types'
+import { Image } from '../layout'
 
-export const OrganizationHeader = (props: IPFSImageProps) => {
+const BaseOrganizationHeader = (props: OrganizationHeaderProps) => {
   const styles = useStyleConfig('OrganizationHeader', props)
-
   const { organization } = useOrganization()
 
   if (!organization) return null
@@ -12,4 +12,7 @@ export const OrganizationHeader = (props: IPFSImageProps) => {
 
   return <Image src={header} sx={styles} {...props} />
 }
+BaseOrganizationHeader.displayName = 'BaseOrganizationHeader'
+
+export const OrganizationHeader = withRegistry(BaseOrganizationHeader, 'Organization', 'Header')
 OrganizationHeader.displayName = 'OrganizationHeader'
diff --git a/packages/chakra-components/src/components/Organization/Name.tsx b/packages/chakra-components/src/components/Organization/Name.tsx
index 5ed066a..6b69d12 100644
--- a/packages/chakra-components/src/components/Organization/Name.tsx
+++ b/packages/chakra-components/src/components/Organization/Name.tsx
@@ -1,7 +1,8 @@
-import { chakra, forwardRef, HeadingProps, omitThemingProps, useStyleConfig } from '@chakra-ui/react'
-import { useOrganization } from '@vocdoni/react-providers'
+import { chakra, forwardRef, omitThemingProps, useStyleConfig } from '@chakra-ui/react'
+import { useOrganization, withRegistry } from '@vocdoni/react-providers'
+import { OrganizationNameProps } from '../../types'
 
-export const OrganizationName = forwardRef<HeadingProps, 'h1'>((props, ref) => {
+const BaseOrganizationName = forwardRef<OrganizationNameProps, 'h1'>((props, ref) => {
   const { organization } = useOrganization()
   const styles = useStyleConfig('OrganizationName', props)
   const rest = omitThemingProps(props)
@@ -14,4 +15,7 @@ export const OrganizationName = forwardRef<HeadingProps, 'h1'>((props, ref) => {
     </chakra.h1>
   )
 })
+BaseOrganizationName.displayName = 'BaseOrganizationName'
+
+export const OrganizationName = withRegistry(BaseOrganizationName, 'Organization', 'Name')
 OrganizationName.displayName = 'OrganizationName'
diff --git a/packages/chakra-components/src/components/Pagination/Button.tsx b/packages/chakra-components/src/components/Pagination/Button.tsx
index ed00048..041a3c5 100644
--- a/packages/chakra-components/src/components/Pagination/Button.tsx
+++ b/packages/chakra-components/src/components/Pagination/Button.tsx
@@ -1,7 +1,12 @@
-import { Button, ButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react'
+import { Button, forwardRef, useStyleConfig } from '@chakra-ui/react'
+import { withRegistry } from '@vocdoni/react-providers'
+import { PaginationButtonProps } from '../../types'
 
-export const PaginationButton = forwardRef<ButtonProps, 'div'>((props, ref) => {
+const BasePaginationButton = forwardRef<PaginationButtonProps, 'button'>((props, ref) => {
   const styles = useStyleConfig('PaginationButton', props)
-  return <Button sx={styles} {...props} />
+  return <Button ref={ref} sx={styles} {...props} />
 })
+BasePaginationButton.displayName = 'BasePaginationButton'
+
+export const PaginationButton = withRegistry(BasePaginationButton, 'Pagination', 'Button')
 PaginationButton.displayName = 'PaginationButton'
diff --git a/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx b/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx
index 3e036bb..93462d6 100644
--- a/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx
+++ b/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx
@@ -1,13 +1,9 @@
-import { Button, ButtonProps, Input, InputProps, useMultiStyleConfig } from '@chakra-ui/react'
-import { useLocalize } from '@vocdoni/react-providers'
+import { Button, Input, useMultiStyleConfig } from '@chakra-ui/react'
+import { useLocalize, withRegistry } from '@vocdoni/react-providers'
 import { useState } from 'react'
+import { PaginationEllipsisButtonProps } from '../../types'
 
-type EllipsisButtonProps = ButtonProps & {
-  gotoPage: (page: number) => void
-  inputProps?: InputProps
-}
-
-export const EllipsisButton = ({ gotoPage, inputProps, ...rest }: EllipsisButtonProps) => {
+const BaseEllipsisButton = ({ gotoPage, inputProps, ...rest }: PaginationEllipsisButtonProps) => {
   const [ellipsisInput, setEllipsisInput] = useState(false)
   const localize = useLocalize()
   const styles = useMultiStyleConfig('EllipsisButton', rest)
@@ -47,4 +43,7 @@ export const EllipsisButton = ({ gotoPage, inputProps, ...rest }: EllipsisButton
     </Button>
   )
 }
+BaseEllipsisButton.displayName = 'BaseEllipsisButton'
+
+export const EllipsisButton = withRegistry(BaseEllipsisButton, 'Pagination', 'EllipsisButton')
 EllipsisButton.displayName = 'EllipsisButton'
diff --git a/packages/chakra-components/src/components/Pagination/Pagination.tsx b/packages/chakra-components/src/components/Pagination/Pagination.tsx
index e2edcf4..c760837 100644
--- a/packages/chakra-components/src/components/Pagination/Pagination.tsx
+++ b/packages/chakra-components/src/components/Pagination/Pagination.tsx
@@ -1,25 +1,11 @@
-import {
-  ButtonGroup,
-  ButtonGroupProps,
-  ButtonProps,
-  chakra,
-  InputProps,
-  Text,
-  useMultiStyleConfig,
-} from '@chakra-ui/react'
-import { useLocalize, usePagination, useRoutedPagination } from '@vocdoni/react-providers'
-import { PaginationResponse } from '@vocdoni/sdk'
+import { ButtonGroup, ButtonProps, chakra, InputProps, Text, useMultiStyleConfig } from '@chakra-ui/react'
+import { useLocalize, usePagination, useRoutedPagination, withRegistry } from '@vocdoni/react-providers'
 import { ReactElement, useMemo } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
+import { PaginationProps } from '../../types'
 import { PaginationButton as PaginatorButton } from './Button'
 import { EllipsisButton } from './EllipsisButton'
 
-export type PaginationProps = ButtonGroupProps & {
-  maxButtons?: number | false
-  buttonProps?: ButtonProps
-  inputProps?: InputProps
-} & PaginationResponse
-
 type PaginatorButtonProps = {
   page: number
   currentPage: number
@@ -105,8 +91,9 @@ const PaginationButtons = ({
   currentPage: number
   createPageButton: CreatePageButtonType
   goToPage: GotoPageType
-} & ButtonGroupProps &
-  Pick<PaginationProps, 'maxButtons' | 'buttonProps'>) => {
+  maxButtons?: number | false
+  buttonProps?: ButtonProps
+} & Omit<PaginationProps, 'pagination' | 'maxButtons' | 'buttonProps' | 'inputProps'>) => {
   const styles = useMultiStyleConfig('Pagination')
   const t = useLocalize()
 
@@ -124,7 +111,7 @@ const PaginationButtons = ({
 
   return (
     <chakra.div __css={styles.wrapper}>
-      <ButtonGroup sx={styles.buttonGroup} {...rest}>
+      <ButtonGroup __css={styles.buttonGroup} {...rest}>
         {totalPages === undefined ? (
           <>
             <PaginatorButton
@@ -154,7 +141,7 @@ const PaginationButtons = ({
   )
 }
 
-export const Pagination = ({ maxButtons = 10, buttonProps, inputProps, pagination, ...rest }: PaginationProps) => {
+const BasePagination = ({ maxButtons = 10, buttonProps, inputProps, pagination, ...rest }: PaginationProps) => {
   const { setPage } = usePagination()
   const totalPages = pagination.lastPage + 1
   const page = pagination.currentPage
@@ -169,10 +156,14 @@ export const Pagination = ({ maxButtons = 10, buttonProps, inputProps, paginatio
       totalPages={totalPages}
       totalItems={pagination.totalItems}
       maxButtons={maxButtons}
+      buttonProps={buttonProps}
       {...rest}
     />
   )
 }
+BasePagination.displayName = 'BasePagination'
+
+export const Pagination = withRegistry(BasePagination, 'Pagination', 'Pagination')
 Pagination.displayName = 'Pagination'
 
 export const RoutedPagination = ({ maxButtons = 10, buttonProps, pagination, ...rest }: PaginationProps) => {
@@ -190,6 +181,8 @@ export const RoutedPagination = ({ maxButtons = 10, buttonProps, pagination, ...
       currentPage={currentPage}
       totalPages={totalPages}
       totalItems={pagination.totalItems}
+      maxButtons={maxButtons}
+      buttonProps={buttonProps}
       {...rest}
     />
   )
diff --git a/packages/chakra-components/src/components/defaultComponents.ts b/packages/chakra-components/src/components/defaultComponents.ts
new file mode 100644
index 0000000..b90db2a
--- /dev/null
+++ b/packages/chakra-components/src/components/defaultComponents.ts
@@ -0,0 +1,54 @@
+import { ChakraVocdoniComponents } from '../types'
+import { Balance } from './Account/Balance'
+import { ElectionActions } from './Election/Actions/Actions'
+import { ElectionDescription } from './Election/Description'
+import { Election } from './Election/Election'
+import { Envelope } from './Election/Envelope'
+import { ElectionHeader } from './Election/Header'
+import { ElectionQuestion } from './Election/Questions/Fields'
+import { ElectionResults } from './Election/Results'
+import { ElectionSchedule } from './Election/Schedule'
+import { SpreadsheetAccess } from './Election/SpreadsheetAccess'
+import { ElectionStatusBadge } from './Election/StatusBadge'
+import { ElectionTitle } from './Election/Title'
+import { VoteButton } from './Election/VoteButton'
+import { VoteWeight } from './Election/VoteWeight'
+import { OrganizationAvatar } from './Organization/Avatar'
+import { OrganizationDescription } from './Organization/Description'
+import { OrganizationHeader } from './Organization/Header'
+import { OrganizationName } from './Organization/Name'
+import { PaginationButton } from './Pagination/Button'
+import { EllipsisButton } from './Pagination/EllipsisButton'
+import { Pagination } from './Pagination/Pagination'
+
+export const defaultComponents: ChakraVocdoniComponents = {
+  Election: {
+    Actions: ElectionActions,
+    Description: ElectionDescription,
+    Election,
+    Envelope,
+    Header: ElectionHeader,
+    Questions: ElectionQuestion,
+    Results: ElectionResults,
+    Schedule: ElectionSchedule,
+    SpreadsheetAccess,
+    StatusBadge: ElectionStatusBadge,
+    Title: ElectionTitle,
+    VoteButton,
+    VoteWeight,
+  },
+  Organization: {
+    Avatar: OrganizationAvatar,
+    Description: OrganizationDescription,
+    Header: OrganizationHeader,
+    Name: OrganizationName,
+  },
+  Account: {
+    Balance,
+  },
+  Pagination: {
+    Button: PaginationButton,
+    EllipsisButton,
+    Pagination,
+  },
+}
diff --git a/packages/chakra-components/src/index.ts b/packages/chakra-components/src/index.ts
index 2576a5d..c6bb796 100644
--- a/packages/chakra-components/src/index.ts
+++ b/packages/chakra-components/src/index.ts
@@ -1,4 +1,30 @@
-export * from './client'
+// Export components
 export * from './components'
+
+// Export environment and theme
 export * from './environment'
 export * from './theme'
+
+// Export client provider
+export { ClientProvider } from './client'
+export type { ChakraClientProviderProps } from './types'
+
+// Export component types
+export type {
+  ChakraVocdoniComponents,
+  ElectionActionProps,
+  ElectionDescriptionProps,
+  ElectionEnvelopeProps,
+  ElectionHeaderProps,
+  ElectionQuestionsProps,
+  ElectionResultsProps,
+  ElectionScheduleProps,
+  ElectionSpreadsheetAccessProps,
+  ElectionStatusBadgeProps,
+  ElectionTitleProps,
+  ElectionVoteButtonProps,
+  ElectionVoteWeightProps,
+} from './types'
+
+// Export default components for initialization
+export { defaultComponents } from './components/defaultComponents'
diff --git a/packages/chakra-components/src/types.ts b/packages/chakra-components/src/types.ts
new file mode 100644
index 0000000..d4b4277
--- /dev/null
+++ b/packages/chakra-components/src/types.ts
@@ -0,0 +1,93 @@
+import { ButtonGroupProps, ButtonProps, ChakraProps, HeadingProps, InputProps, TagProps } from '@chakra-ui/react'
+import {
+  ClientProviderComponentProps,
+  ElectionProviderComponentProps,
+  VocdoniComponentDefinition,
+} from '@vocdoni/react-providers'
+import { PaginationResponse } from '@vocdoni/sdk'
+import { ReactMarkdownProps } from 'react-markdown/lib/complex-types'
+import { IPFSImageProps } from './components/layout'
+
+// Define the prop types for each component
+export type ElectionActionProps = ChakraProps
+export type ElectionDescriptionProps = Partial<ReactMarkdownProps> & ChakraProps
+export type ElectionEnvelopeProps = ChakraProps & { votePackage: any }
+export type ElectionHeaderProps = IPFSImageProps
+export type ElectionQuestionsProps = ChakraProps
+export type ElectionResultsProps = ChakraProps
+export type ElectionScheduleProps = HeadingProps & {
+  format?: string
+  showRemaining?: boolean
+  showCreatedAt?: boolean
+}
+export type ElectionSpreadsheetAccessProps = ChakraProps & {
+  hashPrivateKey?: boolean
+}
+export type ElectionStatusBadgeProps = TagProps
+export type ElectionTitleProps = HeadingProps
+export type ElectionVoteButtonProps = ChakraProps
+export type ElectionVoteWeightProps = ChakraProps
+
+// Organization component props
+export type OrganizationAvatarProps = ChakraProps
+export type OrganizationDescriptionProps = ReactMarkdownProps & ChakraProps
+export type OrganizationHeaderProps = ChakraProps
+export type OrganizationNameProps = HeadingProps
+
+// Account component props
+export type AccountBalanceProps = TagProps
+
+// Pagination component props
+export type PaginationButtonProps = ChakraProps
+export type PaginationEllipsisButtonProps = ChakraProps & {
+  gotoPage: (page: number) => void
+  inputProps?: InputProps
+}
+export type PaginationProps = ButtonGroupProps & {
+  maxButtons?: number | false
+  buttonProps?: ButtonProps
+  inputProps?: InputProps
+  pagination: PaginationResponse['pagination']
+}
+
+// Define our components structure matching VocdoniComponentDefinition
+export interface ChakraVocdoniComponents extends VocdoniComponentDefinition {
+  Election: {
+    Actions: React.ComponentType<ElectionActionProps>
+    Description: React.ComponentType<ElectionDescriptionProps>
+    Election: React.ComponentType<ElectionProviderComponentProps>
+    Envelope: React.ComponentType<ElectionEnvelopeProps>
+    Header: React.ComponentType<ElectionHeaderProps>
+    Questions: React.ComponentType<ElectionQuestionsProps>
+    Results: React.ComponentType<ElectionResultsProps>
+    Schedule: React.ComponentType<ElectionScheduleProps>
+    SpreadsheetAccess: React.ComponentType<ElectionSpreadsheetAccessProps>
+    StatusBadge: React.ComponentType<ElectionStatusBadgeProps>
+    Title: React.ComponentType<ElectionTitleProps>
+    VoteButton: React.ComponentType<ElectionVoteButtonProps>
+    VoteWeight: React.ComponentType<ElectionVoteWeightProps>
+  }
+  Organization: {
+    Avatar: React.ComponentType<OrganizationAvatarProps>
+    Description: React.ComponentType<OrganizationDescriptionProps>
+    Header: React.ComponentType<OrganizationHeaderProps>
+    Name: React.ComponentType<OrganizationNameProps>
+  }
+  Account: {
+    Balance: React.ComponentType<AccountBalanceProps>
+  }
+  Pagination: {
+    Button: React.ComponentType<PaginationButtonProps>
+    EllipsisButton: React.ComponentType<PaginationEllipsisButtonProps>
+    Pagination: React.ComponentType<PaginationProps>
+  }
+}
+
+// Make each category's components optional
+export type PartialChakraVocdoniComponents = {
+  [Category in keyof ChakraVocdoniComponents]?: Partial<ChakraVocdoniComponents[Category]>
+}
+
+export interface ChakraClientProviderProps extends ClientProviderComponentProps {
+  components?: PartialChakraVocdoniComponents
+}
diff --git a/packages/react-providers/README.md b/packages/react-providers/README.md
index 6ec3fbe..609d6b6 100644
--- a/packages/react-providers/README.md
+++ b/packages/react-providers/README.md
@@ -49,12 +49,12 @@
 
 This package includes react context & providers for integration with the Vocdoni protocol via the [Vocdoni SDK](https://developer.vocdoni.io/sdk).
 
-
 The best place to learn about using this package is the [developer portal](https://developer.vocdoni.io/ui-components).
 
 ### Table of Contents
 - [Getting Started](#getting-started)
 - [Reference](#reference)
+- [Component System](#component-system)
 - [Examples](#examples)
 - [Preview](#preview)
 - [Disclaimer](#disclaimer)
@@ -64,7 +64,6 @@ The best place to learn about using this package is the [developer portal](https
 
 ## Getting Started
 
-
 Using your favorite package manager:
 
 ~~~bash
@@ -88,6 +87,57 @@ const App = () => {
 
 `ClientProvider` is a dependency of the other providers, so you'll have to ensure you initialize it first as the parent.
 
+## Component System
+
+The package includes a framework-agnostic component system that allows UI packages to provide their own component implementations. This system consists of:
+
+### ComponentsProvider
+
+The `ComponentsProvider` manages a registry of components that can be used throughout your application:
+
+```tsx
+import { ComponentsProvider } from '@vocdoni/react-providers'
+
+function App() {
+  return (
+    <ComponentsProvider>
+      {/* your app content */}
+    </ComponentsProvider>
+  )
+}
+```
+
+### Component Structure
+
+The component system defines a standard structure for election-related components:
+
+```typescript
+interface VocdoniComponentDefinition {
+  Election: {
+    Actions: ComponentType<any>
+    Description: ComponentType<any>
+    Election: ComponentType<any>
+    // ... other components
+  }
+}
+```
+
+### Component Registration
+
+UI packages can register their components with the system:
+
+```typescript
+const { override } = useComponents()
+
+override({
+  Election: {
+    Title: CustomTitleComponent
+  }
+})
+```
+
+This system allows UI packages to provide their own implementations while maintaining a consistent structure.
+
 ## Reference
 
 The developer portal includes a [reference](https://developer.vocdoni.io/ui-components) for using the `@vocdoni/react-providers` package.
diff --git a/packages/react-providers/src/components/ComponentsProvider.tsx b/packages/react-providers/src/components/ComponentsProvider.tsx
new file mode 100644
index 0000000..cfa7b14
--- /dev/null
+++ b/packages/react-providers/src/components/ComponentsProvider.tsx
@@ -0,0 +1,95 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react'
+import { ComponentsContextValue, VocdoniComponentDefinition } from './types'
+
+const ComponentsContext = createContext<ComponentsContextValue | undefined>(undefined)
+
+export interface ComponentsProviderProps {
+  components?: Partial<VocdoniComponentDefinition>
+}
+
+export const useComponents = () => {
+  const context = useContext(ComponentsContext)
+  if (!context) {
+    throw new Error('useComponents must be used within a ComponentsProvider')
+  }
+  return context
+}
+
+const createEmptyComponent = () => () => null
+
+const createDefaultComponents = (): VocdoniComponentDefinition => ({
+  Election: {
+    Actions: createEmptyComponent(),
+    Description: createEmptyComponent(),
+    Election: createEmptyComponent(),
+    Envelope: createEmptyComponent(),
+    Header: createEmptyComponent(),
+    Questions: createEmptyComponent(),
+    Results: createEmptyComponent(),
+    Schedule: createEmptyComponent(),
+    SpreadsheetAccess: createEmptyComponent(),
+    StatusBadge: createEmptyComponent(),
+    Title: createEmptyComponent(),
+    VoteButton: createEmptyComponent(),
+    VoteWeight: createEmptyComponent(),
+  },
+  Organization: {
+    Avatar: createEmptyComponent(),
+    Description: createEmptyComponent(),
+    Header: createEmptyComponent(),
+    Name: createEmptyComponent(),
+  },
+  Account: {
+    Balance: createEmptyComponent(),
+  },
+  Pagination: {
+    Button: createEmptyComponent(),
+    EllipsisButton: createEmptyComponent(),
+    Pagination: createEmptyComponent(),
+  },
+})
+
+const mergeComponents = (
+  base: VocdoniComponentDefinition,
+  override?: Partial<VocdoniComponentDefinition>
+): VocdoniComponentDefinition => {
+  if (!override) return base
+  return {
+    Election: {
+      ...base.Election,
+      ...override.Election,
+    },
+    Organization: {
+      ...base.Organization,
+      ...override.Organization,
+    },
+    Account: {
+      ...base.Account,
+      ...override.Account,
+    },
+    Pagination: {
+      ...base.Pagination,
+      ...override.Pagination,
+    },
+  }
+}
+
+export const ComponentsProvider = ({
+  children,
+  components: initialComponents = {},
+}: PropsWithChildren<ComponentsProviderProps>) => {
+  const [components, setComponents] = useState<VocdoniComponentDefinition>(() =>
+    mergeComponents(createDefaultComponents(), initialComponents)
+  )
+
+  const override = (overrides: Partial<VocdoniComponentDefinition>) => {
+    setComponents((prev) => mergeComponents(prev, overrides))
+  }
+
+  const value: ComponentsContextValue = {
+    components,
+    override,
+  }
+
+  return <ComponentsContext.Provider value={value}>{children}</ComponentsContext.Provider>
+}
diff --git a/packages/react-providers/src/components/index.ts b/packages/react-providers/src/components/index.ts
new file mode 100644
index 0000000..379dc01
--- /dev/null
+++ b/packages/react-providers/src/components/index.ts
@@ -0,0 +1,3 @@
+export * from './ComponentsProvider'
+export * from './types'
+export * from './withRegistry'
diff --git a/packages/react-providers/src/components/types.ts b/packages/react-providers/src/components/types.ts
new file mode 100644
index 0000000..8b3d17b
--- /dev/null
+++ b/packages/react-providers/src/components/types.ts
@@ -0,0 +1,38 @@
+import { ComponentType } from 'react'
+
+export interface VocdoniComponentDefinition {
+  Election: {
+    Actions: ComponentType<any>
+    Description: ComponentType<any>
+    Election: ComponentType<any>
+    Envelope: ComponentType<any>
+    Header: ComponentType<any>
+    Questions: ComponentType<any>
+    Results: ComponentType<any>
+    Schedule: ComponentType<any>
+    SpreadsheetAccess: ComponentType<any>
+    StatusBadge: ComponentType<any>
+    Title: ComponentType<any>
+    VoteButton: ComponentType<any>
+    VoteWeight: ComponentType<any>
+  }
+  Organization: {
+    Avatar: ComponentType<any>
+    Description: ComponentType<any>
+    Header: ComponentType<any>
+    Name: ComponentType<any>
+  }
+  Account: {
+    Balance: ComponentType<any>
+  }
+  Pagination: {
+    Button: ComponentType<any>
+    EllipsisButton: ComponentType<any>
+    Pagination: ComponentType<any>
+  }
+}
+
+export interface ComponentsContextValue {
+  components: VocdoniComponentDefinition
+  override: (overrides: Partial<VocdoniComponentDefinition>) => void
+}
diff --git a/packages/react-providers/src/components/withRegistry.tsx b/packages/react-providers/src/components/withRegistry.tsx
new file mode 100644
index 0000000..f8c511b
--- /dev/null
+++ b/packages/react-providers/src/components/withRegistry.tsx
@@ -0,0 +1,44 @@
+import { ComponentType } from 'react'
+import { useComponents } from './ComponentsProvider'
+import { VocdoniComponentDefinition } from './types'
+
+export const withRegistry = <
+  P extends object,
+  Category extends keyof VocdoniComponentDefinition,
+  Component extends keyof VocdoniComponentDefinition[Category]
+>(
+  BaseComponent: ComponentType<P>,
+  category: Category,
+  key: Component
+) => {
+  const RegistryAwareComponent = (props: P) => {
+    const { components } = useComponents()
+
+    // Ensure components and category exist
+    if (!components || !components[category]) {
+      console.warn(`Registry: Missing components or category "${String(category)}"`)
+      return <BaseComponent {...props} />
+    }
+
+    const OverrideComponent = components[category][key] as ComponentType<P> | undefined
+
+    // Log component resolution for debugging
+    if (process.env.NODE_ENV !== 'production') {
+      console.debug(
+        `Registry: Resolving ${String(category)}.${String(key)}`,
+        OverrideComponent ? '(using override)' : '(using base)'
+      )
+    }
+
+    // If we have an override component, use it
+    if (OverrideComponent && OverrideComponent !== BaseComponent) {
+      return <OverrideComponent {...props} />
+    }
+
+    // Otherwise use the base component
+    return <BaseComponent {...props} />
+  }
+
+  RegistryAwareComponent.displayName = `Registry(${BaseComponent.displayName || BaseComponent.name})`
+  return RegistryAwareComponent
+}
diff --git a/packages/react-providers/src/index.ts b/packages/react-providers/src/index.ts
index ed9a74f..5fee272 100644
--- a/packages/react-providers/src/index.ts
+++ b/packages/react-providers/src/index.ts
@@ -1,4 +1,5 @@
 export * from './client'
+export * from './components'
 export * from './election'
 export * from './i18n'
 export * from './organization'