Default progressbar :: Progressbar

<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <span class="flex my-4 font-semibold text-gray-400">Default progress bar</span>
  <div class="mb-8 space-y-2">
    <p class="text-sm text-gray-600 dark:text-gray-200 font-semibold">
      Gray 
    </p>
  </div>
</div>

<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <span class="flex my-4 font-semibold text-gray-400">Default progress bar</span>
  <div class="mb-8 space-y-2">
    <%= rui_text(tag: :body, size: :bodySm, color: :gray, weight: :semibold){ "Gray " } %>
    <%= rui_progressbar( progress: 30) %>
  </div>
</div>

Embed Code

what's this?

<lookbook-embed app="https://rapidrails.cc/uibook/" preview="RapidRailsUI::Elements::ProgressbarComponentPreview" scenario="default"></lookbook-embed>

Embed URL

what's this?

https://rapidrails.cc/uibook/embed?props=%7B%22preview%22%3A%22RapidRailsUI%3A%3AElements%3A%3AProgressbarComponentPreview%22%2C%22scenario%22%3A%22default%22%7D

Lookbook v2.1.1

{ "version": "2.1.1", "env": "production", "config": { "project_name": "RapidRails UI Book", "project_logo": false, "preview_collection_label": "Components", "preview_paths": [ "test/components/previews", "/app/test/components/previews", "/app/test/components/previews" ], "preview_display_options": { }, "preview_controller": "ViewComponentsController", "preview_template": "lookbook/previews/preview", "preview_inspector": { "main_panels": [ "preview", "output" ], "drawer_panels": [ "source", "notes", "params", "*" ] }, "preview_embeds": { "enabled": true, "policy": "ALLOWALL", "panels": false, "actions": [ ], "scenarios": [ ], "display_option_controls": true }, "preview_layout": "component_preview", "preview_disable_action_view_annotations": true, "preview_type_default": "view_component", "preview_sort_scenarios": false, "page_collection_label": "UIBook", "page_controller": "Lookbook::PageController", "page_route": "pages", "page_paths": [ "/app/test/components/docs" ], "page_extensions": [ "html.*", "md.*" ], "page_options": { }, "markdown_options": { "tables": true, "fenced_code_blocks": true, "disable_indented_code_blocks": true, "strikethrough": true, "highlight": true, "with_toc_data": true, "lax_spacing": true }, "highlighter_options": { "theme": "github", "dark": false }, "component_paths": [ "app/views", "app/components", "app/components" ], "reload_on_change": false, "live_updates": false, "listen_paths": [ ], "listen_extensions": [ "rb", "html.*" ], "autoload_previews": true, "ui_theme": "rose", "ui_theme_overrides": { "header_bg": "#be123c", "nav_icon_stroke": "red" }, "ui_favicon": true, "log_level": 2, "log_use_rails_logger": true, "debug_menu": true, "links": { "docs": "https://v2.lookbook.build", "demo": "https://v2-demo.lookbook.build", "repo": "https://github.com/ViewComponent/lookbook/tree/v2" }, "using_view_component": true, "dependencies": { "actioncable": true, "listen": false, "view_component": true }, "panels": { }, "inputs": { }, "tags": { } } }

No matching results.

No matching results.

Default progressbar

Embed Code

Embed URL