Showing preview only (622K chars total). Download the full file or copy to clipboard to get everything.
Repository: CommandCodeAI/langui
Branch: main
Commit: c7d6ee88d3cd
Files: 191
Total size: 574.0 KB
Directory structure:
gitextract_rjyvzjwn/
├── .eslintrc.json
├── .gitignore
├── CONTRIBUTING.md
├── Dockerfile
├── LICENSE
├── README.md
├── app/
│ ├── [category]/
│ │ ├── [collection]/
│ │ │ └── page.jsx
│ │ └── page.jsx
│ ├── api/
│ │ └── search/
│ │ └── route.js
│ ├── layout.jsx
│ └── page.jsx
├── jsconfig.json
├── next-env.d.js
├── next.config.js
├── package.json
├── postcss.config.js
├── prettier.config.js
├── public/
│ ├── components/
│ │ ├── components-alerts/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ └── 2.html
│ │ ├── components-badges/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ ├── 4.html
│ │ │ ├── 5-dark.html
│ │ │ └── 5.html
│ │ ├── components-buttons/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ ├── components-cards/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ └── 2.html
│ │ ├── components-copy/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ └── 3.html
│ │ ├── components-pricing/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ ├── components-prompt-containers/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ ├── components-prompt-history-panels/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ └── 3.html
│ │ ├── components-prompt-inputs/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ ├── 4.html
│ │ │ ├── 5-dark.html
│ │ │ ├── 5.html
│ │ │ ├── 6-dark.html
│ │ │ └── 6.html
│ │ ├── components-prompt-message-inputs/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ ├── 4.html
│ │ │ ├── 5-dark.html
│ │ │ ├── 5.html
│ │ │ ├── 6-dark.html
│ │ │ ├── 6.html
│ │ │ ├── 7-dark.html
│ │ │ └── 7.html
│ │ ├── components-prompt-messages/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ └── 3.html
│ │ ├── components-prompt-suggestions/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ └── 3.html
│ │ ├── components-prompts-cards/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ ├── components-sidebars/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ └── components-toggles/
│ │ ├── 1-dark.html
│ │ ├── 1.html
│ │ ├── 2-dark.html
│ │ └── 2.html
│ └── iframe.js
├── sitemap.config.js
└── src/
├── components/
│ ├── Analytics.jsx
│ ├── Banner.jsx
│ ├── BrandLogo.jsx
│ ├── ButtonGithubStars.jsx
│ ├── ButtonStyle.jsx
│ ├── CollectionCard.jsx
│ ├── CollectionGrid.jsx
│ ├── CollectionIcons.jsx
│ ├── CollectionLinks.jsx
│ ├── ComponentPreview.jsx
│ ├── ComponentsList.jsx
│ ├── Container.jsx
│ ├── Footer.jsx
│ ├── Header.jsx
│ ├── HeaderMenu.jsx
│ ├── HeaderMenuLinks.jsx
│ ├── HeaderSearch.jsx
│ ├── HeroBadge.jsx
│ ├── HeroBanner.jsx
│ ├── HeroComponentsPreview.jsx
│ ├── HeroFeatures.jsx
│ ├── HeroGradient.jsx
│ ├── HeroPattern.jsx
│ ├── IconClose.jsx
│ ├── IconGithub.jsx
│ ├── IconMenu.jsx
│ ├── IconTwitter.jsx
│ ├── MdxRemoteRender.jsx
│ ├── PreviewBreakpoints.jsx
│ ├── PreviewCode.jsx
│ ├── PreviewCopy.jsx
│ ├── PreviewDark.jsx
│ ├── PreviewIframe.jsx
│ ├── PreviewInteractive.jsx
│ ├── PreviewTitle.jsx
│ └── PreviewView.jsx
├── data/
│ ├── categories/
│ │ └── components.mdx
│ └── components/
│ ├── components-alerts.mdx
│ ├── components-badges.mdx
│ ├── components-buttons.mdx
│ ├── components-cards.mdx
│ ├── components-copy.mdx
│ ├── components-pricing.mdx
│ ├── components-prompt-containers.mdx
│ ├── components-prompt-history-panels.mdx
│ ├── components-prompt-inputs.mdx
│ ├── components-prompt-message-inputs.mdx
│ ├── components-prompt-messages.mdx
│ ├── components-prompt-suggestions.mdx
│ ├── components-prompts-cards.mdx
│ ├── components-sidebars.mdx
│ └── components-toggles.mdx
├── styles/
│ ├── components.css
│ ├── prism.css
│ ├── site.css
│ └── tailwind/
│ ├── components.config.js
│ ├── extend.preset.js
│ └── site.config.js
└── utils/
├── analyticsHelper.js
└── transformers.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.json
================================================
{
"extends": "next/core-web-vitals"
}
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
public/components.css
public/blogs.css
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# seo
public/sitemap.xml
public/robots.txt
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to LangUI
Thank you for considering contributing to LangUI! We appreciate your support in making this open-source Tailwind UI library even better for the AI community. Whether you want to fix a bug, add new components, or improve the documentation, your contributions are valuable to us.
To contribute to LangUI, please follow these guidelines:
## Getting Started
1. **Fork the Repository**: Start by forking the LangUI repository to your GitHub account. This will create a copy of the repository under your account, allowing you to make changes.
2. **Clone the Repository**: Clone the forked repository to your local machine using Git. Use the following command:
```bash
git clone https://github.com/ahmadbilaldev/LangUI.git
```
3. **Install Dependencies**: Ensure you have Node.js and npm installed. Run the following command in the project directory to install the required dependencies:
```bash
npm install
```
4. **Run the Server**: Run the local server using:
```bash
npm run dev
```
## Making changes
1. **Create a Branch**: Before making any changes, create a new branch where you will work on your contribution. Use a descriptive and relevant name for your branch:
```bash
git checkout -b your-branch-name
```
2. **Make Changes**: Implement your changes, whether it's adding new components, fixing bugs, or improving existing code. All LangUI components go in the `public/components` directory.
3. **Build your Component's CSS**: If you are building or making changes to a component, you will have to run the following command to build its CSS:
```bash
npm run css:components
```
4. **Test Your Changes**: Before submitting a pull request, ensure that your changes work as intended. Run tests if available and test the components in different viewports and modes.
5. **Commit and Push**: Once you are satisfied with your changes, commit them using descriptive commit messages.
## Submitting a Pull Request
1. **Create Pull Request**: Go to your forked repository on GitHub and click on the "New Pull Request" button. Compare your branch with the main branch of the original repository.
2. **Describe Your Changes**: Provide a clear and concise description of your changes in the pull request. Include any relevant information that helps reviewers understand your contribution.
3. **Review Process**: The maintainers of LangUI will review your pull request. Be prepared for feedback and make any necessary adjustments based on the review.
4. **Merge**: Once your pull request is approved, it will be merged into the main branch, and your changes will be part of LangUI!
## License
By contributing to LangUI, you agree that your contributions will be licensed under the [MIT License](LICENSE).
Thank you for contributing to LangUI! We greatly appreciate your efforts to make this library even more valuable to the AI community. If you have any questions or need assistance, feel free to open an issue or reach out to the maintainers.
Happy contributing! 😊
================================================
FILE: Dockerfile
================================================
# Use node:alpine3.17 image as the base image
FROM docker.io/node:alpine3.17
# Maintainer information
MAINTAINER tanwenyang@aliyun.com
# Copy the vue-color-avatar file from the local directory to the /app directory inside the container
COPY . /app
# Expose port 3000 of the container and allow external access to this port
EXPOSE 3000
# Change the working directory to /app
WORKDIR /app
# Set the Yarn registry to Taobao mirror and install dependencies using yarn install
RUN yarn config set registry 'https://registry.npm.taobao.org' && yarn install && yarn cache clean
# Run the command to start the container, which will run the project in development mode and listen on port 5173 of address 0.0.0.0
CMD yarn dev
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2023 Ahmad Bilal - GPT UI
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<div align="center">
<a href="https://www.LangUI.dev">
<img src="./public/logo.png" alt="LangUI Logo">
</a>
</div>
<h3 align="center">The perfect UI for your AI — Build & Deploy your own ChatGPT</h3>
<p align="center">
<a href="https://github.com/LangbaseInc/LangUI/stargazers">
<img src="https://img.shields.io/github/stars/LangbaseInc/langui?style=for-the-badge&label=%E2%98%85%20STAR%20US&color=%23000000" alt="GitHub Stars">
</a>
<a aria-label="License" href="https://github.com/LangbaseInc/langui/blob/main/LICENSE">
<img src="https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=%23000000" alt="License">
</a>
<a aria-label="Langbase logo" href="https://beta.langbase.com/">
<img src="https://img.shields.io/badge/DEPLOY%20ON-%E2%8C%98%20Langbase-000000.svg?style=for-the-badge&logo=%E2%8C%98%20Langbase&logoColor=000000">
</a>
</p>
<hr/>
Trusted by some of the world's largest companies, developers, and investors, [LangUI](https://www.LangUI.dev) is a set of beautifully designed components that you can copy and paste to build your own ChatGPT. Free. Customizable. Open Source.
[LangUI](https://www.LangUI.dev) is powered by Tailwind CSS with free components tailored for your AI and GPT projects. It offers a collection of beautiful, ready-to-use components to enhance the user interface of your AI applications, allowing you to focus on building the next best project while leaving the UI to LangUI.
> ⭐️ LangUI is Open Source and its 60+ components are completely free. Please star it to show your support!
## Documentation
For documentation and components, visit [LangUI.dev](https://www.langui.dev/).
## Get Started
- LangUI components are ready-to-use, meaning you don't need to install or configure anything.
- Browse [LangUI.dev](https://www.langui.dev/) and select a comopnent.
- Copy the desired component's code in HTML or JSX from the LangUI documentation.
- Paste the code into your project's HTML or React/Vue/Angular components. Done.
- **⌘ Deploy**: You can [deploy](https://beta.langbase.com/) your own ChatGPT built with LangUI on [Langbase.com by creating a chat pipe](https://langbase.com/docs/pipe/quickstart).
## Docker deploy
You can directly run using the image I have already built.
```sh
docker run -d -t -p 3000:3000 --name langui --restart=always docker.io/wenyang0/langui:latest
```
Or, you can manually compile it yourself if you prefer.
```sh
#clone the code
git clone https://github.com/ahmadbilaldev/langui.git
#docker build
cd langui/
docker build -t langui:v1 .
#start server
docker run -d -t -p 3000:3000 --name langui --restart=always langui:v1
```
Finally, open your browser and access the service's address at http://serverIP:3000
## Features
- **Copy & Paste Integration**: Zero installations or dependencies! Simply choose your desired component, copy, and paste it into your project.
- **Open Source & Free**: LangUI is MIT licensed, making it suitable for both personal and commercial projects. Feel free to contribute and support us by starring LangUI on GitHub.
- **Dark & Light Modes**: All LangUI components support light & dark modes and are carefully designed to look the best across both modes.
- **Fully Responsive**: LangUI components are responsive, ensuring they look fantastic on any screen size or device.
- **Easy Customization**: LangUI uses a two-color-only pallete. The two color pallete - slate and blue - allows for effortless customization into your brand's colors.
## Screenshots
## Request a component
Have an idea for a new component? We'd love to hear from you! Simply head over to our [GitHub repository](https://github.com/ahmadbilaldev/LangUI) and submit your component request. Let's collaborate and cook up something spicy together!
## Contributing
Contributions to LangUI are highly welcome! Whether it's bug fixes, new components, or improvements, we appreciate your support in making this library better for the AI community. Please read our [contribution guidelines](CONTRIBUTING.md) to get started.
## License
LangUI is licensed under the [MIT License](LICENSE).
## Uses
- [Shades of Purple Theme](https://shadesofpurple.pro/) by [Ahmad Awais](https://ahmadawais.com/) for syntax highlighting
- [Tabler Icons](https://tabler-icons.io/)
## Authored By
Originally authored by [Ahmad Bilal](https://github.com/ahmadbilaldev) – Founding Engineer at Langbase.
For questions, integrations, and other discussions, feel free to reach out.
<a href="https://github.com/ahmadbilaldev" target="_blank">
<img src=https://img.shields.io/badge/github-%2324292e.svg?&style=for-the-badge&logo=github&logoColor=white alt=github style="margin-bottom: 5px;" />
</a>
<a href="https://linkedin.com/in/ahmadbilaldev" target="_blank">
<img src=https://img.shields.io/badge/linkedin-%231E77B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white alt=linkedin style="margin-bottom: 5px;" />
</a>
---
Enjoy using LangUI to build stunning UIs for your AI and GPT projects.
🌟 If you find it helpful, don't forget to give it a star on GitHub! Stars are like little virtual hugs that keep us going! We appreciate every single one we receive.
For any queries or issues, feel free to open an [issue](https://github.com/ahmadbilaldev/LangUI/issues) on the repository.
Happy coding! 😊
================================================
FILE: app/[category]/[collection]/page.jsx
================================================
import matter from 'gray-matter'
import { join } from 'path'
import { promises as fs } from 'fs'
import { serialize } from 'next-mdx-remote/serialize'
import Container from '@component/Container'
import MdxRemoteRender from '@component/MdxRemoteRender'
import ComponentsList from '@/components/ComponentsList'
const mdxComponents = {
ComponentsList,
}
const componentsDirectory = join(process.cwd(), '/src/data/components')
export async function generateMetadata({ params }) {
const { collectionData } = await getCollection(params)
return {
title: `${collectionData.seo.title} | LangUI`,
description: collectionData.seo.description,
openGraph: {
title: `${collectionData.seo.title} | LangUI`,
description: collectionData.seo.description,
url: 'https://www.LangUI.dev/',
siteName: 'LangUI',
type: 'website',
image: 'https://www.LangUI.dev/og.png',
},
twitter: {
card: 'summary_large_image',
title: `${collectionData.seo.title} | LangUI`,
description: collectionData.seo.description,
},
}
}
export async function generateStaticParams() {
return await fs.readdir(componentsDirectory)
}
async function getCollection(params) {
const componentPath = join(
componentsDirectory,
`${params.category}-${params.collection}.mdx`
)
const postItem = await fs.readFile(componentPath, 'utf-8')
const { content, data: frontmatter } = matter(postItem)
const mdxSource = await serialize(content, {
mdxOptions: {
remarkPlugins: [],
rehypePlugins: [],
},
scope: frontmatter,
})
return {
collectionData: {
...frontmatter,
slug: params.collection,
},
collectionContent: mdxSource,
}
}
export default async function Page({ params }) {
const { collectionData, collectionContent } = await getCollection(params)
const componentsData = {
componentContainer: collectionData.container || '',
componentsData: Object.entries(collectionData.components).map(
([componentId, componentItem]) => {
return {
id: componentId,
title: componentItem.title,
slug: collectionData.slug,
category: collectionData.category,
container: componentItem.container || '',
creator: componentItem.creator || '',
dark: !!componentItem.dark,
interactive: !!componentItem.interactive,
}
}
),
}
return (
<Container classNames="px-4 max-w-screen-xl py-24 lg:py-32">
<div className="prose prose-h1:text-slate-200 prose-h1:mb-12 max-w-none">
<MdxRemoteRender
mdxSource={collectionContent}
mdxComponents={mdxComponents}
mdxScope={componentsData}
/>
</div>
</Container>
)
}
================================================
FILE: app/[category]/page.jsx
================================================
import matter from 'gray-matter'
import { join } from 'path'
import { promises as fs } from 'fs'
import HeroPattern from '@component/HeroPattern'
import HeroGradient from '@component/HeroGradient'
import BrandLogo from '@component/BrandLogo'
import CollectionGrid from '@component/CollectionGrid'
export async function generateMetadata({ params }) {
const { categoryData } = await getCategory(params)
return {
title: `AI Tailwind ${categoryData.title} | LangUI`,
description: categoryData.description,
openGraph: {
title: `AI Tailwind ${categoryData.title} | LangUI`,
description: categoryData.description,
url: 'https://www.LangUI.dev/',
siteName: 'LangUI',
type: 'website',
image: 'https://www.LangUI.dev/og.png',
},
twitter: {
card: 'summary_large_image',
title: `AI Tailwind ${categoryData.title} | LangUI`,
description: categoryData.description,
},
}
}
export async function generateStaticParams() {
return ['components']
}
async function getCategory(params) {
const componentsPath = join(process.cwd(), '/src/data/components')
const categoriesPath = join(process.cwd(), '/src/data/categories')
const categorySlug = params.category
const categoryPath = join(categoriesPath, `${categorySlug}.mdx`)
const componentSlugs = await fs.readdir(componentsPath)
const categoryItem = await fs.readFile(categoryPath, 'utf-8')
const { data: categoryData } = matter(categoryItem)
const componentItems = await Promise.all(
componentSlugs
.filter((componentSlug) => componentSlug.includes(categorySlug))
.map(async (componentSlug) => {
const componentPath = join(componentsPath, componentSlug)
const componentItem = await fs.readFile(componentPath, 'utf-8')
const { data: componentData } = matter(componentItem)
const componentSlugFormatted = componentSlug.replace('.mdx', '')
const componentSlugTrue = componentSlugFormatted.replace(
`${categorySlug}-`,
''
)
const componentCount = Object.values(componentData.components).length
return {
title: componentData.title,
slug: componentSlugTrue,
category: componentData.category,
emoji: componentData.emoji,
count: componentCount,
}
})
)
return {
categoryData,
componentItems,
}
}
export default async function Page({ params }) {
const { categoryData, componentItems } = await getCategory(params)
return (
<>
<section className="relative isolate overflow-hidden bg-slate-900">
<HeroGradient />
<HeroPattern />
<div className="mx-auto max-w-7xl px-6 py-24 sm:pb-32 lg:px-3 lg:py-32 xl:px-6">
<div className="flex-shrink-0 text-center lg:mx-auto lg:max-w-6xl lg:pt-8">
<BrandLogo withText={false} size={'16'} />
<h1 className="mx-auto mt-10 max-w-6xl bg-gradient-to-r from-gray-200/60 via-gray-200 to-gray-200/60 bg-clip-text text-center text-4xl font-bold tracking-tight text-transparent sm:text-5xl md:text-6xl">
<span className="underline decoration-blue-600">60+</span>{' '}
responsive and dark mode enabled components to build your AI LLM
apps.
</h1>
</div>
<div className="mt-10 sm:mt-20">
<CollectionGrid componentItems={componentItems} />
</div>
</div>
</section>
</>
)
}
================================================
FILE: app/api/search/route.js
================================================
import { NextResponse } from 'next/server'
import matter from 'gray-matter'
import { join } from 'path'
import { promises as fs } from 'fs'
async function getComponents() {
const componentsPath = join(process.cwd(), '/src/data/components')
const categoriesPath = join(process.cwd(), '/src/data/categories')
const categorySlugs = ['components']
const componentSlugs = await fs.readdir(componentsPath)
const componentsByCategory = await Promise.all(
categorySlugs.map(async (categorySlug) => {
const categoryPath = join(categoriesPath, `${categorySlug}.mdx`)
const categoryItem = await fs.readFile(categoryPath, 'utf-8')
const { data: categoryData } = matter(categoryItem)
const componentItems = await Promise.all(
componentSlugs
.filter((componentSlug) => componentSlug.includes(categorySlug))
.map(async (componentSlug) => {
const componentPath = join(componentsPath, componentSlug)
const componentItem = await fs.readFile(componentPath, 'utf-8')
const { data: componentData } = matter(componentItem)
const componentSlugFormatted = componentSlug.replace('.mdx', '')
const componentSlugTrue = componentSlugFormatted.replace(
`${categorySlug}-`,
''
)
const componentCount = Object.values(
componentData.components
).length
return {
id: componentSlugFormatted,
title: componentData.title,
slug: componentSlugTrue,
emoji: componentData.emoji,
count: componentCount,
category: {
title: categoryData.title,
slug: categorySlug,
emoji: categoryData.emoji,
},
}
})
)
return componentItems
})
)
return componentsByCategory.flatMap((componentItem) => componentItem)
}
export async function GET() {
const componentsData = await getComponents()
return NextResponse.json(componentsData)
}
================================================
FILE: app/layout.jsx
================================================
import 'prismjs/themes/prism-okaidia.css'
import '@style/site.css'
import { Poppins } from 'next/font/google'
import Footer from '@component/Footer'
import Header from '@component/Header'
import Banner from '@component/Banner'
import Analytics from '@/components/Analytics'
import { Analytics as VercelAnalytics } from '@vercel/analytics/react'
const poppins = Poppins({
variable: '--font-poppins',
display: 'swap',
subsets: ['latin'],
weight: ['400', '500', '700', '800', '900'],
})
export const metadata = {
title: 'UI for your AI | LangUI',
description:
'Open Source Tailwind CSS components for your AI and GPT projects.',
openGraph: {
title: 'UI for your AI | LangUI',
description:
'Open Source Tailwind CSS components for your AI and GPT projects.',
url: 'https://www.LangUI.dev/',
siteName: 'LangUI',
type: 'website',
images: ['https://www.LangUI.dev/og.png'],
},
twitter: {
card: 'summary_large_image',
title: 'UI for your AI | LangUI',
description:
'Open Source Tailwind CSS components for your AI and GPT projects.',
},
}
export default function RootLayout({ children }) {
return (
<html
className={`${poppins.variable} h-full scroll-smooth`}
lang="en"
dir="ltr"
>
<head>
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
</head>
<Analytics GA_MEASUREMENT_ID={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
<VercelAnalytics />
<body className="bg-slate-900 antialiased">
<Header />
<Banner />
<main>{children}</main>
<Footer />
</body>
</html>
)
}
================================================
FILE: app/page.jsx
================================================
import matter from 'gray-matter'
import { join } from 'path'
import { promises as fs } from 'fs'
import HeroBanner from '@component/HeroBanner'
async function getComponents() {
const componentsPath = join(process.cwd(), '/src/data/components')
const categoriesPath = join(process.cwd(), '/src/data/categories')
const categorySlugs = ['components']
const componentSlugs = await fs.readdir(componentsPath)
const componentsByCategory = await Promise.all(
categorySlugs.map(async (categorySlug) => {
const categoryPath = join(categoriesPath, `${categorySlug}.mdx`)
const categoryItem = await fs.readFile(categoryPath, 'utf-8')
const { data: categoryData } = matter(categoryItem)
const componentItems = await Promise.all(
componentSlugs
.filter((componentSlug) => componentSlug.includes(categorySlug))
.map(async (componentSlug) => {
const componentPath = join(componentsPath, componentSlug)
const componentItem = await fs.readFile(componentPath, 'utf-8')
const { data: componentData } = matter(componentItem)
const componentSlugFormatted = componentSlug.replace('.mdx', '')
const componentSlugTrue = componentSlugFormatted.replace(
`${componentData.category}-`,
''
)
const componentCount = Object.values(
componentData.components
).length
return {
title: componentData.title,
slug: componentSlugTrue,
category: componentData.category,
count: componentCount,
}
})
)
return {
categoryTitle: categoryData.title,
componentItems,
}
})
)
return componentsByCategory
}
export default async function Page() {
// TODO: If we have more than one categories in the future
// const componentsByCategory = await getComponents()
return <HeroBanner />
}
================================================
FILE: jsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@component/*": ["src/components/*"],
"@data/*": ["src/data/*"],
"@style/*": ["src/styles/*"],
"@util/*": ["src/utils/*"]
},
"plugins": [
{
"name": "next"
}
]
},
"include": ["next-env.d.js", "**/*.js", "**/*.jsx"],
"exclude": ["node_modules"]
}
================================================
FILE: next-env.d.js
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
================================================
FILE: next.config.js
================================================
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
experimental: {
appDir: true,
},
}
================================================
FILE: package.json
================================================
{
"name": "langui",
"version": "1.0.0",
"scripts": {
"build": "next build",
"start": "next start",
"dev": "next dev",
"lint": "next lint",
"css": "yarn css:components",
"css:components": "npx tailwindcss -i src/styles/components.css -o public/components.css -m",
"watch": "yarn css -w",
"postbuild": "yarn css && next-sitemap --config sitemap.config.js"
},
"dependencies": {
"@vercel/analytics": "^1.0.1",
"next": "^13.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.7",
"autoprefixer": "^10.4.12",
"eslint": "8.11.0",
"eslint-config-next": "^13.3.1",
"fast-glob": "^3.2.12",
"gray-matter": "^4.0.3",
"next-mdx-remote": "^4.0.0",
"next-sitemap": "^3.1.20",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"prismjs": "^1.27.0",
"react-intersection-observer": "^8.33.1",
"react-use": "^17.4.0",
"remark": "^14.0.2",
"remark-html": "^15.0.1",
"tailwindcss": "^3.3.1"
}
}
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: {
autoprefixer: {},
tailwindcss: {},
},
}
================================================
FILE: prettier.config.js
================================================
module.exports = {
semi: false,
tabWidth: 2,
useTabs: false,
singleQuote: true,
trailingComma: 'es5',
plugins: [require('prettier-plugin-tailwindcss')],
}
================================================
FILE: public/components/components-alerts/1-dark.html
================================================
<!-- Success -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 border-green-600 bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex items-start gap-4">
<div class="flex-1">
<strong class="block font-medium">Changes saved</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
Your API key have been added successfully.
</p>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Warning -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 border-amber-600 bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-4">
<div class="flex-1">
<strong class="block font-medium">Warning</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
You have only 200 tokens left in the account.
</p>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Error -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 border-red-600 bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-4">
<div class="flex-1">
<strong class="block font-medium">Error</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
The specified model was not found. Try another model.
</p>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
================================================
FILE: public/components/components-alerts/1.html
================================================
<!-- Success -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 border-green-600 bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex items-start gap-4">
<div class="flex-1">
<strong class="block font-medium">Changes saved</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
Your API key have been added successfully.
</p>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Warning -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 border-amber-600 bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-4">
<div class="flex-1">
<strong class="block font-medium">Warning</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
You have only 200 tokens left in the account.
</p>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Error -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 border-red-600 bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-4">
<div class="flex-1">
<strong class="block font-medium">Error</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
The specified model was not found. Try another model.
</p>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
================================================
FILE: public/components/components-alerts/2-dark.html
================================================
<!-- Success -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-2 text-green-500 sm:gap-4">
<span
><svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-circle-check"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
</span>
<div class="flex items-start gap-4">
<div class="flex-1">
<strong class="block font-medium">Changes saved</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-300">
Your API key have been added successfully.
</p>
</div>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Warning -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-2 text-amber-500 sm:gap-4">
<span
><svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-circle-check"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
<path d="M12 8v4"></path>
<path d="M12 16h.01"></path>
</svg>
</span>
<div class="flex items-start gap-4">
<div class="flex-1">
<strong class="block font-medium">Warning</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-300">
You have only 200 tokens left in the account.
</p>
</div>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Error -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-2 text-red-500 sm:gap-4">
<span
><svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-circle-check"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M10 10l4 4m0 -4l-4 4"></path>
</svg>
</span>
<div class="flex items-start gap-4">
<div class="flex-1">
<strong class="block font-medium">Error</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-300">
The specified model was not found. Try another model.
</p>
</div>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
================================================
FILE: public/components/components-alerts/2.html
================================================
<!-- Success -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-2 text-green-500 sm:gap-4">
<span
><svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-circle-check"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
</span>
<div class="flex items-start gap-4">
<div class="flex-1">
<strong class="block font-medium">Changes saved</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-300">
Your API key have been added successfully.
</p>
</div>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Warning -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-2 text-amber-500 sm:gap-4">
<span
><svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-circle-check"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
<path d="M12 8v4"></path>
<path d="M12 16h.01"></path>
</svg>
</span>
<div class="flex items-start gap-4">
<div class="flex-1">
<strong class="block font-medium">Warning</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-300">
You have only 200 tokens left in the account.
</p>
</div>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Error -->
<div
role="alert"
class="flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
<div class="flex gap-2 text-red-500 sm:gap-4">
<span
><svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-circle-check"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M10 10l4 4m0 -4l-4 4"></path>
</svg>
</span>
<div class="flex items-start gap-4">
<div class="flex-1">
<strong class="block font-medium">Error</strong>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-300">
The specified model was not found. Try another model.
</p>
</div>
</div>
</div>
<button
class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
>
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
================================================
FILE: public/components/components-badges/1-dark.html
================================================
<span
class="rounded-full bg-blue-600/20 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600 sm:text-sm"
>
Free Trial
</span>
================================================
FILE: public/components/components-badges/1.html
================================================
<span
class="rounded-full bg-blue-600/20 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
Free Trial
</span>
================================================
FILE: public/components/components-badges/2-dark.html
================================================
<div>
<span
class="inline-flex items-center gap-x-2 rounded-full bg-green-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-green-600"
>
<span class="inline-block h-1.5 w-1.5 rounded-full bg-green-600"></span>
Approved
</span>
</div>
<div>
<span
class="inline-flex items-center gap-x-2 rounded-full bg-amber-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-amber-600"
>
<span class="inline-block h-1.5 w-1.5 rounded-full bg-amber-600"></span>
Pending
</span>
</div>
<div>
<span
class="inline-flex items-center gap-x-2 rounded-full bg-blue-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-blue-600"
>
<span class="inline-block h-1.5 w-1.5 rounded-full bg-blue-600"></span>
In Progress
</span>
</div>
================================================
FILE: public/components/components-badges/2.html
================================================
<div>
<span
class="inline-flex items-center gap-x-2 rounded-full bg-green-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-green-600"
>
<span class="inline-block h-1.5 w-1.5 rounded-full bg-green-600"></span>
Approved
</span>
</div>
<div>
<span
class="inline-flex items-center gap-x-2 rounded-full bg-amber-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-amber-600"
>
<span class="inline-block h-1.5 w-1.5 rounded-full bg-amber-600"></span>
Pending
</span>
</div>
<div>
<span
class="inline-flex items-center gap-x-2 rounded-full bg-blue-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-blue-600"
>
<span class="inline-block h-1.5 w-1.5 rounded-full bg-blue-600"></span>
In Progress
</span>
</div>
================================================
FILE: public/components/components-badges/3-dark.html
================================================
<span
class="inline-flex items-center gap-x-1 rounded-full bg-green-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-green-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Success
</span>
================================================
FILE: public/components/components-badges/3.html
================================================
<span
class="inline-flex items-center gap-x-1 rounded-full bg-green-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-green-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Success
</span>
================================================
FILE: public/components/components-badges/4-dark.html
================================================
<span
class="inline-flex items-center gap-x-2 rounded-full bg-blue-600/20 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600 sm:text-sm"
>
Saved changes
<span
class="inline-flex min-w-[1.2rem] justify-center rounded-lg bg-blue-600 px-1 py-0.5 text-xs text-blue-200"
>22</span
>
</span>
================================================
FILE: public/components/components-badges/4.html
================================================
<div>
<span
class="inline-flex items-center gap-x-2 rounded-full bg-green-600/20 px-2.5 py-1 text-xs font-semibold leading-5 text-green-600 sm:text-sm"
>
Saved changes
<span
class="inline-flex min-w-[1.2rem] justify-center rounded-lg bg-green-600 px-1 py-0.5 text-xs text-green-950"
>22</span
>
</span>
</div>
================================================
FILE: public/components/components-badges/5-dark.html
================================================
<span
class="inline-flex items-center gap-x-1 rounded-full bg-blue-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-blue-600"
>
Summarize
<button class="hover:text-blue-800">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</span>
================================================
FILE: public/components/components-badges/5.html
================================================
<span
class="inline-flex items-center gap-x-1 rounded-full bg-blue-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-blue-600"
>
Summarize
<button class="hover:text-blue-800">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</span>
================================================
FILE: public/components/components-buttons/1-dark.html
================================================
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3 py-2 text-center text-sm font-medium text-slate-50 hover:bg-blue-800 focus:outline-none focus:ring focus:ring-blue-300"
>
Submit
</button>
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3.5 py-2.5 text-center text-sm font-medium text-slate-50 hover:bg-blue-800 focus:outline-none focus:ring focus:ring-blue-300"
>
Submit
</button>
================================================
FILE: public/components/components-buttons/1.html
================================================
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3 py-2 text-center text-sm font-medium text-slate-50 hover:bg-blue-800 focus:outline-none focus:ring focus:ring-blue-300"
>
Submit
</button>
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3.5 py-2.5 text-center text-sm font-medium text-slate-50 hover:bg-blue-800 focus:outline-none focus:ring focus:ring-blue-300"
>
Submit
</button>
================================================
FILE: public/components/components-buttons/2-dark.html
================================================
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-slate-700 px-3 py-2 text-center text-sm font-medium text-slate-50 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300"
>
Submit
</button>
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-slate-700 px-3.5 py-2.5 text-center text-sm font-medium text-slate-50 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300"
>
Submit
</button>
================================================
FILE: public/components/components-buttons/2.html
================================================
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-slate-700 px-3 py-2 text-center text-sm font-medium text-slate-50 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300"
>
Submit
</button>
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-slate-700 px-3.5 py-2.5 text-center text-sm font-medium text-slate-50 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300"
>
Submit
</button>
================================================
FILE: public/components/components-buttons/3-dark.html
================================================
<button
class="inline-flex items-center rounded-lg px-3 py-2 text-center text-sm font-semibold text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>
Buy plan
</button>
<button
class="inline-flex rounded-lg px-3.5 py-2.5 text-center text-sm font-semibold text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>
Buy plan
</button>
================================================
FILE: public/components/components-buttons/3.html
================================================
<button
class="inline-flex items-center rounded-lg px-3 py-2 text-center text-sm font-semibold text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>
Buy plan
</button>
<button
class="inline-flex rounded-lg px-3.5 py-2.5 text-center text-sm font-semibold text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>
Buy plan
</button>
================================================
FILE: public/components/components-buttons/4-dark.html
================================================
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3.5 py-2.5 text-center text-sm font-medium text-slate-50 hover:bg-blue-800 focus:outline-none focus:ring focus:ring-blue-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l5 5l10 -10"></path>
</svg>
Left
</button>
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3.5 py-2.5 text-center text-sm font-medium text-slate-50 hover:bg-blue-800 focus:outline-none focus:ring focus:ring-blue-300"
>
Right
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
================================================
FILE: public/components/components-buttons/4.html
================================================
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3.5 py-2.5 text-center text-sm font-medium text-slate-50 hover:bg-blue-800 focus:outline-none focus:ring focus:ring-blue-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l5 5l10 -10"></path>
</svg>
Left
</button>
<button
type="submit"
class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3.5 py-2.5 text-center text-sm font-medium text-slate-50 hover:bg-blue-800 focus:outline-none focus:ring focus:ring-blue-300"
>
Right
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
================================================
FILE: public/components/components-cards/1-dark.html
================================================
<div
class="w-full max-w-sm rounded-lg border border-slate-200 bg-white px-3 py-6 shadow dark:border-slate-700 dark:bg-slate-800"
>
<div class="flex items-center justify-between">
<div class="flex">
<div class="relative inline-flex">
<span
class="absolute bottom-0 right-0 h-3 w-3 rounded-full border bg-green-600 dark:border-slate-900 dark:bg-green-600 dark:text-slate-100"
></span>
<img
src="https://source.unsplash.com/40x40/?portrait"
alt="user"
class="h-10 w-10 rounded-full bg-slate-400 dark:border-slate-700"
/>
</div>
<div class="ml-4 flex flex-col gap-y-2">
<h3 class="text-sm font-bold text-slate-900 dark:text-slate-200">
John Doe
</h3>
<span class="text-xs text-slate-400">johndoe@gmail.com</span>
</div>
</div>
<span
class="rounded-full bg-green-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-green-600"
>
Free
</span>
</div>
<button
class="mt-6 w-full rounded-lg border border-slate-300 p-4 text-center text-sm font-medium text-slate-700 transition-colors duration-200 hover:bg-blue-600 hover:text-slate-50 focus:outline-none dark:border-slate-700 dark:text-slate-200"
type="button"
>
✨ Upgrade to Pro
</button>
</div>
================================================
FILE: public/components/components-cards/1.html
================================================
<div
class="w-full max-w-sm rounded-lg border border-slate-200 bg-white px-3 py-6 shadow dark:border-slate-700 dark:bg-slate-800"
>
<div class="flex items-center justify-between">
<div class="flex">
<div class="relative inline-flex">
<span
class="absolute bottom-0 right-0 h-3 w-3 rounded-full border bg-green-600 dark:border-slate-900 dark:bg-green-600 dark:text-slate-100"
></span>
<img
src="https://source.unsplash.com/40x40/?portrait"
alt="user"
class="h-10 w-10 rounded-full bg-slate-400 dark:border-slate-700"
/>
</div>
<div class="ml-4 flex flex-col gap-y-2">
<h3 class="text-sm font-bold text-slate-900 dark:text-slate-200">
John Doe
</h3>
<span class="text-xs text-slate-400">johndoe@gmail.com</span>
</div>
</div>
<span
class="rounded-full bg-green-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-green-600"
>
Free
</span>
</div>
<button
class="mt-6 w-full rounded-lg border border-slate-300 p-4 text-center text-sm font-medium text-slate-700 transition-colors duration-200 hover:bg-blue-600 hover:text-slate-50 focus:outline-none dark:border-slate-700 dark:text-slate-200"
type="button"
>
✨ Upgrade to Pro
</button>
</div>
================================================
FILE: public/components/components-cards/2-dark.html
================================================
<div
class="flex w-full max-w-md flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">Starter</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
</div>
================================================
FILE: public/components/components-cards/2.html
================================================
<div
class="flex w-full max-w-md flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">Starter</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
</div>
================================================
FILE: public/components/components-copy/1-dark.html
================================================
<button
type="button"
class="inline-flex cursor-pointer justify-center rounded-lg bg-slate-200 p-3 text-slate-800 transition-colors hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
</svg>
<span class="sr-only">Copy</span>
</button>
<!-- On Click -->
<button
type="button"
class="inline-flex cursor-pointer justify-center rounded-lg bg-slate-200 p-3 text-slate-800 dark:bg-blue-600 dark:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
<path d="M9 14l2 2l4 -4"></path>
</svg>
<span class="sr-only">Copy</span>
</button>
================================================
FILE: public/components/components-copy/1.html
================================================
<button
type="button"
class="inline-flex cursor-pointer justify-center rounded-lg bg-slate-200 p-3 text-slate-800 transition-colors hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
</svg>
<span class="sr-only">Copy</span>
</button>
<!-- On Click -->
<button
type="button"
class="inline-flex cursor-pointer justify-center rounded-lg bg-slate-200 p-3 text-slate-800 dark:bg-blue-600 dark:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
<path d="M9 14l2 2l4 -4"></path>
</svg>
<span class="sr-only">Copy</span>
</button>
================================================
FILE: public/components/components-copy/2-dark.html
================================================
<button
type="button"
class="inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg bg-slate-200 p-3 text-slate-800 transition-colors hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
</svg>
<span class="text-sm font-medium">Copy</span>
<span class="sr-only">Copy</span>
</button>
<!-- On Click -->
<button
type="button"
class="inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg bg-blue-600 p-3 text-slate-200 dark:bg-blue-600 dark:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
<path d="M9 14l2 2l4 -4"></path>
</svg>
<span class="text-sm font-medium">Copied!</span>
<span class="sr-only">Copy</span>
</button>
================================================
FILE: public/components/components-copy/2.html
================================================
<button
type="button"
class="inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg bg-slate-200 p-3 text-slate-800 transition-colors hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
</svg>
<span class="text-sm font-medium">Copy</span>
<span class="sr-only">Copy</span>
</button>
<!-- On Click -->
<button
type="button"
class="inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg bg-blue-600 p-3 text-slate-200 dark:bg-blue-600 dark:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
<path d="M9 14l2 2l4 -4"></path>
</svg>
<span class="text-sm font-medium">Copied!</span>
<span class="sr-only">Copy</span>
</button>
================================================
FILE: public/components/components-copy/3-dark.html
================================================
<button
type="button"
class="flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg bg-slate-200 p-3 text-slate-800 transition-colors hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
</svg>
<span class="text-sm font-medium">Copy</span>
<span class="sr-only">Copy</span>
</button>
<!-- On Click -->
<button
type="button"
class="flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg bg-blue-600 p-3 text-slate-200 dark:bg-blue-600 dark:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
<path d="M9 14l2 2l4 -4"></path>
</svg>
<span class="text-sm font-medium">Copied!</span>
<span class="sr-only">Copy</span>
</button>
================================================
FILE: public/components/components-copy/3.html
================================================
<button
type="button"
class="flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg bg-slate-200 p-3 text-slate-800 transition-colors hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
</svg>
<span class="text-sm font-medium">Copy</span>
<span class="sr-only">Copy</span>
</button>
<!-- On Click -->
<button
type="button"
class="flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg bg-blue-600 p-3 text-slate-200 dark:bg-blue-600 dark:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
></path>
<path
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
<path d="M9 14l2 2l4 -4"></path>
</svg>
<span class="text-sm font-medium">Copied!</span>
<span class="sr-only">Copy</span>
</button>
================================================
FILE: public/components/components-pricing/1-dark.html
================================================
<div class="bg-slate-200 py-4 dark:bg-slate-950">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2
class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-200 sm:text-5xl"
>
Pricing plans
</h2>
</div>
<div
class="isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 divide-slate-200 dark:divide-slate-200/10 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:divide-x"
>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 dark:bg-slate-900 dark:text-slate-200 lg:rounded-r-none xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">
Starter
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
<a
href=""
aria-describedby="tier-starter"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 dark:bg-slate-900 dark:text-slate-200 lg:z-10 lg:rounded-none xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg font-semibold leading-8">
Pro
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
🚀 Most popular
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$19.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5 chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Integrations
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Document support
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-pro"
class="mt-8 block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-50 shadow-sm hover:bg-blue-700"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 dark:bg-slate-900 dark:text-slate-200 lg:rounded-l-none xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg font-semibold leading-8">
Enterprise
</h3>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$29.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Train with websites or documents
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
API access
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
</div>
</div>
</div>
================================================
FILE: public/components/components-pricing/1.html
================================================
<div class="bg-slate-200 py-4 dark:bg-slate-950">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2
class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-200 sm:text-5xl"
>
Pricing plans
</h2>
</div>
<div
class="isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 divide-slate-200 dark:divide-slate-200/10 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:divide-x"
>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 dark:bg-slate-900 dark:text-slate-200 lg:rounded-r-none xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">
Starter
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
<a
href=""
aria-describedby="tier-starter"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 dark:bg-slate-900 dark:text-slate-200 lg:z-10 lg:rounded-none xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg font-semibold leading-8">
Pro
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
🚀 Most popular
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$19.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5 chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Integrations
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Document support
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-pro"
class="mt-8 block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-50 shadow-sm hover:bg-blue-700"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 dark:bg-slate-900 dark:text-slate-200 lg:rounded-l-none xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg font-semibold leading-8">
Enterprise
</h3>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$29.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Train with websites or documents
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
API access
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
</div>
</div>
</div>
================================================
FILE: public/components/components-pricing/2-dark.html
================================================
<div class="bg-slate-50 py-4 dark:bg-slate-900">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2
class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-200 sm:text-5xl"
>
Pricing plans
</h2>
</div>
<div
class="isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-4"
>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">
Starter
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
<a
href=""
aria-describedby="tier-starter"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 lg:z-10 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg font-semibold leading-8">
Pro
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
🚀 Most popular
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$19.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5 chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Integrations
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Document support
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-pro"
class="mt-8 block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-50 shadow-sm hover:bg-blue-700"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg font-semibold leading-8">
Enterprise
</h3>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$29.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Train with websites or documents
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
API access
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
</div>
</div>
</div>
================================================
FILE: public/components/components-pricing/2.html
================================================
<div class="bg-slate-50 py-4 dark:bg-slate-900">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2
class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-200 sm:text-5xl"
>
Pricing plans
</h2>
</div>
<div
class="isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-4"
>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">
Starter
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
<a
href=""
aria-describedby="tier-starter"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 lg:z-10 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg font-semibold leading-8">
Pro
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
🚀 Most popular
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$19.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5 chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Integrations
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Document support
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-pro"
class="mt-8 block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-50 shadow-sm hover:bg-blue-700"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg font-semibold leading-8">
Enterprise
</h3>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$29.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Train with websites or documents
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
API access
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
</div>
</div>
</div>
================================================
FILE: public/components/components-pricing/3-dark.html
================================================
<div class="bg-slate-50 py-4 dark:bg-slate-900">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2
class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-200 sm:text-5xl"
>
Pricing plans
</h2>
<div class="mt-16 flex justify-center">
<div
class="rounded-full border border-slate-300 p-1 dark:border-slate-300/20"
>
<div class="flex text-xs font-semibold leading-5">
<button
class="w-auto rounded-full bg-blue-600 px-3 py-1 text-slate-200 focus:outline-none"
>
Monthly
</button>
<button
class="rounded-full px-3 py-1 text-slate-800 focus:outline-none dark:text-slate-200"
>
Yearly
</button>
</div>
</div>
</div>
</div>
<div
class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-4"
>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">
Starter
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
<a
href=""
aria-describedby="tier-starter"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 lg:z-10 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg font-semibold leading-8">
Pro
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
🚀 Most popular
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$19.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5 chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Integrations
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Document support
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-pro"
class="mt-8 block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-50 shadow-sm hover:bg-blue-700"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg font-semibold leading-8">
Enterprise
</h3>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$29.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Train with websites or documents
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
API access
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
</div>
</div>
</div>
================================================
FILE: public/components/components-pricing/3.html
================================================
<div class="bg-slate-50 py-4 dark:bg-slate-900">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2
class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-200 sm:text-5xl"
>
Pricing plans
</h2>
<div class="mt-16 flex justify-center">
<div
class="rounded-full border border-slate-300 p-1 dark:border-slate-300/20"
>
<div class="flex text-xs font-semibold leading-5">
<button
class="w-auto rounded-full bg-blue-600 px-3 py-1 text-slate-200 focus:outline-none"
>
Monthly
</button>
<button
class="rounded-full px-3 py-1 text-slate-800 focus:outline-none dark:text-slate-200"
>
Yearly
</button>
</div>
</div>
</div>
</div>
<div
class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-4"
>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">
Starter
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
<a
href=""
aria-describedby="tier-starter"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 lg:z-10 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg font-semibold leading-8">
Pro
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
🚀 Most popular
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$19.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5 chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Integrations
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Document support
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-pro"
class="mt-8 block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-50 shadow-sm hover:bg-blue-700"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg font-semibold leading-8">
Enterprise
</h3>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$29.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Train with websites or documents
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
API access
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
</div>
</div>
</div>
================================================
FILE: public/components/components-pricing/4-dark.html
================================================
<div class="bg-slate-50 py-4 dark:bg-slate-900">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2
class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-200 sm:text-5xl"
>
Pricing plans
</h2>
<!-- Toggle -->
<div class="mt-16 flex justify-center">
<div
class="rounded-full border border-slate-300 p-1 dark:border-slate-300/20"
>
<div class="flex text-xs font-semibold leading-5">
<button
class="w-auto rounded-full bg-blue-600 px-3 py-1 text-slate-200 focus:outline-none"
>
Monthly
</button>
<button
class="rounded-full px-3 py-1 text-slate-800 focus:outline-none dark:text-slate-200"
>
Yearly
</button>
</div>
</div>
</div>
</div>
<div
class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-4"
>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 lg:mt-8 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">
Starter
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
<a
href=""
aria-describedby="tier-starter"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-2 ring-blue-600 dark:bg-slate-900 dark:text-slate-200 lg:z-10 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg font-semibold leading-8">
Pro
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
🚀 Most popular
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$19.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5 chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Integrations
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Document support
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-pro"
class="mt-8 block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-50 shadow-sm hover:bg-blue-700"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 lg:mt-8 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg font-semibold leading-8">
Enterprise
</h3>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$29.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Train with websites or documents
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
API access
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
</div>
</div>
</div>
================================================
FILE: public/components/components-pricing/4.html
================================================
<div class="bg-slate-50 py-4 dark:bg-slate-900">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2
class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-200 sm:text-5xl"
>
Pricing plans
</h2>
<!-- Toggle -->
<div class="mt-16 flex justify-center">
<div
class="rounded-full border border-slate-300 p-1 dark:border-slate-300/20"
>
<div class="flex text-xs font-semibold leading-5">
<button
class="w-auto rounded-full bg-blue-600 px-3 py-1 text-slate-200 focus:outline-none"
>
Monthly
</button>
<button
class="rounded-full px-3 py-1 text-slate-800 focus:outline-none dark:text-slate-200"
>
Yearly
</button>
</div>
</div>
</div>
</div>
<div
class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-4"
>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 lg:mt-8 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-starter" class="text-lg font-semibold leading-8">
Starter
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
✨ Free trial
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$9.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
7-day free trial
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
1 chatbot
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20 stored chats
</li>
</ul>
</div>
<a
href=""
aria-describedby="tier-starter"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-2 ring-blue-600 dark:bg-slate-900 dark:text-slate-200 lg:z-10 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg font-semibold leading-8">
Pro
</h3>
<p
class="rounded-full bg-blue-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600"
>
🚀 Most popular
</p>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$19.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
5 chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Integrations
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Document support
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-pro"
class="mt-8 block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-50 shadow-sm hover:bg-blue-700"
>Buy plan</a
>
</div>
<div
class="flex flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate-300 dark:bg-slate-900 dark:text-slate-200 dark:ring-slate-300/20 lg:mt-8 xl:p-10"
>
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg font-semibold leading-8">
Enterprise
</h3>
</div>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-bold tracking-tight">$29.99</span>
<span
class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-400"
>/month</span
>
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-slate-700 dark:text-slate-400"
>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
20,000 tokens per month
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited chatbots
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Unlimited stored chats
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
Train with websites or documents
</li>
<li class="flex gap-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-5 flex-none text-blue-600"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
API access
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 text-blue-600 ring-1 ring-inset ring-blue-600 hover:bg-blue-600 hover:text-blue-50"
>Buy plan</a
>
</div>
</div>
</div>
</div>
================================================
FILE: public/components/components-prompt-containers/1-dark.html
================================================
<!-- Prompt Messages Container - Modify the height according to your need -->
<div class="flex h-[97vh] w-full flex-col">
<!-- Prompt Messages -->
<div
class="flex-1 overflow-y-auto bg-slate-300 text-sm leading-6 text-slate-900 shadow-md dark:bg-slate-800 dark:text-slate-300 sm:text-base sm:leading-7"
>
<div class="flex flex-row px-4 py-8 sm:px-6">
<img
class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
src="https://dummyimage.com/256x256/363536/ffffff&text=U"
/>
<div class="flex max-w-3xl items-center">
<p>Explain quantum computing in simple terms</p>
</div>
</div>
<div class="flex bg-slate-100 px-4 py-8 dark:bg-slate-900 sm:px-6">
<img
class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
src="https://dummyimage.com/256x256/354ea1/ffffff&text=G"
/>
<div
class="flex w-full flex-col items-start lg:flex-row lg:justify-between"
>
<p class="max-w-3xl">
Certainly! Quantum computing is a new type of computing that relies on
the principles of quantum physics. Traditional computers, like the one
you might be using right now, use bits to store and process
information. These bits can represent either a 0 or a 1. In contrast,
quantum computers use quantum bits, or qubits.<br /><br />
Unlike bits, qubits can represent not only a 0 or a 1 but also a
superposition of both states simultaneously. This means that a qubit
can be in multiple states at once, which allows quantum computers to
perform certain calculations much faster and more efficiently.
</p>
<div
class="mt-4 flex flex-row justify-start gap-x-2 text-slate-500 lg:mt-0"
>
<button class="hover:text-blue-600">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"
></path>
</svg>
</button>
<button class="hover:text-blue-600" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"
></path>
</svg>
</button>
<button class="hover:text-blue-600" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
></path>
<path
d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="flex px-4 py-8 sm:px-6">
<img
class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
src="https://dummyimage.com/256x256/363536/ffffff&text=U"
/>
<div class="flex max-w-3xl items-center">
<p>What are three great applications of quantum computing?</p>
</div>
</div>
<div class="flex bg-slate-100 px-4 py-8 dark:bg-slate-900 sm:px-6">
<img
class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
src="https://dummyimage.com/256x256/354ea1/ffffff&text=G"
/>
<div
class="flex w-full flex-col items-start lg:flex-row lg:justify-between"
>
<p class="max-w-3xl">
Three great applications of quantum computing are: Optimization of
complex problems, Drug Discovery and Cryptography.
</p>
<div class="mt-4 flex flex-row gap-x-2 text-slate-500 lg:mt-0">
<button class="hover:text-blue-600">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"
></path>
</svg>
</button>
<button class="hover:text-blue-600" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"
></path>
</svg>
</button>
<button class="hover:text-blue-600" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
></path>
<path
d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Prompt message input -->
<form
class="flex w-full items-center rounded-b-md border-t border-slate-300 bg-slate-200 p-2 dark:border-slate-700 dark:bg-slate-900"
>
<label for="chat" class="sr-only">Enter your prompt</label>
<div>
<button
class="hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-600 sm:p-2"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
aria-hidden="true"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5l0 14"></path>
<path d="M5 12l14 0"></path>
</svg>
<span class="sr-only">Add</span>
</button>
</div>
<textarea
id="chat-input"
rows="1"
class="mx-2 flex min-h-full w-full rounded-md border border-slate-300 bg-slate-50 p-2 text-base text-slate-900 placeholder-slate-400 focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-50 dark:placeholder-slate-400 dark:focus:border-blue-600 dark:focus:ring-blue-600"
placeholder="Enter your prompt"
></textarea>
<div>
<button
class="inline-flex hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-600 sm:p-2"
type="submit"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
aria-hidden="true"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 14l11 -11"></path>
<path
d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"
></path>
</svg>
<span class="sr-only">Send message</span>
</button>
</div>
</form>
</div>
================================================
FILE: public/components/components-prompt-containers/1.html
================================================
<!-- Prompt Messages Container - Modify the height according to your need -->
<div class="flex h-[97vh] w-full flex-col">
<!-- Prompt Messages -->
<div
class="flex-1 overflow-y-auto bg-slate-300 text-sm leading-6 text-slate-900 shadow-md dark:bg-slate-800 dark:text-slate-300 sm:text-base sm:leading-7"
>
<div class="flex flex-row px-4 py-8 sm:px-6">
<img
class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
src="https://dummyimage.com/256x256/363536/ffffff&text=U"
/>
<div class="flex max-w-3xl items-center">
<p>Explain quantum computing in simple terms</p>
</div>
</div>
<div class="flex bg-slate-100 px-4 py-8 dark:bg-slate-900 sm:px-6">
<img
class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
src="https://dummyimage.com/256x256/354ea1/ffffff&text=G"
/>
<div
class="flex w-full flex-col items-start lg:flex-row lg:justify-between"
>
<p class="max-w-3xl">
Certainly! Quantum computing is a new type of computing that relies on
the principles of quantum physics. Traditional computers, like the one
you might be using right now, use bits to store and process
information. These bits can represent either a 0 or a 1. In contrast,
quantum computers use quantum bits, or qubits.<br /><br />
Unlike bits, qubits can represent not only a 0 or a 1 but also a
superposition of both states simultaneously. This means that a qubit
can be in multiple states at once, which allows quantum computers to
perform certain calculations much faster and more efficiently.
</p>
<div
class="mt-4 flex flex-row justify-start gap-x-2 text-slate-500 lg:mt-0"
>
<button class="hover:text-blue-600">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
gitextract_rjyvzjwn/
├── .eslintrc.json
├── .gitignore
├── CONTRIBUTING.md
├── Dockerfile
├── LICENSE
├── README.md
├── app/
│ ├── [category]/
│ │ ├── [collection]/
│ │ │ └── page.jsx
│ │ └── page.jsx
│ ├── api/
│ │ └── search/
│ │ └── route.js
│ ├── layout.jsx
│ └── page.jsx
├── jsconfig.json
├── next-env.d.js
├── next.config.js
├── package.json
├── postcss.config.js
├── prettier.config.js
├── public/
│ ├── components/
│ │ ├── components-alerts/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ └── 2.html
│ │ ├── components-badges/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ ├── 4.html
│ │ │ ├── 5-dark.html
│ │ │ └── 5.html
│ │ ├── components-buttons/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ ├── components-cards/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ └── 2.html
│ │ ├── components-copy/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ └── 3.html
│ │ ├── components-pricing/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ ├── components-prompt-containers/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ ├── components-prompt-history-panels/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ └── 3.html
│ │ ├── components-prompt-inputs/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ ├── 4.html
│ │ │ ├── 5-dark.html
│ │ │ ├── 5.html
│ │ │ ├── 6-dark.html
│ │ │ └── 6.html
│ │ ├── components-prompt-message-inputs/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ ├── 4.html
│ │ │ ├── 5-dark.html
│ │ │ ├── 5.html
│ │ │ ├── 6-dark.html
│ │ │ ├── 6.html
│ │ │ ├── 7-dark.html
│ │ │ └── 7.html
│ │ ├── components-prompt-messages/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ └── 3.html
│ │ ├── components-prompt-suggestions/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ └── 3.html
│ │ ├── components-prompts-cards/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ ├── components-sidebars/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ └── 4.html
│ │ └── components-toggles/
│ │ ├── 1-dark.html
│ │ ├── 1.html
│ │ ├── 2-dark.html
│ │ └── 2.html
│ └── iframe.js
├── sitemap.config.js
└── src/
├── components/
│ ├── Analytics.jsx
│ ├── Banner.jsx
│ ├── BrandLogo.jsx
│ ├── ButtonGithubStars.jsx
│ ├── ButtonStyle.jsx
│ ├── CollectionCard.jsx
│ ├── CollectionGrid.jsx
│ ├── CollectionIcons.jsx
│ ├── CollectionLinks.jsx
│ ├── ComponentPreview.jsx
│ ├── ComponentsList.jsx
│ ├── Container.jsx
│ ├── Footer.jsx
│ ├── Header.jsx
│ ├── HeaderMenu.jsx
│ ├── HeaderMenuLinks.jsx
│ ├── HeaderSearch.jsx
│ ├── HeroBadge.jsx
│ ├── HeroBanner.jsx
│ ├── HeroComponentsPreview.jsx
│ ├── HeroFeatures.jsx
│ ├── HeroGradient.jsx
│ ├── HeroPattern.jsx
│ ├── IconClose.jsx
│ ├── IconGithub.jsx
│ ├── IconMenu.jsx
│ ├── IconTwitter.jsx
│ ├── MdxRemoteRender.jsx
│ ├── PreviewBreakpoints.jsx
│ ├── PreviewCode.jsx
│ ├── PreviewCopy.jsx
│ ├── PreviewDark.jsx
│ ├── PreviewIframe.jsx
│ ├── PreviewInteractive.jsx
│ ├── PreviewTitle.jsx
│ └── PreviewView.jsx
├── data/
│ ├── categories/
│ │ └── components.mdx
│ └── components/
│ ├── components-alerts.mdx
│ ├── components-badges.mdx
│ ├── components-buttons.mdx
│ ├── components-cards.mdx
│ ├── components-copy.mdx
│ ├── components-pricing.mdx
│ ├── components-prompt-containers.mdx
│ ├── components-prompt-history-panels.mdx
│ ├── components-prompt-inputs.mdx
│ ├── components-prompt-message-inputs.mdx
│ ├── components-prompt-messages.mdx
│ ├── components-prompt-suggestions.mdx
│ ├── components-prompts-cards.mdx
│ ├── components-sidebars.mdx
│ └── components-toggles.mdx
├── styles/
│ ├── components.css
│ ├── prism.css
│ ├── site.css
│ └── tailwind/
│ ├── components.config.js
│ ├── extend.preset.js
│ └── site.config.js
└── utils/
├── analyticsHelper.js
└── transformers.js
SYMBOL INDEX (53 symbols across 41 files)
FILE: app/[category]/[collection]/page.jsx
function generateMetadata (line 16) | async function generateMetadata({ params }) {
function generateStaticParams (line 38) | async function generateStaticParams() {
function getCollection (line 42) | async function getCollection(params) {
function Page (line 69) | async function Page({ params }) {
FILE: app/[category]/page.jsx
function generateMetadata (line 9) | async function generateMetadata({ params }) {
function generateStaticParams (line 31) | async function generateStaticParams() {
function getCategory (line 35) | async function getCategory(params) {
function Page (line 79) | async function Page({ params }) {
FILE: app/api/search/route.js
function getComponents (line 6) | async function getComponents() {
function GET (line 60) | async function GET() {
FILE: app/layout.jsx
function RootLayout (line 38) | function RootLayout({ children }) {
FILE: app/page.jsx
function getComponents (line 6) | async function getComponents() {
function Page (line 57) | async function Page() {
FILE: src/components/Analytics.jsx
function GoogleAnalytics (line 8) | function GoogleAnalytics(GA_MEASUREMENT_ID) {
FILE: src/components/Banner.jsx
function Banner (line 5) | function Banner() {
FILE: src/components/BrandLogo.jsx
function BrandLogo (line 3) | function BrandLogo({
FILE: src/components/ButtonGithubStars.jsx
function ButtonGithubStars (line 17) | function ButtonGithubStars() {
FILE: src/components/ButtonStyle.jsx
function ButtonStyle (line 1) | function ButtonStyle({ buttonIcon, buttonText, buttonActive }) {
FILE: src/components/CollectionCard.jsx
function CollectionCard (line 4) | function CollectionCard({ componentData }) {
FILE: src/components/CollectionGrid.jsx
function CollectionGrid (line 3) | function CollectionGrid({ componentItems }) {
FILE: src/components/CollectionLinks.jsx
function getComponents (line 9) | async function getComponents() {
function CollectionLinks (line 62) | async function CollectionLinks() {
FILE: src/components/ComponentPreview.jsx
function ComponentPreview (line 15) | function ComponentPreview({
FILE: src/components/ComponentsList.jsx
function ComponentsList (line 5) | function ComponentsList({ componentsData, componentContainer }) {
FILE: src/components/Container.jsx
function Container (line 1) | function Container({ children, classNames }) {
FILE: src/components/Footer.jsx
function Footer (line 5) | function Footer() {
FILE: src/components/Header.jsx
function Header (line 16) | function Header() {
function GithubLink (line 73) | function GithubLink() {
FILE: src/components/HeaderMenu.jsx
function HeaderMenu (line 4) | function HeaderMenu({ showMenu, handleSetShowMenu, menuLinks }) {
FILE: src/components/HeaderMenuLinks.jsx
function HeaderMenuLinks (line 3) | function HeaderMenuLinks({ menuLinks, navClass, ulClass }) {
FILE: src/components/HeaderSearch.jsx
function HeaderSearch (line 9) | function HeaderSearch() {
FILE: src/components/HeroBadge.jsx
function HeroBadge (line 1) | function HeroBadge({ children }) {
FILE: src/components/HeroBanner.jsx
function HeroBanner (line 10) | function HeroBanner({ children, subtitle, title }) {
FILE: src/components/HeroComponentsPreview.jsx
function HeroComponentsPreview (line 6) | function HeroComponentsPreview() {
FILE: src/components/HeroFeatures.jsx
function HeroFeatures (line 4) | function HeroFeatures() {
FILE: src/components/HeroGradient.jsx
function HeroGradient (line 1) | function HeroGradient({ position = 'top-10' }) {
FILE: src/components/HeroPattern.jsx
function HeroPattern (line 1) | function HeroPattern() {
FILE: src/components/IconClose.jsx
function IconClose (line 1) | function IconClose() {
FILE: src/components/IconGithub.jsx
function IconGithub (line 1) | function IconGithub({ size = '5' }) {
FILE: src/components/IconMenu.jsx
function IconMenu (line 1) | function IconMenu() {
FILE: src/components/IconTwitter.jsx
function IconGithub (line 1) | function IconGithub() {
FILE: src/components/MdxRemoteRender.jsx
function MdxContent (line 5) | function MdxContent({
FILE: src/components/PreviewBreakpoints.jsx
function PreviewBreakpoint (line 3) | function PreviewBreakpoint({
FILE: src/components/PreviewCode.jsx
function PreviewCode (line 6) | function PreviewCode({
FILE: src/components/PreviewCopy.jsx
function PreviewCopy (line 7) | function PreviewCopy({ componentCode = '' }) {
FILE: src/components/PreviewDark.jsx
function PreviewDark (line 1) | function PreviewDark({ isDarkMode, handleSetIsDarkMode }) {
FILE: src/components/PreviewIframe.jsx
function PreviewIframe (line 1) | function PreviewIframe({
FILE: src/components/PreviewInteractive.jsx
function PreviewInteractive (line 3) | function PreviewInteractive({
FILE: src/components/PreviewTitle.jsx
function PreviewTitle (line 1) | function PreviewTitle({ componentTitle, componentHash }) {
FILE: src/components/PreviewView.jsx
function PreviewView (line 3) | function PreviewView({ showPreview, handleSetShowPreview }) {
FILE: src/utils/transformers.js
function componentPreviewHtml (line 1) | function componentPreviewHtml(
function componentPreviewJsx (line 24) | function componentPreviewJsx(componentHtml) {
function blogPreviewHtml (line 52) | function blogPreviewHtml(
Condensed preview — 191 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (634K chars).
[
{
"path": ".eslintrc.json",
"chars": 40,
"preview": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": ".gitignore",
"chars": 469,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "CONTRIBUTING.md",
"chars": 3063,
"preview": "# Contributing to LangUI\n\nThank you for considering contributing to LangUI! We appreciate your support in making this op"
},
{
"path": "Dockerfile",
"chars": 722,
"preview": "# Use node:alpine3.17 image as the base image\nFROM docker.io/node:alpine3.17\n\n# Maintainer information\nMAINTAINER tanwen"
},
{
"path": "LICENSE",
"chars": 1077,
"preview": "MIT License\n\nCopyright (c) 2023 Ahmad Bilal - GPT UI\n\nPermission is hereby granted, free of charge, to any person obtain"
},
{
"path": "README.md",
"chars": 5453,
"preview": "<div align=\"center\">\n <a href=\"https://www.LangUI.dev\">\n <img src=\"./public/logo.png\" alt=\"LangUI Logo\">\n </a>\n</di"
},
{
"path": "app/[category]/[collection]/page.jsx",
"chars": 2780,
"preview": "import matter from 'gray-matter'\nimport { join } from 'path'\nimport { promises as fs } from 'fs'\nimport { serialize } fr"
},
{
"path": "app/[category]/page.jsx",
"chars": 3497,
"preview": "import matter from 'gray-matter'\nimport { join } from 'path'\nimport { promises as fs } from 'fs'\nimport HeroPattern from"
},
{
"path": "app/api/search/route.js",
"chars": 2095,
"preview": "import { NextResponse } from 'next/server'\nimport matter from 'gray-matter'\nimport { join } from 'path'\nimport { promise"
},
{
"path": "app/layout.jsx",
"chars": 1699,
"preview": "import 'prismjs/themes/prism-okaidia.css'\nimport '@style/site.css'\nimport { Poppins } from 'next/font/google'\nimport Foo"
},
{
"path": "app/page.jsx",
"chars": 1988,
"preview": "import matter from 'gray-matter'\nimport { join } from 'path'\nimport { promises as fs } from 'fs'\nimport HeroBanner from "
},
{
"path": "jsconfig.json",
"chars": 412,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"src/*\"],\n \"@compone"
},
{
"path": "next-env.d.js",
"chars": 267,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n/// <reference types=\"next/navigation-t"
},
{
"path": "next.config.js",
"chars": 128,
"preview": "/** @type {import('next').NextConfig} */\nmodule.exports = {\n reactStrictMode: true,\n experimental: {\n appDir: true,"
},
{
"path": "package.json",
"chars": 1132,
"preview": "{\n \"name\": \"langui\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"de"
},
{
"path": "postcss.config.js",
"chars": 82,
"preview": "module.exports = {\n plugins: {\n autoprefixer: {},\n tailwindcss: {},\n },\n}\n"
},
{
"path": "prettier.config.js",
"chars": 167,
"preview": "module.exports = {\n semi: false,\n tabWidth: 2,\n useTabs: false,\n singleQuote: true,\n trailingComma: 'es5',\n plugin"
},
{
"path": "public/components/components-alerts/1-dark.html",
"chars": 2909,
"preview": "<!-- Success -->\n<div\n role=\"alert\"\n class=\"flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 b"
},
{
"path": "public/components/components-alerts/1.html",
"chars": 2909,
"preview": "<!-- Success -->\n<div\n role=\"alert\"\n class=\"flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 b"
},
{
"path": "public/components/components-alerts/2-dark.html",
"chars": 4712,
"preview": "<!-- Success -->\n<div\n role=\"alert\"\n class=\"flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-"
},
{
"path": "public/components/components-alerts/2.html",
"chars": 4712,
"preview": "<!-- Success -->\n<div\n role=\"alert\"\n class=\"flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-"
},
{
"path": "public/components/components-badges/1-dark.html",
"chars": 136,
"preview": "<span\n class=\"rounded-full bg-blue-600/20 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600 sm:text-sm\"\n>\n Fre"
},
{
"path": "public/components/components-badges/1.html",
"chars": 125,
"preview": "<span\n class=\"rounded-full bg-blue-600/20 px-2.5 py-1 text-xs font-semibold leading-5 text-blue-600\"\n>\n Free Trial\n</s"
},
{
"path": "public/components/components-badges/2-dark.html",
"chars": 773,
"preview": "<div>\n <span\n class=\"inline-flex items-center gap-x-2 rounded-full bg-green-600/20 px-2.5 py-1 text-sm font-semibold"
},
{
"path": "public/components/components-badges/2.html",
"chars": 773,
"preview": "<div>\n <span\n class=\"inline-flex items-center gap-x-2 rounded-full bg-green-600/20 px-2.5 py-1 text-sm font-semibold"
},
{
"path": "public/components/components-badges/3-dark.html",
"chars": 542,
"preview": "<span\n class=\"inline-flex items-center gap-x-1 rounded-full bg-green-600/20 px-2.5 py-1 text-sm font-semibold leading-5"
},
{
"path": "public/components/components-badges/3.html",
"chars": 542,
"preview": "<span\n class=\"inline-flex items-center gap-x-1 rounded-full bg-green-600/20 px-2.5 py-1 text-sm font-semibold leading-5"
},
{
"path": "public/components/components-badges/4-dark.html",
"chars": 309,
"preview": "<span\n class=\"inline-flex items-center gap-x-2 rounded-full bg-blue-600/20 px-2.5 py-1 text-xs font-semibold leading-5 "
},
{
"path": "public/components/components-badges/4.html",
"chars": 344,
"preview": "<div>\n <span\n class=\"inline-flex items-center gap-x-2 rounded-full bg-green-600/20 px-2.5 py-1 text-xs font-semibold"
},
{
"path": "public/components/components-badges/5-dark.html",
"chars": 587,
"preview": "<span\n class=\"inline-flex items-center gap-x-1 rounded-full bg-blue-600/20 px-2.5 py-1 text-sm font-semibold leading-5 "
},
{
"path": "public/components/components-badges/5.html",
"chars": 587,
"preview": "<span\n class=\"inline-flex items-center gap-x-1 rounded-full bg-blue-600/20 px-2.5 py-1 text-sm font-semibold leading-5 "
},
{
"path": "public/components/components-buttons/1-dark.html",
"chars": 475,
"preview": "<button\n type=\"submit\"\n class=\"inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3 py-2 text-center text-sm f"
},
{
"path": "public/components/components-buttons/1.html",
"chars": 475,
"preview": "<button\n type=\"submit\"\n class=\"inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3 py-2 text-center text-sm f"
},
{
"path": "public/components/components-buttons/2-dark.html",
"chars": 477,
"preview": "<button\n type=\"submit\"\n class=\"inline-flex items-center gap-x-2 rounded-lg bg-slate-700 px-3 py-2 text-center text-sm "
},
{
"path": "public/components/components-buttons/2.html",
"chars": 477,
"preview": "<button\n type=\"submit\"\n class=\"inline-flex items-center gap-x-2 rounded-lg bg-slate-700 px-3 py-2 text-center text-sm "
},
{
"path": "public/components/components-buttons/3-dark.html",
"chars": 400,
"preview": "<button\n class=\"inline-flex items-center rounded-lg px-3 py-2 text-center text-sm font-semibold text-blue-600 ring-1 ri"
},
{
"path": "public/components/components-buttons/3.html",
"chars": 400,
"preview": "<button\n class=\"inline-flex items-center rounded-lg px-3 py-2 text-center text-sm font-semibold text-blue-600 ring-1 ri"
},
{
"path": "public/components/components-buttons/4-dark.html",
"chars": 1149,
"preview": "<button\n type=\"submit\"\n class=\"inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3.5 py-2.5 text-center text-"
},
{
"path": "public/components/components-buttons/4.html",
"chars": 1149,
"preview": "<button\n type=\"submit\"\n class=\"inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-3.5 py-2.5 text-center text-"
},
{
"path": "public/components/components-cards/1-dark.html",
"chars": 1328,
"preview": "<div\n class=\"w-full max-w-sm rounded-lg border border-slate-200 bg-white px-3 py-6 shadow dark:border-slate-700 dark:bg"
},
{
"path": "public/components/components-cards/1.html",
"chars": 1328,
"preview": "<div\n class=\"w-full max-w-sm rounded-lg border border-slate-200 bg-white px-3 py-6 shadow dark:border-slate-700 dark:bg"
},
{
"path": "public/components/components-cards/2-dark.html",
"chars": 3144,
"preview": "<div\n class=\"flex w-full max-w-md flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate"
},
{
"path": "public/components/components-cards/2.html",
"chars": 3144,
"preview": "<div\n class=\"flex w-full max-w-md flex-col justify-between rounded-3xl bg-slate-50 p-8 text-slate-900 ring-1 ring-slate"
},
{
"path": "public/components/components-copy/1-dark.html",
"chars": 1539,
"preview": "<button\n type=\"button\"\n class=\"inline-flex cursor-pointer justify-center rounded-lg bg-slate-200 p-3 text-slate-800 tr"
},
{
"path": "public/components/components-copy/1.html",
"chars": 1539,
"preview": "<button\n type=\"button\"\n class=\"inline-flex cursor-pointer justify-center rounded-lg bg-slate-200 p-3 text-slate-800 tr"
},
{
"path": "public/components/components-copy/2-dark.html",
"chars": 1675,
"preview": "<button\n type=\"button\"\n class=\"inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg bg-slate-200 p-"
},
{
"path": "public/components/components-copy/2.html",
"chars": 1675,
"preview": "<button\n type=\"button\"\n class=\"inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg bg-slate-200 p-"
},
{
"path": "public/components/components-copy/3-dark.html",
"chars": 1683,
"preview": "<button\n type=\"button\"\n class=\"flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg bg-slate-20"
},
{
"path": "public/components/components-copy/3.html",
"chars": 1683,
"preview": "<button\n type=\"button\"\n class=\"flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg bg-slate-20"
},
{
"path": "public/components/components-pricing/1-dark.html",
"chars": 13604,
"preview": "<div class=\"bg-slate-200 py-4 dark:bg-slate-950\">\n <div class=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div class=\"mx-auto"
},
{
"path": "public/components/components-pricing/1.html",
"chars": 13604,
"preview": "<div class=\"bg-slate-200 py-4 dark:bg-slate-950\">\n <div class=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div class=\"mx-auto"
},
{
"path": "public/components/components-pricing/2-dark.html",
"chars": 13643,
"preview": "<div class=\"bg-slate-50 py-4 dark:bg-slate-900\">\n <div class=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div class=\"mx-auto "
},
{
"path": "public/components/components-pricing/2.html",
"chars": 13643,
"preview": "<div class=\"bg-slate-50 py-4 dark:bg-slate-900\">\n <div class=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div class=\"mx-auto "
},
{
"path": "public/components/components-pricing/3-dark.html",
"chars": 14245,
"preview": "<div class=\"bg-slate-50 py-4 dark:bg-slate-900\">\n <div class=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div class=\"mx-auto "
},
{
"path": "public/components/components-pricing/3.html",
"chars": 14245,
"preview": "<div class=\"bg-slate-50 py-4 dark:bg-slate-900\">\n <div class=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div class=\"mx-auto "
},
{
"path": "public/components/components-pricing/4-dark.html",
"chars": 14259,
"preview": "<div class=\"bg-slate-50 py-4 dark:bg-slate-900\">\n <div class=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div class=\"mx-auto "
},
{
"path": "public/components/components-pricing/4.html",
"chars": 14259,
"preview": "<div class=\"bg-slate-50 py-4 dark:bg-slate-900\">\n <div class=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div class=\"mx-auto "
},
{
"path": "public/components/components-prompt-containers/1-dark.html",
"chars": 9198,
"preview": "<!-- Prompt Messages Container - Modify the height according to your need -->\n<div class=\"flex h-[97vh] w-full flex-col\""
},
{
"path": "public/components/components-prompt-containers/1.html",
"chars": 9198,
"preview": "<!-- Prompt Messages Container - Modify the height according to your need -->\n<div class=\"flex h-[97vh] w-full flex-col\""
},
{
"path": "public/components/components-prompt-containers/2-dark.html",
"chars": 8809,
"preview": "<!-- Prompt Messages Container - Modify the height according to your need -->\n<div class=\"flex h-[97vh] w-full flex-col\""
},
{
"path": "public/components/components-prompt-containers/2.html",
"chars": 8809,
"preview": "<!-- Prompt Messages Container - Modify the height according to your need -->\n<div class=\"flex h-[97vh] w-full flex-col\""
},
{
"path": "public/components/components-prompt-containers/3-dark.html",
"chars": 8357,
"preview": "<!-- Prompt Messages Container - Modify the height according to your need -->\n<div class=\"flex h-[97vh] w-full flex-col\""
},
{
"path": "public/components/components-prompt-containers/3.html",
"chars": 8357,
"preview": "<!-- Prompt Messages Container - Modify the height according to your need -->\n<div class=\"flex h-[97vh] w-full flex-col\""
},
{
"path": "public/components/components-prompt-containers/4-dark.html",
"chars": 10359,
"preview": "<!-- Prompt Messages Container - Modify the height according to your need -->\n<div class=\"flex h-[97vh] w-full flex-col\""
},
{
"path": "public/components/components-prompt-containers/4.html",
"chars": 10359,
"preview": "<!-- Prompt Messages Container - Modify the height according to your need -->\n<div class=\"flex h-[97vh] w-full flex-col\""
},
{
"path": "public/components/components-prompt-history-panels/1-dark.html",
"chars": 3509,
"preview": "<!-- Prompt history panel -->\n<div\n class=\"max-w-xl rounded-lg border border-slate-300 bg-slate-50 dark:border-slate-20"
},
{
"path": "public/components/components-prompt-history-panels/1.html",
"chars": 3509,
"preview": "<!-- Prompt history panel -->\n<div\n class=\"max-w-xl rounded-lg border border-slate-300 bg-slate-50 dark:border-slate-20"
},
{
"path": "public/components/components-prompt-history-panels/2-dark.html",
"chars": 5042,
"preview": "<!-- Prompt history panel -->\n<div\n class=\"max-w-xl rounded-lg border border-slate-300 bg-slate-50 py-8 dark:border-sla"
},
{
"path": "public/components/components-prompt-history-panels/2.html",
"chars": 5042,
"preview": "<!-- Prompt history panel -->\n<div\n class=\"max-w-xl rounded-lg border border-slate-300 bg-slate-50 py-8 dark:border-sla"
},
{
"path": "public/components/components-prompt-history-panels/3-dark.html",
"chars": 5210,
"preview": "<!-- Prompt history panel -->\n<div\n class=\"max-w-xl rounded-lg border border-slate-300 bg-slate-50 py-8 dark:border-sla"
},
{
"path": "public/components/components-prompt-history-panels/3.html",
"chars": 5210,
"preview": "<!-- Prompt history panel -->\n<div\n class=\"max-w-xl rounded-lg border border-slate-300 bg-slate-50 py-8 dark:border-sla"
},
{
"path": "public/components/components-prompt-inputs/1-dark.html",
"chars": 2322,
"preview": "<form>\n <div class=\"mb-4 w-full max-w-3xl rounded-lg bg-slate-200 dark:bg-slate-900\">\n <div\n class=\"rounded-lg "
},
{
"path": "public/components/components-prompt-inputs/1.html",
"chars": 2322,
"preview": "<form>\n <div class=\"mb-4 w-full max-w-3xl rounded-lg bg-slate-200 dark:bg-slate-900\">\n <div\n class=\"rounded-lg "
},
{
"path": "public/components/components-prompt-inputs/2-dark.html",
"chars": 3412,
"preview": "<form>\n <div class=\"mb-4 w-full max-w-3xl rounded-lg bg-slate-200 dark:bg-slate-900\">\n <div\n class=\"rounded-lg "
},
{
"path": "public/components/components-prompt-inputs/2.html",
"chars": 3412,
"preview": "<form>\n <div class=\"mb-4 w-full max-w-3xl rounded-lg bg-slate-200 dark:bg-slate-900\">\n <div\n class=\"rounded-lg "
},
{
"path": "public/components/components-prompt-inputs/3-dark.html",
"chars": 2382,
"preview": "<form>\n <div class=\"mb-4 w-full max-w-3xl rounded-lg bg-slate-200 dark:bg-slate-900\">\n <div\n class=\"rounded-lg "
},
{
"path": "public/components/components-prompt-inputs/3.html",
"chars": 2382,
"preview": "<form>\n <div class=\"mb-4 w-full max-w-3xl rounded-lg bg-slate-200 dark:bg-slate-900\">\n <div\n class=\"rounded-lg "
},
{
"path": "public/components/components-prompt-inputs/4-dark.html",
"chars": 1392,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Search chats</label>\n <div class=\"relative max-w-3xl\">\n <input\n "
},
{
"path": "public/components/components-prompt-inputs/4.html",
"chars": 1392,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Search chats</label>\n <div class=\"relative max-w-3xl\">\n <input\n "
},
{
"path": "public/components/components-prompt-inputs/5-dark.html",
"chars": 1191,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Search chats</label>\n <div class=\"flex max-w-3xl gap-x-2\">\n <input\n"
},
{
"path": "public/components/components-prompt-inputs/5.html",
"chars": 1191,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Search chats</label>\n <div class=\"flex max-w-3xl gap-x-2\">\n <input\n"
},
{
"path": "public/components/components-prompt-inputs/6-dark.html",
"chars": 1244,
"preview": "<section class=\"max-w-3xl rounded-3xl shadow-xl dark:shadow-none\">\n <label\n for=\"file-input\"\n class=\"flex w-full "
},
{
"path": "public/components/components-prompt-inputs/6.html",
"chars": 1244,
"preview": "<section class=\"max-w-3xl rounded-3xl shadow-xl dark:shadow-none\">\n <label\n for=\"file-input\"\n class=\"flex w-full "
},
{
"path": "public/components/components-prompt-message-inputs/1-dark.html",
"chars": 1976,
"preview": "<form\n class=\"flex w-full items-center rounded-md bg-slate-200 p-2 dark:bg-slate-900\"\n>\n <label for=\"prompt\" class=\"sr"
},
{
"path": "public/components/components-prompt-message-inputs/1.html",
"chars": 1976,
"preview": "<form\n class=\"flex w-full items-center rounded-md bg-slate-200 p-2 dark:bg-slate-900\"\n>\n <label for=\"prompt\" class=\"sr"
},
{
"path": "public/components/components-prompt-message-inputs/2-dark.html",
"chars": 1297,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Enter prompt</label>\n <div class=\"flex gap-x-2\">\n <input\n id=\""
},
{
"path": "public/components/components-prompt-message-inputs/2.html",
"chars": 1297,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Enter prompt</label>\n <div class=\"flex gap-x-2\">\n <input\n id=\""
},
{
"path": "public/components/components-prompt-message-inputs/3-dark.html",
"chars": 1382,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Enter your prompt</label>\n <div class=\"relative\">\n <textarea\n "
},
{
"path": "public/components/components-prompt-message-inputs/3.html",
"chars": 1227,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Enter your prompt</label>\n <div class=\"relative\">\n <textarea\n "
},
{
"path": "public/components/components-prompt-message-inputs/4-dark.html",
"chars": 1715,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Enter your prompt</label>\n <div class=\"relative\">\n <button\n ty"
},
{
"path": "public/components/components-prompt-message-inputs/4.html",
"chars": 1525,
"preview": "<form>\n <label for=\"chat-input\" class=\"sr-only\">Enter your prompt</label>\n <div class=\"relative\">\n <button\n ty"
},
{
"path": "public/components/components-prompt-message-inputs/5-dark.html",
"chars": 2073,
"preview": "<!-- Loading indicator -->\n<div class=\"mt-4 flex justify-center\" aria-hidden=\"true\">\n <div class=\"flex animate-pulse sp"
},
{
"path": "public/components/components-prompt-message-inputs/5.html",
"chars": 2073,
"preview": "<!-- Loading indicator -->\n<div class=\"mt-4 flex justify-center\" aria-hidden=\"true\">\n <div class=\"flex animate-pulse sp"
},
{
"path": "public/components/components-prompt-message-inputs/6-dark.html",
"chars": 2544,
"preview": "<!-- Button above input -->\n<div class=\"mt-4 flex justify-center\">\n <button\n class=\"inline-flex items-center gap-x-2"
},
{
"path": "public/components/components-prompt-message-inputs/6.html",
"chars": 2544,
"preview": "<!-- Button above input -->\n<div class=\"mt-4 flex justify-center\">\n <button\n class=\"inline-flex items-center gap-x-2"
},
{
"path": "public/components/components-prompt-message-inputs/7-dark.html",
"chars": 3667,
"preview": "<!-- Suggestions pannel above input -->\n<div\n class=\"mt-4 flex w-full gap-x-2 overflow-x-auto whitespace-nowrap text-xs"
},
{
"path": "public/components/components-prompt-message-inputs/7.html",
"chars": 3667,
"preview": "<!-- Suggestions pannel above input -->\n<div\n class=\"mt-4 flex w-full gap-x-2 overflow-x-auto whitespace-nowrap text-xs"
},
{
"path": "public/components/components-prompt-messages/1-dark.html",
"chars": 6534,
"preview": "<div\n class=\"flex-1 overflow-y-auto bg-slate-300 text-sm leading-6 text-slate-900 shadow-md dark:bg-slate-800 dark:text"
},
{
"path": "public/components/components-prompt-messages/1.html",
"chars": 6534,
"preview": "<div\n class=\"flex-1 overflow-y-auto bg-slate-300 text-sm leading-6 text-slate-900 shadow-md dark:bg-slate-800 dark:text"
},
{
"path": "public/components/components-prompt-messages/2-dark.html",
"chars": 6453,
"preview": "<div\n class=\"flex-1 space-y-6 overflow-y-auto rounded-xl bg-slate-200 p-4 text-sm leading-6 text-slate-900 shadow-sm da"
},
{
"path": "public/components/components-prompt-messages/2.html",
"chars": 6453,
"preview": "<div\n class=\"flex-1 space-y-6 overflow-y-auto rounded-xl bg-slate-200 p-4 text-sm leading-6 text-slate-900 shadow-sm da"
},
{
"path": "public/components/components-prompt-messages/3-dark.html",
"chars": 6017,
"preview": "<div\n class=\"flex-1 overflow-y-auto rounded-xl bg-slate-200 p-4 text-sm leading-6 text-slate-900 dark:bg-slate-800 dark"
},
{
"path": "public/components/components-prompt-messages/3.html",
"chars": 6017,
"preview": "<div\n class=\"flex-1 overflow-y-auto rounded-xl bg-slate-200 p-4 text-sm leading-6 text-slate-900 dark:bg-slate-800 dark"
},
{
"path": "public/components/components-prompt-suggestions/1-dark.html",
"chars": 1874,
"preview": "<div\n class=\"mt-4 flex w-full gap-x-2 overflow-x-auto whitespace-nowrap text-xs text-slate-600 dark:text-slate-300 sm:t"
},
{
"path": "public/components/components-prompt-suggestions/1.html",
"chars": 1874,
"preview": "<div\n class=\"mt-4 flex w-full gap-x-2 overflow-x-auto whitespace-nowrap text-xs text-slate-600 dark:text-slate-300 sm:t"
},
{
"path": "public/components/components-prompt-suggestions/2-dark.html",
"chars": 3239,
"preview": "<!-- Suggestions pannel above input -->\n<div\n class=\"mt-4 flex w-full gap-x-2 overflow-x-auto whitespace-nowrap text-xs"
},
{
"path": "public/components/components-prompt-suggestions/2.html",
"chars": 3239,
"preview": "<!-- Suggestions pannel above input -->\n<div\n class=\"mt-4 flex w-full gap-x-2 overflow-x-auto whitespace-nowrap text-xs"
},
{
"path": "public/components/components-prompt-suggestions/3-dark.html",
"chars": 1112,
"preview": "<div\n class=\"mx-auto grid w-full max-w-3xl grid-cols-2 gap-4 text-xs text-slate-600 dark:text-slate-300 sm:grid-cols-3 "
},
{
"path": "public/components/components-prompt-suggestions/3.html",
"chars": 1112,
"preview": "<div\n class=\"mx-auto grid w-full max-w-3xl grid-cols-2 gap-4 text-xs text-slate-600 dark:text-slate-300 sm:grid-cols-3 "
},
{
"path": "public/components/components-prompts-cards/1-dark.html",
"chars": 5816,
"preview": "<!-- Prompt cards -->\n<ul\n role=\"list\"\n class=\"grid grid-cols-1 gap-6 text-slate-900 dark:text-slate-200 sm:grid-cols-"
},
{
"path": "public/components/components-prompts-cards/1.html",
"chars": 5811,
"preview": "<!-- Prompt cards -->\n<ul role=\"list\" class=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-2\">\n <li class=\"col-spa"
},
{
"path": "public/components/components-prompts-cards/2-dark.html",
"chars": 5394,
"preview": "<!-- Prompt cards -->\n<ul\n role=\"list\"\n class=\"grid grid-cols-1 gap-6 text-slate-900 dark:text-slate-200 sm:grid-cols-"
},
{
"path": "public/components/components-prompts-cards/2.html",
"chars": 5394,
"preview": "<!-- Prompt cards -->\n<ul\n role=\"list\"\n class=\"grid grid-cols-1 gap-6 text-slate-900 dark:text-slate-200 sm:grid-cols-"
},
{
"path": "public/components/components-prompts-cards/3-dark.html",
"chars": 2126,
"preview": "<!-- Prompt cards -->\n<ul\n role=\"list\"\n class=\"grid grid-cols-1 gap-6 text-slate-900 dark:text-slate-200 sm:grid-cols-"
},
{
"path": "public/components/components-prompts-cards/3.html",
"chars": 2126,
"preview": "<!-- Prompt cards -->\n<ul\n role=\"list\"\n class=\"grid grid-cols-1 gap-6 text-slate-900 dark:text-slate-200 sm:grid-cols-"
},
{
"path": "public/components/components-prompts-cards/4-dark.html",
"chars": 4823,
"preview": "<!-- Prompt cards -->\n<div class=\"grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n <a\n class=\"max-w-sm"
},
{
"path": "public/components/components-prompts-cards/4.html",
"chars": 4823,
"preview": "<!-- Prompt cards -->\n<div class=\"grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n <a\n class=\"max-w-sm"
},
{
"path": "public/components/components-sidebars/1-dark.html",
"chars": 6757,
"preview": "<!-- Sidebar -->\n<aside class=\"flex\">\n <div\n class=\"flex h-[100svh] w-60 flex-col overflow-y-auto bg-slate-50 pt-8 d"
},
{
"path": "public/components/components-sidebars/1.html",
"chars": 6757,
"preview": "<!-- Sidebar -->\n<aside class=\"flex\">\n <div\n class=\"flex h-[100svh] w-60 flex-col overflow-y-auto bg-slate-50 pt-8 d"
},
{
"path": "public/components/components-sidebars/2-dark.html",
"chars": 8741,
"preview": "<aside class=\"flex\">\n <!-- First Column -->\n <div\n class=\"flex h-screen w-12 flex-col items-center space-y-8 border"
},
{
"path": "public/components/components-sidebars/2.html",
"chars": 8741,
"preview": "<aside class=\"flex\">\n <!-- First Column -->\n <div\n class=\"flex h-screen w-12 flex-col items-center space-y-8 border"
},
{
"path": "public/components/components-sidebars/3-dark.html",
"chars": 8785,
"preview": "<aside class=\"flex\">\n <div\n class=\"flex h-screen w-12 flex-col items-center space-y-8 border-r border-slate-300 bg-s"
},
{
"path": "public/components/components-sidebars/3.html",
"chars": 8785,
"preview": "<aside class=\"flex\">\n <div\n class=\"flex h-screen w-12 flex-col items-center space-y-8 border-r border-slate-300 bg-s"
},
{
"path": "public/components/components-sidebars/4-dark.html",
"chars": 6242,
"preview": "<div class=\"flex flex-row-reverse\">\n <!-- Sidebar -->\n <aside class=\"flex\">\n <div\n class=\"relative h-screen w-"
},
{
"path": "public/components/components-sidebars/4.html",
"chars": 6242,
"preview": "<div class=\"flex flex-row-reverse\">\n <!-- Sidebar -->\n <aside class=\"flex\">\n <div\n class=\"relative h-screen w-"
},
{
"path": "public/components/components-toggles/1-dark.html",
"chars": 749,
"preview": "<div class=\"px-2 py-4\">\n <label class=\"relative flex cursor-pointer items-center\">\n <input type=\"checkbox\" value=\"\" "
},
{
"path": "public/components/components-toggles/1.html",
"chars": 749,
"preview": "<div class=\"px-2 py-4\">\n <label class=\"relative flex cursor-pointer items-center\">\n <input type=\"checkbox\" value=\"\" "
},
{
"path": "public/components/components-toggles/2-dark.html",
"chars": 568,
"preview": "<div class=\"flex flex-col\">\n <div class=\"flex justify-center\">\n <div\n class=\"rounded-full border border-slate-3"
},
{
"path": "public/components/components-toggles/2.html",
"chars": 568,
"preview": "<div class=\"flex flex-col\">\n <div class=\"flex justify-center\">\n <div\n class=\"rounded-full border border-slate-3"
},
{
"path": "public/iframe.js",
"chars": 423,
"preview": "document.addEventListener('DOMContentLoaded', function () {\n const iframeLinks = [...document.querySelectorAll('a')]\n "
},
{
"path": "sitemap.config.js",
"chars": 199,
"preview": "/** @type {import('next-sitemap').IConfig} */\nmodule.exports = {\n exclude: ['/components/**/*.html'],\n generateIndexSi"
},
{
"path": "src/components/Analytics.jsx",
"chars": 1245,
"preview": "'use client'\n\nimport Script from 'next/script'\nimport { usePathname, useSearchParams } from 'next/navigation'\nimport { u"
},
{
"path": "src/components/Banner.jsx",
"chars": 2991,
"preview": "'use client'\nimport Link from 'next/link'\nimport { useState, useEffect } from 'react'\n\nexport default function Banner() "
},
{
"path": "src/components/BrandLogo.jsx",
"chars": 1136,
"preview": "import Link from 'next/link'\n\nexport default function BrandLogo({\n withText = true,\n fontSize = 'text-sm',\n size = '8"
},
{
"path": "src/components/ButtonGithubStars.jsx",
"chars": 1310,
"preview": "'use client'\nimport { useState, useEffect } from 'react'\nimport IconGithub from './IconGithub'\nimport Link from 'next/li"
},
{
"path": "src/components/ButtonStyle.jsx",
"chars": 684,
"preview": "export default function ButtonStyle({ buttonIcon, buttonText, buttonActive }) {\n const buttonClasses = {\n DEFAULT: `"
},
{
"path": "src/components/CollectionCard.jsx",
"chars": 1916,
"preview": "import Link from 'next/link'\nimport * as Icons from '@component/CollectionIcons'\n\nexport default function CollectionCard"
},
{
"path": "src/components/CollectionGrid.jsx",
"chars": 809,
"preview": "import CollectionCard from '@component/CollectionCard'\n\nexport default function CollectionGrid({ componentItems }) {\n c"
},
{
"path": "src/components/CollectionIcons.jsx",
"chars": 7187,
"preview": "export const Alerts = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-6 w-6\"\n strokeWidth=\"2\"\n st"
},
{
"path": "src/components/CollectionLinks.jsx",
"chars": 3078,
"preview": "import Link from 'next/link'\n\nimport matter from 'gray-matter'\nimport { join } from 'path'\nimport { promises as fs } fro"
},
{
"path": "src/components/ComponentPreview.jsx",
"chars": 4750,
"preview": "import { useEffect, useRef, useState } from 'react'\n\nimport { useInView } from 'react-intersection-observer'\n\nimport { c"
},
{
"path": "src/components/ComponentsList.jsx",
"chars": 558,
"preview": "'use client'\n\nimport ComponentPreview from '@component/ComponentPreview'\n\nexport default function ComponentsList({ compo"
},
{
"path": "src/components/Container.jsx",
"chars": 131,
"preview": "export default function Container({ children, classNames }) {\n return <div className={`mx-auto ${classNames}`}>{childre"
},
{
"path": "src/components/Footer.jsx",
"chars": 2721,
"preview": "import Container from '@component/Container'\nimport BrandLogo from '@component/BrandLogo'\nimport Link from 'next/link'\n\n"
},
{
"path": "src/components/Header.jsx",
"chars": 2696,
"preview": "'use client'\n\nimport { useEffect, useState } from 'react'\n\nimport { usePathname } from 'next/navigation'\n\nimport Contain"
},
{
"path": "src/components/HeaderMenu.jsx",
"chars": 817,
"preview": "import IconMenu from '@component/IconMenu'\nimport MenuLinks from '@component/HeaderMenuLinks'\n\nexport default function H"
},
{
"path": "src/components/HeaderMenuLinks.jsx",
"chars": 902,
"preview": "import Link from 'next/link'\n\nexport default function HeaderMenuLinks({ menuLinks, navClass, ulClass }) {\n return (\n "
},
{
"path": "src/components/HeaderSearch.jsx",
"chars": 4351,
"preview": "import { useEffect, useRef, useState } from 'react'\n\nimport { usePathname } from 'next/navigation'\n\nimport Link from 'ne"
},
{
"path": "src/components/HeroBadge.jsx",
"chars": 336,
"preview": "export default function HeroBadge({ children }) {\n return (\n <span className=\"rounded-full bg-blue-500/10 bg-gradien"
},
{
"path": "src/components/HeroBanner.jsx",
"chars": 3310,
"preview": "import Container from '@component/Container'\nimport HeroPattern from './HeroPattern'\nimport HeroGradient from './HeroGra"
},
{
"path": "src/components/HeroComponentsPreview.jsx",
"chars": 17904,
"preview": "'use client'\n\nimport { useState } from 'react'\nimport HeroGradient from './HeroGradient'\n\nexport default function HeroCo"
},
{
"path": "src/components/HeroFeatures.jsx",
"chars": 8316,
"preview": "import Link from 'next/link'\nimport HeroBadge from './HeroBadge'\n\nexport default function HeroFeatures() {\n return (\n "
},
{
"path": "src/components/HeroGradient.jsx",
"chars": 756,
"preview": "export default function HeroGradient({ position = 'top-10' }) {\n return (\n <div\n className={\n `absolute "
},
{
"path": "src/components/HeroPattern.jsx",
"chars": 3872,
"preview": "export default function HeroPattern() {\n return (\n <svg\n className=\"absolute inset-0 -z-10 h-full w-full stroke"
},
{
"path": "src/components/IconClose.jsx",
"chars": 359,
"preview": "export default function IconClose() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n "
},
{
"path": "src/components/IconGithub.jsx",
"chars": 945,
"preview": "export default function IconGithub({ size = '5' }) {\n return (\n <svg\n aria-hidden=\"true\"\n className={`h-${"
},
{
"path": "src/components/IconMenu.jsx",
"chars": 359,
"preview": "export default function IconMenu() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-5 w"
},
{
"path": "src/components/IconTwitter.jsx",
"chars": 1091,
"preview": "export default function IconGithub() {\n return (\n <svg\n aria-hidden=\"true\"\n className=\"h-5 w-5\"\n fill"
},
{
"path": "src/components/MdxRemoteRender.jsx",
"chars": 247,
"preview": "'use client'\n\nimport { MDXRemote } from 'next-mdx-remote'\n\nexport default function MdxContent({\n mdxSource,\n mdxCompon"
},
{
"path": "src/components/PreviewBreakpoints.jsx",
"chars": 3487,
"preview": "import ButtonStyle from '@component/ButtonStyle'\n\nexport default function PreviewBreakpoint({\n handleSetPreviewWidth,\n "
},
{
"path": "src/components/PreviewCode.jsx",
"chars": 1836,
"preview": "import { useEffect } from 'react'\n\nimport Prism from 'prismjs'\nrequire('prismjs/components/prism-jsx.min')\n\nexport defau"
},
{
"path": "src/components/PreviewCopy.jsx",
"chars": 2113,
"preview": "import { useState, useEffect } from 'react'\n\nimport { useCopyToClipboard } from 'react-use'\n\nimport ButtonStyle from '@c"
},
{
"path": "src/components/PreviewDark.jsx",
"chars": 2034,
"preview": "export default function PreviewDark({ isDarkMode, handleSetIsDarkMode }) {\n const darkIcon = (\n <svg\n xmlns=\"ht"
},
{
"path": "src/components/PreviewIframe.jsx",
"chars": 1757,
"preview": "export default function PreviewIframe({\n showPreview,\n componentHtml,\n componentTitle,\n previewWidth = '100%',\n ref"
},
{
"path": "src/components/PreviewInteractive.jsx",
"chars": 392,
"preview": "import ButtonStyle from '@component/ButtonStyle'\n\nexport default function PreviewInteractive({\n isInteractive,\n handle"
},
{
"path": "src/components/PreviewTitle.jsx",
"chars": 489,
"preview": "export default function PreviewTitle({ componentTitle, componentHash }) {\n return (\n <h2 className=\"text-lg font-sem"
},
{
"path": "src/components/PreviewView.jsx",
"chars": 1199,
"preview": "import ButtonStyle from '@component/ButtonStyle'\n\nexport default function PreviewView({ showPreview, handleSetShowPrevie"
},
{
"path": "src/data/categories/components.mdx",
"chars": 144,
"preview": "---\ntitle: Components\nsubtitle: Components | LangUI\ndescription: Open Source Tailwind CSS components for your AI and GPT"
},
{
"path": "src/data/components/components-alerts.mdx",
"chars": 422,
"preview": "---\ntitle: Alerts\ncategory: components\ncontainer: p-8 max-w-md flex flex-col gap-4 justify-center items-center mx-auto\ns"
},
{
"path": "src/data/components/components-badges.mdx",
"chars": 540,
"preview": "---\ntitle: Badges\ncategory: components\ncontainer: p-8 flex items-center justify-center gap-4 sm:gap-8\nseo:\n title: Badg"
},
{
"path": "src/data/components/components-buttons.mdx",
"chars": 479,
"preview": "---\ntitle: Buttons\ncategory: components\ncontainer: flex w-full items-center justify-center gap-x-8 p-8\nseo:\n title: But"
},
{
"path": "src/data/components/components-cards.mdx",
"chars": 372,
"preview": "---\ntitle: Cards\ncategory: components\ncontainer: p-4 flex justify-center\nseo:\n title: Card Components\n description: Ca"
},
{
"path": "src/data/components/components-copy.mdx",
"chars": 488,
"preview": "---\ntitle: Copy to Clipboard\ncategory: components\ncontainer: flex py-12 items-center justify-center gap-8\nseo:\n title: "
},
{
"path": "src/data/components/components-pricing.mdx",
"chars": 563,
"preview": "---\ntitle: Pricing\ncategory: components\ncontainer: h-auto\nseo:\n title: Pricing Components\n description: Pricing compon"
},
{
"path": "src/data/components/components-prompt-containers.mdx",
"chars": 494,
"preview": "---\ntitle: Prompt Containers\ncategory: components\nseo:\n title: Prompt Container Components\n description: Prompt contai"
},
{
"path": "src/data/components/components-prompt-history-panels.mdx",
"chars": 523,
"preview": "---\ntitle: Prompt History Panels\ncategory: components\nseo:\n title: Prompt History Panels Components\n description: Prom"
},
{
"path": "src/data/components/components-prompt-inputs.mdx",
"chars": 639,
"preview": "---\ntitle: Prompt Inputs\ncategory: components\ncontainer: max-w-3xl mx-auto p-4\nseo:\n title: Prompt Input Components\n d"
},
{
"path": "src/data/components/components-prompt-message-inputs.mdx",
"chars": 678,
"preview": "---\ntitle: Prompt Message Inputs\ncategory: components\ncontainer: p-4\nseo:\n title: Prompt Message Inputs\n description: "
},
{
"path": "src/data/components/components-prompt-messages.mdx",
"chars": 413,
"preview": "---\ntitle: Prompt Messages\ncategory: components\ncontainer: p-2\nseo:\n title: Prompt Messages\n description: Prompt messa"
},
{
"path": "src/data/components/components-prompt-suggestions.mdx",
"chars": 479,
"preview": "---\ntitle: Prompt Suggestions\ncategory: components\ncontainer: p-4\nseo:\n title: Prompt Suggestions\n description: Prompt"
},
{
"path": "src/data/components/components-prompts-cards.mdx",
"chars": 542,
"preview": "---\ntitle: Prompts Cards\ncategory: components\ncontainer: p-4 flex justify-center\nseo:\n title: Prompts Card Components\n "
},
{
"path": "src/data/components/components-sidebars.mdx",
"chars": 505,
"preview": "---\ntitle: Sidebars\ncategory: components\ncontainer: border-none\nseo:\n title: Sidebar Components\n description: Sidebar "
},
{
"path": "src/data/components/components-toggles.mdx",
"chars": 385,
"preview": "---\ntitle: Toggles\ncategory: components\ncontainer: p-8 flex justify-center\nseo:\n title: Toggle Components\n description"
},
{
"path": "src/styles/components.css",
"chars": 103,
"preview": "@config \"./tailwind/components.config.js\";\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "src/styles/prism.css",
"chars": 3280,
"preview": "/**\n * Shades of Purple Theme for Prism.js\n *\n * @author Ahmad Awais <https://twitter.com/MrAhmadAwais/>\n * @support Fol"
},
{
"path": "src/styles/site.css",
"chars": 121,
"preview": "@config \"./tailwind/site.config.js\";\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@import './prism.css';"
},
{
"path": "src/styles/tailwind/components.config.js",
"chars": 207,
"preview": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: 'class',\n content: ['./public/components/**/"
},
{
"path": "src/styles/tailwind/extend.preset.js",
"chars": 348,
"preview": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n theme: {\n extend: {\n animation: {\n backg"
},
{
"path": "src/styles/tailwind/site.config.js",
"chars": 389,
"preview": "/** @type {import('tailwindcss').Config} */\nconst { fontFamily } = require('tailwindcss/defaultTheme')\nmodule.exports = "
},
{
"path": "src/utils/analyticsHelper.js",
"chars": 126,
"preview": "export const pageview = (GA_MEASUREMENT_ID, url) => {\n window.gtag('config', GA_MEASUREMENT_ID, {\n page_path: url,\n "
},
{
"path": "src/utils/transformers.js",
"chars": 2297,
"preview": "export function componentPreviewHtml(\n componentHtml,\n componentContainer = 'relative',\n isDarkMode = false,\n isRtl "
}
]
About this extraction
This page contains the full source code of the CommandCodeAI/langui GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 191 files (574.0 KB), approximately 192.1k tokens, and a symbol index with 53 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.