Frequently Asked Questions

Solid Glass is a refined, glass-inspired design system specifically crafted for AI applications. It provides a unique aesthetic that feels solid and clear from a distance, while revealing subtle materiality up close. It's built to create calm, readable interfaces that work seamlessly with the dynamic, ever-changing nature of AI-driven content like streaming responses, agent workflows, and real-time data.

Solid Glass is designed for a wide range of professionals building AI-powered tools:

• AI Developers & Engineers: Who need to build functional and beautiful interfaces for AI agents and chatbots.
• Product Designers: Seeking a cohesive design language to create consistent and polished user experiences.
• Product Teams: Looking to accelerate development with ready-to-use components and design tokens.
• Data Scientists & Researchers: Who want to present complex AI interactions in an intuitive and user-friendly way.

Unlike flat or liquid glass design systems, Solid Glass strikes a perfect balance. Flat designs can feel lifeless and offer no depth, while liquid glass can be distracting and compete with text readability. Solid Glass provides just enough materiality—through delicate highlights, fine borders, and soft shadows—to create a sense of depth and tangibility without overwhelming the user or the content. It’s built with the specific needs of AI applications in mind, where clarity and calm are paramount.

Getting started with Solid Glass is straightforward. It's a single CSS stylesheet that integrates seamlessly with your existing project. You begin by setting up a project with React 19 and Tailwind CSS, then add the Solid Glass stylesheet. The system automatically adapts your existing shadcn/ui components to the new aesthetic. Our documentation provides a step-by-step installation guide and examples to help you apply the style to your components quickly.

Solid Glass is designed to work with modern web development environments. The main prerequisites are:

• A project using React 19.
• Tailwind CSS 4 configured in your project.
• The Base UI components from shadcn/ui installed.

If you have a shadcn/ui project, you can add Solid Glass with a single command. The theme is lightweight and doesn't require any changes to your existing component code, as it uses CSS variables and data attributes to apply the new style.

Solid Glass is designed as a layer on top of shadcn/ui, and its components are optimized to work with that ecosystem. While the core CSS theme might be adaptable to other component libraries, it will not provide the same seamless experience or pre-configured components. For the best results and access to all features like the AI-specific components (status glyphs, context rings, etc.), we recommend using it within a shadcn/ui project.

Solid Glass includes two types of components:

1. Adapted shadcn/ui Components: A curated set of essential components like buttons, inputs, dialogs, and dropdown menus, styled with the Solid Glass aesthetic.
2. Specialized AI Components: A unique set of components designed specifically for AI application interfaces, including:
   • status-glyph: Visual indicators for AI states (thinking, processing, etc.).
   • composer: The input area for a user to communicate with an AI agent.
   • tool-steps: A step-by-step view of the actions an AI agent is taking.
   • diff-view: A clear presentation of changes made by an AI.
   • context-ring: A visual representation of an AI's context window usage.
   • reasoning: A component to display the AI's internal thought process.

The Create page is an interactive customization tool that lets you "tune" the Solid Glass aesthetic to your specific needs. You can adjust properties like glass thickness, tint, blur, border radius, and more in real-time. As you make changes, you see a live preview and the exact CSS variables that are being modified. This is perfect for brands that need a unique look or for developers who want to understand the underlying system and create their own variations. The final output is a small snippet of CSS that you can add to your project to implement your custom version.

Blocks are complete, pre-built UI screens made from Solid Glass components. They are fully functional examples of how the design system can be used to create complex interfaces, such as a complete agent workspace with sessions, threads, and file management. You can view these blocks in action, and the code for each block is available for you to copy and adapt for your own projects. They serve as both inspiration and a starting point for common AI application patterns.

Solid Glass is offered with a clear and transparent pricing structure to suit different needs:

• Free Plan: Perfect for individuals and small projects. Includes access to the core theme, basic components, and the Blocks gallery for inspiration.
• Pro Plan: Designed for teams and growing businesses. Includes everything in the Free plan, plus access to the full component library (all AI-specific components), the interactive Create tool for customization, priority support, and commercial licensing.
• Enterprise Plan: For large organizations and mission-critical applications. Includes all Pro features, plus dedicated support, custom component development, and a private, on-premise hosting option.

You can find detailed pricing information and a feature comparison on our website.

Yes, we offer a 14-day free trial for the Pro plan. This allows you to explore all advanced features, including the Create tool and the full component library, with no obligation. No credit card is required to start the trial. At the end of the trial period, you can choose to subscribe to continue using Pro features or revert to the Free plan.

Your privacy and security are our top priorities. Solid Glass is a design system, not a data platform. When you use the Create tool to customize your theme, your customizations are processed locally in your browser. No design data or project information is ever sent to our servers. We do not store, track, or analyze your custom designs. For the Pro and Enterprise plans, all account data is stored securely and encrypted in transit and at rest.

Yes. Solid Glass is built with security in mind. The CSS is thoroughly vetted and contains no third-party trackers or scripts. The Pro and Enterprise plans include a commercial license that allows you to use the design system in your commercial products without any restrictions. We also offer a dedicated security contact for Enterprise customers to report any vulnerabilities or concerns.

We provide comprehensive support to help you succeed with Solid Glass:

• Free Plan: Access to our extensive documentation, community forums, and public issue tracker.
• Pro Plan: All Free support features, plus email access to our support team with a 48-hour response guarantee, and priority in our community forums.
• Enterprise Plan: A dedicated Slack channel for direct communication with our support and engineering teams, a dedicated account manager, and on-demand video calls for strategic guidance.

All documentation, from installation guides to API references for each component, is available on our website. We also provide a rich set of examples and live demos that you can interact with. The Blocks section showcases complete UI examples, and each component page includes code snippets and explanations of its properties and use cases.