Awesome Open Source
Awesome Open Source


Soda-ash is an interface between clojurescript's reagent and semantic-ui-react.


Add the following stylesheet to your index.html:

<link rel="stylesheet" href="//"></link>

Put the following in the :dependencies vector of your project.clj

[reagent "0.8.1"]
[soda-ash "0.83.0"]

Then require soda-ash in your namespace.

  (:require [soda-ash.core :as sa]))


Let's take a look at a modal. In javascript, you'd write something like this:

import React from 'react'
import { Button, Header, Image, Modal } from 'semantic-ui-react'

const ModalModalExample = () => (
  <Modal trigger={<Button>Show Modal</Button>}>
    <Modal.Header>Select a Photo</Modal.Header>
    <Modal.Content image>
      <Image wrapped size='medium' src='' />
        <Header>Default Profile Image</Header>
        <p>We've found the following gravatar image associated with your e-mail address.</p>
        <p>Is it okay to use this photo?</p>

export default ModalModalExample

However, in clojurescript with soda-ash, you'd write something like this:

   [reagent.core :as reagent]
   [soda-ash.core :as sa]))

(defn modal-example []
  [sa/Modal {:trigger (reagent/as-element [sa/Button "Show Modal"])}
   [sa/ModalHeader "Select a Photo"]
   [sa/ModalContent {:image true}
    [sa/Image {:wrapped true
               :size    "medium"
               :src     ""}]
     [sa/Header "Default Profile Image"]
     [:p "We've found the following gravatar image associated with your e-mail address."]
     [:p "Is it okay to use this photo?"]


  • Renamed List to ListSA to avoid confusion with clojure.core/list
  • Renamed Comment to CommentSA to avoid confusion with clojure.core/comment


using semantic ui with re-frame blog post by @kennethkalmer

Sodium is a wrapper around soda-ash. Sodium adds two sets of features into the mix, both aimed at making it easier to include Semantic UI in re-frame projects:

  1. Utility functions to get values in and out of components.
  2. Validity-checking aids to help avoid typos.


If you have questions, I can usually be found hanging out in the clojurians #reagent slack channel (my handle is @gadfly361).


Copyright © 2016 Matthew Jaoudi

Distributed under the The MIT License (MIT).

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Clojure (24,710
Clojurescript (1,005
Semantic Ui (633
Semantic Ui React (204
Reagent (197
Related Projects