An Elixir Phoenix component library inspired by Tremor - The react library to build dashboards fast.
Warning
The current version is an alpha version. Please report any bugs you find!
Preview the components and examples storybook available at https://tremorx.fly.dev
If available in Hex, the package can be installed
by adding tremorx to your list of dependencies in mix.exs:
def deps do
[
{:tremorx, "~> 0.1.0"}
# via git
{:tremorx, git: "https://github.com/briankariuki/tremorx.git"}
]
endAdd tremorx to the dependecies section in assets/package.json like this:
If you don't have a package.json file, run npm init -y
{
"dependencies": {
# Add this line
"tremorx": "file:../deps/tremorx"
# If in umbrella project
"tremorx": "file:../../../deps/tremorx"
}
}
Then run npm install in the assets folder.
Then import the tremorx hooks in your assets/js/app.js file like this:
# Import the hooks
import { TremorHooks } from "tremorx";
# Add the hooks to the LiveSocket hooks option
let liveSocket = new LiveSocket("/live", Socket, {
hooks: {...MyHooks, ...TremorxHooks},
});
Update your *_web.ex file like this:
defp html_helpers do
quote do
# Add this line
use Tremorx
# Routes generation with the ~p sigil
unquote(verified_routes())
end
end
Configure your tailwind.config.js file with the follwing:
Allow tailwind to find css classes defined in this library by adding the following lines to the content section in tailwind.config.js
content: [
# Add these two lines.
"../deps/tremorx/lib/components/**/*.ex",
"../deps/tremorx/lib/js/*.js",
# If in umbrella.
"../../deps/tremorx/lib/components/**/*.ex",
"../../deps/tremorx/lib/js/*.js",
]
Configure the tremorx theme tokens by adding these theme extensions in theme section in tailwind.config.js. You can read more about theming Here
theme: {
# Extend your theme with tremor's default config
extend: {
colors: {
tremor: {
brand: {
faint: "#eff6ff",
muted: "#bfdbfe",
subtle: "#60a5fa",
DEFAULT: "#3b82f6",
emphasis: "#1d4ed8",
inverted: "#ffffff",
},
background: {
muted: "#f9fafb",
subtle: "#f3f4f6",
DEFAULT: "#ffffff",
emphasis: "#374151",
},
border: {
DEFAULT: "#e5e7eb",
},
ring: {
DEFAULT: "#e5e7eb",
},
content: {
subtle: "#9ca3af",
DEFAULT: "#6b7280",
emphasis: "#374151",
strong: "#111827",
inverted: "#ffffff",
},
},
"dark-tremor": {
brand: {
faint: "#0B1229",
muted: "#172554",
subtle: "#1e40af",
DEFAULT: "#3b82f6",
emphasis: "#60a5fa",
inverted: "#030712",
},
background: {
muted: "#131A2B",
subtle: "#1f2937",
DEFAULT: "#111827",
emphasis: "#d1d5db",
},
border: {
DEFAULT: "#374151",
},
ring: {
DEFAULT: "#1f2937",
},
content: {
subtle: "#4b5563",
DEFAULT: "#6b7280",
emphasis: "#e5e7eb",
strong: "#f9fafb",
inverted: "#000000",
},
},
},
boxShadow: {
# light
"tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"tremor-card":
"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"tremor-dropdown":
"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
# dark
"dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"dark-tremor-card":
"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"dark-tremor-dropdown":
"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
},
borderRadius: {
"tremor-small": "0.375rem",
"tremor-default": "0.5rem",
"tremor-full": "9999px",
},
fontSize: {
"tremor-label": ["0.75rem"],
"tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
"tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
"tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
},
},
}
Also safelist some css classes to prevent tailwind from purging them. To do this add the following to the safelist section in tailwind.config.js
safelist: [
{
pattern:
/^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
variants: ["hover", "ui-selected"],
},
{
pattern:
/^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
variants: ["hover", "ui-selected"],
},
{
pattern:
/^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
variants: ["hover", "ui-selected"],
},
{
pattern:
/^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
},
{
pattern:
/^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
},
{
pattern:
/^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
},
{ pattern: /^\-?m(\w?)-/ },
{ pattern: /^p(\w?)-/ },
{ pattern: /^text-/ },
{ pattern: /^bg-/ },
{ pattern: /^w-/ },
{ pattern: /^h-/ },
{ pattern: /^h(\w?)-/ },
{ pattern: /^grid-/ },
{ pattern: /^col-/ },
{ pattern: /^border-/ },
{ pattern: /^gap-/ },
{ pattern: /^min-/ },
],
In your template import the component you need. For example,
alias Tremorx.Components.Input
alias Tremorx.Components.Layout
alias Tremorx.Components.Text
Then use like the following
<Layout.col class="space-y-1.5">
<label for="name">
<Text.text class="text-tremor-content">
Name
</Text.text>
</label>
<Input.text_input
id="name"
name="user[name]"
placeholder="juma tano"
type="text"
field={f[:name]}
value={f[:name].value}
error={false}
error_message={nil}
/>
</Layout.col>
- Accordion
- Badges
- Button
- Callout
- Card
- Date range picker
- Dialog
- Divider
- Icons
- Legend
- List
- Number Input
- Select
- Switch
- Table
- Tabs
- Text Input
- Textarea
- Area Chart
- Bar Chart
- Donut Chart
- Line Chart
- Scatter Chart
- Funnel Chart
- Bar List
- Progress Bar
- Marker Bar
- Delta Bar
- Category Bar
- Progress Circle
- Spark Charts
- Tracker
- Dropdown
- Tooltip
- GeoJSON Map
Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/tremorx.