DEDUPED Hot AI repos, turned into use cases Get 5 a day

What you can do with 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.

Trended earlier

deeplethe/solid-glass on GitHub

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.

What do you want to do?

4 use cases

  • Apply the Solid Glass look to a shadcn/ui project

    Install one stylesheet so existing shadcn/ui components take on the Solid Glass material.

    View prompt
    In the shadcn/ui project at <project-path>, 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.

  • Add agent status and chat components to an AI app

    Install Solid Glass's agent-focused components for status, steps, diffs and questions.

    View prompt
    In the React project at <project-path>, 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/<component>`. Report which files were created and confirm the project still builds.

  • Run the Solid Glass site to preview components and blocks

    Start the repo's site locally to browse components, examples and blocks before adopting them.

    View prompt
    Clone https://github.com/deeplethe/solid-glass into <target-folder>, 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.

  • Tune the glass thickness, tint and radius with the Create page

    Adjust theme dials on the Create page and take the few lines of CSS into your project.

    View prompt
    Open the Create page of the Solid Glass site, set the dials to <chosen-values>, copy the generated CSS, and add it to <stylesheet-path> after the solid-glass.css import. Report the variables changed and confirm the project still builds.

How to use Solid Glass

  1. Check you have what it needs: Node.js and npm; A shadcn/ui project with React 19, Tailwind CSS 4 and the Base UI components; Git, if you want to run the site from a local clone.
  2. Open deeplethe/solid-glass on GitHub and read the README and license.
  3. Start from a shadcn/ui project by running npx shadcn@latest init.
  4. Add the stylesheet by running npx shadcn@latest add deeplethe/solid-glass/solid-glass.
  5. Import it after Tailwind and shadcn's stylesheet: @import "./solid-glass.css";.
  6. Delete the :root and .dark colour variables that shadcn init wrote, since Solid Glass defines the same names.

These steps come from our top use case, Apply the Solid Glass look to a shadcn/ui project, which also has a copy-paste agent prompt.

Solid Glass alternatives · Best AI repos for Software and DevOps

About this repo

  • Who it is forFrontend developers and designers who already use or want to use shadcn/ui and Tailwind CSS 4 in a React app, especially for AI chat or agent interfaces.
  • Why it is hot
  • LanguageTypeScript
  • Sourcegithub.com/deeplethe/solid-glass · Back to Hot repos

Requirements

  • Node.js and npm
  • A shadcn/ui project with React 19, Tailwind CSS 4 and the Base UI components
  • Git, if you want to run the site from a local clone
Maintain Solid Glass? Add the Featured on Deduped badge

Paste this into your README:

[![Featured on Deduped](https://dedupedai.com/badge/deeplethe-solid-glass.svg)](https://dedupedai.com/use-cases/deeplethe-solid-glass/?ref=badge)

More badge styles and HTML

Questions about Solid Glass

What is 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. It is an open-source project on GitHub: https://github.com/deeplethe/solid-glass.

Who is Solid Glass for?

Frontend developers and designers who already use or want to use shadcn/ui and Tailwind CSS 4 in a React app, especially for AI chat or agent interfaces.

What can I do with Solid Glass?

4 use cases so far, for example: Apply the Solid Glass look to a shadcn/ui project; Add agent status and chat components to an AI app; Run the Solid Glass site to preview components and blocks. Each has steps and a copy-paste agent prompt.

What do I need to run Solid Glass?

Node.js and npm; A shadcn/ui project with React 19, Tailwind CSS 4 and the Base UI components; Git, if you want to run the site from a local clone.

What are alternatives to Solid Glass?

Other hot AI repos in Software and DevOps: Harness2, iFixAi, Orca, Diagram Design, AI Memory.

Is Solid Glass safe to run?

Deduped does not own, audit or vouch for it. Read the README and license, run it on your own systems first and review every command before you run it.