# AI use cases for Solid Glass (deeplethe/solid-glass) Repo: [deeplethe/solid-glass](https://github.com/deeplethe/solid-glass) | Use cases: 4 | Page: https://dedupedai.com/use-cases/deeplethe-solid-glass/ Solid Glass is a TypeScript design system of CSS and React components for AI applications, with a glass-inspired material that works alongside shadcn/ui. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Apply the Solid Glass look to a shadcn/ui project: https://dedupedai.com/use-cases/deeplethe-solid-glass/apply-solid-glass-to-shadcn-project/ - Add agent status and chat components to an AI app: https://dedupedai.com/use-cases/deeplethe-solid-glass/add-agent-interface-components/ - Run the Solid Glass site to preview components and blocks: https://dedupedai.com/use-cases/deeplethe-solid-glass/preview-solid-glass-locally/ - Tune the glass thickness, tint and radius with the Create page: https://dedupedai.com/use-cases/deeplethe-solid-glass/tune-solid-glass-theme-with-create-page/ ## How to apply the Solid Glass look to a shadcn/ui project with Solid Glass Repo: [deeplethe/solid-glass](https://github.com/deeplethe/solid-glass) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Install one stylesheet so existing shadcn/ui components take on the Solid Glass material. **Who it is for:** A frontend developer with a shadcn/ui app who wants a refined, layered look without rewriting components. **The problem:** Restyling every shadcn/ui component by hand is slow, and a theme change can break existing markup. **The outcome:** The project's existing shadcn/ui components render in the Solid Glass material in light and dark modes, with no component code changed. ### Steps 1. Start from a shadcn/ui project by running `npx shadcn@latest init`. 2. Add the stylesheet by running `npx shadcn@latest add deeplethe/solid-glass/solid-glass`. 3. Import it after Tailwind and shadcn's stylesheet: `@import "./solid-glass.css";`. 4. Delete the `:root` and `.dark` colour variables that `shadcn init` wrote, since Solid Glass defines the same names. 5. Check the app in both light and dark mode; dark is the material as designed. ### Prompt to paste into your agent ```text In the shadcn/ui project at , add the Solid Glass stylesheet from the deeplethe/solid-glass repository using `npx shadcn@latest add deeplethe/solid-glass/solid-glass`, import it after the Tailwind and shadcn stylesheets, and remove the duplicate `:root` and `.dark` colour variables. Report the files changed and confirm the build still runs. ``` ### Caveat The README says a few shadcn/ui components in this repo differ from stock, but the stylesheet does not depend on those differences, so your own components should keep working. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/deeplethe-solid-glass/apply-solid-glass-to-shadcn-project/ ## How to add agent status and chat components to an AI app with Solid Glass Repo: [deeplethe/solid-glass](https://github.com/deeplethe/solid-glass) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README Install Solid Glass's agent-focused components for status, steps, diffs and questions. **Who it is for:** A developer building an AI agent or chat interface who needs to show streaming responses, tool steps and human questions. **The problem:** AI interfaces need to show an agent's status, steps, diffs and pending questions, and generic components do not cover these. **The outcome:** The app has ready-made components for turn status, a composer, tool steps, diffs, ask cards, context usage, task notices and reasoning. ### Steps 1. Install the status glyph by running `npx shadcn@latest add deeplethe/solid-glass/status-glyph`. 2. Add the other components you need, for example `npx shadcn@latest add deeplethe/solid-glass/tool-steps`. (inferred, check the README) 3. Use `turn-status` for the agent's status line and `composer` for the input box. 4. Use `ask-card` for questions the agent asks, and `context-ring` for how full its context is. 5. Check each component renders in the app's light and dark modes. ### Prompt to paste into your agent ```text In the React project at , install the Solid Glass components `turn-status`, `composer`, `tool-steps` and `ask-card` from the deeplethe/solid-glass registry with `npx shadcn@latest add deeplethe/solid-glass/`. Report which files were created and confirm the project still builds. ``` ### Caveat The components are built for interfaces where an agent works, so they assume a React 19 and Tailwind CSS 4 setup as the README describes. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/deeplethe-solid-glass/add-agent-interface-components/ ## How to run the Solid Glass site to preview components and blocks with Solid Glass Repo: [deeplethe/solid-glass](https://github.com/deeplethe/solid-glass) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Start the repo's site locally to browse components, examples and blocks before adopting them. **Who it is for:** A designer or developer who wants to see the material, components and blocks before choosing to use them. **The problem:** Judging a design system from screenshots alone makes it hard to see how the material behaves in real screens. **The outcome:** A local copy of the site runs at localhost, showing components, examples and blocks in light or dark mode. ### Steps 1. Clone the repository with `git clone https://github.com/deeplethe/solid-glass.git` and enter the folder. (inferred, check the README) 2. Install dependencies with `npm install`. 3. Start the site with `npm run dev` and open http://localhost:5191. 4. Open the Blocks and Create pages to see whole screens and the theme dials. 5. Optionally open `/dev/examples?theme=light` to view every example in light mode. ### Prompt to paste into your agent ```text Clone https://github.com/deeplethe/solid-glass into , run `npm install` and `npm run dev`, then open http://localhost:5191. Report whether the home page loads and list the components visible on the Blocks page. ``` ### Caveat The README names the default port 5191 and the Create and Blocks pages, but the clone step is inferred rather than stated, so check the repository address first. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/deeplethe-solid-glass/preview-solid-glass-locally/ ## How to tune the glass thickness, tint and radius with the Create page with Solid Glass Repo: [deeplethe/solid-glass](https://github.com/deeplethe/solid-glass) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Adjust theme dials on the Create page and take the few lines of CSS into your project. **Who it is for:** A designer or frontend developer who wants the material to match a product's brand without writing CSS from scratch. **The problem:** Hand-tuning a glass material's thickness, tint, radius and blur in CSS is slow to iterate on. **The outcome:** A customised set of Solid Glass variables that matches the chosen dials, ready to paste into the project's stylesheet. ### Steps 1. Open the Create page at https://deeplethe.github.io/solid-glass/create. 2. Adjust the dials for thickness, tint, chart colour, type, radius, rim and blur, and watch the preview update. 3. Copy the few lines of CSS the page produces. 4. Paste them after the Solid Glass import in your stylesheet, below the `@import "./solid-glass.css";` line. 5. Check the components in light and dark mode to confirm the chosen values apply. ### Prompt to paste into your agent ```text Open the Create page of the Solid Glass site, set the dials to , copy the generated CSS, and add it to after the solid-glass.css import. Report the variables changed and confirm the project still builds. ``` ### Caveat The README says the Create page turns the stylesheet's variables, so changes apply to the whole app and should be checked against existing shadcn/ui components. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/deeplethe-solid-glass/tune-solid-glass-theme-with-create-page/