How to install the default and new york styles together?

[abedshaaban]

I would like to have both styles available in my project the default style and the new york style for components. How can i do so?

[corysimmons]

You could try to merge them into the same component, but it would be messy and difficult, so I'd suggest doing something like:

- components
  - shadcn-ui
    - default
      - index.tsx
      - Button
      - ...
    - new-york
      - index.tsx
      - Button
      - ...

Then just use them in your pages like:

import { accordion as DefaultAccordion } from '~/components/shadcn-ui/default'
import { accordion as NYAccordion } from '~/components/shadcn-ui/new-york'

export default function SomePage() {
  return (
    <div>
      <DefaultAccordion>...</DefaultAccordion>
      <NYAccordion>...</NYAccordion>
    </div>
  )
}

I hope this helps.

[EklavyaPanchani08]

How can i make it dynamic?
like if select new-york style then all com. should be new-york style

[corysimmons]

Make a parent folder like

- components
  - ui
    - entrypoint-components
      - index.ts
      - Button.tsx
    - default
      - index.ts
      - Button
      - ...
    - new-york
      - index.ts
      - Button
      - ...

Then

// App.tsx
<SomeContext.Provider theme="default">
  <YourApp/>
</SomeContext.Provider>

// entrypoint-components.tsx
import someContext from '../contexts'
import {useContext} from 'react'
import {Button as DefaultButton} from '../default/Button'

export default Button(props) {
  const ctx = useContext(someContext)
  if (someContext.theme === 'default') {
    return <DefaultButton {...props} />
  }
// etc for every theme
}

This is just pseudo code obviously. Just one example of how to do this..

[EklavyaPanchani08]

It's working, however if you add a lot of components, the code will get too long.
Do you know of another short code solution?

[corysimmons]

What code will get too long?

[EklavyaPanchani08]

entrypoint-components.tsx

I will used to many com. like button, input,card etc.

[corysimmons]

// entrypoint-components/index.ts
export {default as Button} from './Button'
export {default as Dropdown} from './Dropdown'
export {default as Banana} from './Banana'
export {default as Blah} from './Blah'

[EklavyaPanchani08]

Not like that i want to make it like this :-

`import { useConfig } from "@/hooks/use-config";

const [config] = useConfig();
const style = config?.style ? config?.style : "default";

const { Button } = require(@/components/${style}/ui/button);
const { Alert } = require(@/components/${style}/ui/alert);

export { Button, Alert };`

but it's not wokring; so if you have any alternative of this pls suggest
so it will make things easy

[EklavyaPanchani08]

Getting this error

[corysimmons]

I don't think you can

require(`abc/${someVar}/xyz`)

I'm unsubscribing now but good luck. It's definitely possible.