mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
coss.com - day 0
This commit is contained in:
pasqualevitiello
@@ -1,118 +1,100 @@
|
||||
# Origin UI
|
||||
|
||||
<h3 align="center">coss.com (formerly Origin UI)</h3>
|
||||
<p align="center">The <strong>everything but AI</strong> company.</p>
|
||||
|
||||
**Beautiful UI components built with Tailwind CSS and React.**
|
||||
## About the Project
|
||||
|
||||
Origin UI is an extensive collection of copy-and-paste components for quickly building app UIs. It includes hundreds of components and is constantly updated with new designs.
|
||||
coss.com is the new holding company of [cal.com](https://cal.com), the pioneers of open source scheduling infrastructure. Our mission is to build a home for amazing open source projects, giving them the support they need to grow and succeed.
|
||||
|
||||
**Demo** → [https://originui.com](https://originui.com)
|
||||
We're building the coss stack, a one line `npm install @coss` package that includes everything you need to build your application, from email, SMS, calendar, scheduling, video conferencing, notifications and more.
|
||||
|
||||
|
||||
## Repository Overview
|
||||
|
||||
## Getting Started
|
||||
This repository contains multiple products and applications that make up the coss.com ecosystem:
|
||||
|
||||
Origin UI is designed to integrate seamlessly with Next.js projects, but the components are also compatible with any React-based project. The components follow shadcn conventions, so they'll feel familiar to anyone who has used shadcn before.
|
||||
### Apps and Packages
|
||||
|
||||
**1. Set up the required files:**
|
||||
- **`apps/www/`** - Main **coss.com** website
|
||||
- **`apps/origin/`** - Legacy **Origin UI** components (pre-acquisition)
|
||||
- **`packages/ui/`** - Shared UI components package
|
||||
- **`packages/eslint-config/`** - ESLint configurations
|
||||
- **`packages/typescript-config/`** - TypeScript configurations
|
||||
|
||||
- Copy all `.tsx` files from Origin UI's `registry/default/ui` folder to your project's `components/ui` folder.
|
||||
- Copy `utils.ts` from Origin UI's `registry/default/lib` folder to your project's `lib` folder.
|
||||
Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
|
||||
|
||||
Note: If you're using shadcn, you may likely already have these files - however, I would recommend using our components over shadcn's for a consistent styling experience.
|
||||
### Environment Variables
|
||||
|
||||
**2. Add the following CSS variables to your stylesheet (you don't need to overwrite them if you already have them):**
|
||||
This monorepo contains multiple Next.js applications that are designed to link to each other. For the navigation to work correctly, you must set up environment variables for both local development and production deployments.
|
||||
|
||||
```
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(0.21 0.006 285.885);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.637 0.237 25.331);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.871 0.006 286.286);
|
||||
--ring: oklch(0.871 0.006 286.286);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.21 0.006 285.885);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.871 0.006 286.286);
|
||||
}
|
||||
#### Local Development
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.141 0.005 285.823);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.141 0.005 285.823);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.21 0.006 285.885);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.21 0.006 285.885);
|
||||
--muted-foreground: oklch(0.65 0.01 286);
|
||||
--accent: oklch(0.21 0.006 285.885);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.274 0.006 286.033);
|
||||
--input: oklch(0.274 0.006 286.033);
|
||||
--ring: oklch(0.442 0.017 285.786);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.274 0.006 286.033);
|
||||
--sidebar-ring: oklch(0.442 0.017 285.786);
|
||||
}
|
||||
For local development, create a `.env.local` file in each of the app directories with the corresponding variables.
|
||||
|
||||
1. **`www` app**
|
||||
|
||||
This app needs to know the URLs of the other apps. Create a file at `apps/www/.env.local`:
|
||||
|
||||
```sh
|
||||
# apps/www/.env.local
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:3000
|
||||
```
|
||||
|
||||
2. **`origin` app**
|
||||
|
||||
This app needs to know the URLs of the other apps. Create a file at `apps/origin/.env.local`:
|
||||
|
||||
```sh
|
||||
# apps/origin/.env.local
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:4001/origin
|
||||
NEXT_PUBLIC_COSS_URL=http://localhost:3000
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> Turborepo is configured to watch for changes in `.env*` files, so it will automatically invalidate the cache when these variables change.
|
||||
|
||||
### Development
|
||||
|
||||
This Turborepo has some additional tools already setup for you:
|
||||
|
||||
- [TypeScript](https://www.typescriptlang.org/) for static type checking
|
||||
- [ESLint](https://eslint.org/) for code linting
|
||||
- [Prettier](https://prettier.io) for code formatting
|
||||
|
||||
#### Build
|
||||
|
||||
To build all apps and packages:
|
||||
|
||||
```sh
|
||||
pnpm build
|
||||
```
|
||||
|
||||
After completing these steps, you can copy and use the components in your project. Note that some components (e.g., number inputs, date pickers, time pickers, phone number inputs) may require additional libraries.
|
||||
To build a specific app:
|
||||
|
||||
## Tailwind v4 support
|
||||
|
||||
Our UI library has been updated to Tailwind CSS v4 as of February 25, 2025. Legacy components built with v3 remain available by adding `/legacy/` to the component URL:
|
||||
|
||||
```bash
|
||||
# v3 legacy component
|
||||
pnpm dlx shadcn@latest add https://originui.com/r/legacy/comp-01.json
|
||||
```sh
|
||||
pnpm build --filter=www
|
||||
pnpm build --filter=origin
|
||||
```
|
||||
|
||||
Note: New components will only be developed for Tailwind v4.
|
||||
#### Develop
|
||||
|
||||
## Contributing
|
||||
To develop all apps and packages:
|
||||
|
||||
We welcome contributions to Origin UI! Please read our [contributing guidelines](CONTRIBUTING.md) on how to submit improvements and new components.
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## License
|
||||
To develop a specific app:
|
||||
|
||||
Licensed under the [MIT License](https://github.com/origin-space/originui/blob/main/LICENSE.md).
|
||||
```sh
|
||||
pnpm dev --filter=www
|
||||
pnpm dev --filter=origin
|
||||
```
|
||||
|
||||
If you have any questions or just want to say hi, feel free to reach out to us on X 👉 [@pacovitiello](https://x.com/pacovitiello) & [@DavidePacilio](https://x.com/DavidePacilio).
|
||||
## Licensing
|
||||
|
||||
This repository uses a mixed licensing approach. The default license for this project is [AGPLv3.0](LICENSE).
|
||||
|
||||
- **MIT**: The `apps/origin/` directory is licensed under its original MIT license
|
||||
- **AGPLv3**: All other directories are licensed under the GNU Affero General Public License v3.0
|
||||
|
||||
For detailed information, see our [Licensing documentation](LICENSING.md).
|
||||
|
||||
Reference in New Issue
Block a user