Prose v1.5

Quick start

To include the entire Prose UI system, follow these steps. You can also include individual components as needed by using the resources tab on each component page.

1. Download

   Grab the entire zip pack or download individual files for you specific needs.

   ↓ prose_v1.5.zip

   • prs-tokens_v1.5.css
   • prs-styles_v1.5.css
   • Optional
   • prs-reset_v1.5.css
   • AI / LLMs
   • llms_v1.5.md

2. Include

   Order matters!

   <!--
     ⚠️ 1 ⚠️ ~ TOKENS
     REQUIRED - includes variables for things like:
     colors, fonts, borders, sizes, etc.
   -->
   <link href="{path_to_css}/prs-tokens_v1.5.css" rel="stylesheet" />
   
   <!--
     ⚠️ 2 ⚠️ ~ RESET
     OPTIONAL - if you are using tailwind, mui, or some
     UI framework in your project you DO NOT NEED this
   -->
   <link href="{path_to_css}/prs-reset_v1.5.css" rel="stylesheet" />
   
   <!--
     ⚠️ 3 ⚠️ ~ STYLES
     "easy mode" components that will not interfere with
     other UI frameworks that may already be in your project;
     if you are starting a project from scratch use this with
     something like tailwind and enjoy simplicity and speed
   -->
   <link href="{path_to_css}/prs-styles_v1.5.css" rel="stylesheet" />

   or

   <style>
     /* tokens - paste here */
   
     /* reset - paste here - if you do not have a reset already in your project */
   
     /* styles - paste here */
   </style>

3. Use

   Follow the component documentation and use the provided accessible markup. You can also use the LLMS file in your project or AI prompt to help learn our design system.

   ---

   You can also include the styles.css, tokens.css, and llms.md files in your AI prompts to have the UI look closer to our brand guidelines.

   Here's an example AI prompt using the prs-llms.md file:

   - Build a **simple** SaaS dashboard app.
   - It needs to use `react`, `vite`, and `tailwindcss v4` (for layouts and spacing ONLY).
   - Use the `prs-styles` CSS & `prs-tokens` CSS for ALL components.
   - Use the `llms` MD file for instructions on how/when to use the CSS/components.