Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Copied detailed style info from the Changelog to Components.json. #5615

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion apps/www/content/docs/components-json.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,28 @@ You can see the JSON Schema for `components.json` [here](https://ui.shadcn.com/s

## style

The style for your components. **This cannot be changed after initialization.**
We are introducing a new concept called _Style_.

_You can think of style as the visual foundation: shapes, icons, animations & typography._ A style comes with its own set of components, animations, icons and more.

We are shipping two styles: `default` and `new-york` (with more coming soon).

<Image
src="/images/style.jpg"
width="716"
height="402"
alt="Default vs New York style"
className="border rounded-lg overflow-hidden mt-6"
/>

The `default` style is the one you are used to. It's the one we've been using since the beginning of this project. It uses `lucide-react` for icons and `tailwindcss-animate` for animations.

The `new-york` style is a new style. It ships with smaller buttons, cards with shadows and a new set of icons from [Radix Icons](https://icons.radix-ui.com).

When you run the `init` command, you will be asked which style you would like to use. This is saved in your `components.json` file.


**Important:** The selected style cannot be changed after initialization.

```json title="components.json"
{
Expand Down