Tremorx

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!

Docs and Storybook

Preview the components and examples storybook available at https://tremorx.fly.dev

Installation

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.1"}
    
    # via git
    {:tremorx, git: "https://github.com/briankariuki/tremorx.git"}
  ]
end

Add 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-/ },
],

Usage

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>

Components

UI Components

• Accordion
• Badges
• Button
• Callout
• Card
• Date range picker
• Dialog
• Divider
• Icons
• Legend
• List
• Number Input
• Select
• Switch
• Table
• Tabs
• Text Input
• Textarea

Visualization Components

• 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

Extra Components

• 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.