Skip to content

Files

Latest commit

sfc-gh-jcarrollsfc-gh-jcarroll
Update Custom UI README - fix image links
Jul 1, 2024
78fbb37 · Jul 1, 2024

History

History

Custom UI - CSS and HTML

README.md

Custom UI - CSS and HTML

Discover our Custom UI showcase app for Streamlit! 🎨✨

Custom UI enables customization of the look, feel, and front-end behavior of Streamlit in Snowflake apps. This feature supports the following:

This app demonstrates how you can transform the default Streamlit interface by applying custom styles to various elements such as buttons, text, and containers. By leveraging CSS, the app provides a more personalized experience, illustrating the flexibility and aesthetic potential of combining Streamlit's interactive features with custom styling.

👉 Make sure to also check out the "Custom UI Features" mode for more examples of what's possible, and source code to get started.

Custom UI for Streamlit in Snowflake is currently in Public Preview. Read the docs to learn more.

Installation

  1. Open a new SQL Worksheet.

  2. Copy the contents of the file data/creation_script.sql into the Worksheet. Execute the CREATE statements of the script, which creates a database and schema.

  3. When you create a new Streamlit App, Snowflake automatically generates a new stage for this app. Access this stage in the Data section on the left side of the screen. Navigate to Databases, find the database associated with your Streamlit App (e.g., SAMPLEDATABASE.CUSTOM_UI).

Create Streamlit App

Left Menu

  1. Select the database, then choose the schema where you created the Streamlit App (e.g., public).

Look for database

  1. Navigate to Stages to view the available stages. Snowflake has automatically created a Stage with an autogenerated name.

Look for database

  1. Click on the stage name. The first time, it will prompt you to “Enable Directory Listing”. Click on that button.

Enable Directory

  1. Choose a warehouse.

Select warehouse

  1. Click on “+ Files” in the upper right corner to open a popup where you can add the required files.

  2. Upload the files by clicking on the "Upload" button in the lower right corner. Note that if a file has the same name as an existing file in the stage, the new file will overwrite the previous one (Select all the files in the root of the folder).

Select files

  1. With these steps, you have successfully uploaded files into your Streamlit App.